responsive web design
TRANSCRIPT
RESPONSIVE
DESIGN
Abdulhadi ÇELENLİOĞLUSenior DeveloperSONY
AGENDA
DEFINITION / HISTORY
FACTS
HOW?
TOOLS
TEST
DEFINITION
Optimal Viewing Experience
DEFINITION
NO PINCHING NO SQUINTING NO SCROLLING
DEFINITION
Optimal Viewing Experience
HISTORY
Cameron AdamsSeptember, 2004Resolution Dependent LayoutEthan MarcotteMay, 2010Responsive Web Design
FACTS
1.4 BILLION SMARTPHONES
FACTS
2 HOURS PER DAY
1 IN 4 ONLINE SEARCH
%67 LIKELY TO PURCHASE
FACTS
HOW?
+ONEURL
SINGLECONTENT
HOW?
+ +VIEWPORT
TAGFLUIDGRIDS
MEDIAQUERIES
PIXELS ARE NOT PIXELS
Device Pixel RatioPhysical PixelsLogical Pixels
=
PIXELS ARE NOT PIXELS
1920 x 1080 pixels960 x 540 pixels 2=
1920 x 1080 pixels1920 x 1080 pixels 1=
1920 x 1080 pixels640 x 360 pixels 3=
PIXELS ARE NOT PIXELS
VIEWPORT
VIEWPORT
VIEWPORT
VIEWPORT
VIEWPORT
"name=viewport" to control the width and scaling of the browsers viewport. "width=device-width" to match the screen's width in device independent
pixels. "initial-scale=1" to establish a 1:1 relationship between CSS pixels and
device independent pixels.
<head><meta name="viewport" content="width=device-width, initial-scale=1">
</head>
FLUID GRIDS
FLUID GRIDS
YESNOdiv.fullWidth {width: 640px;margin-left: auto;margin-right: auto;
}
div.fullWidth {width: 100%;
}
Fixed width is dead.Long live 100%
FLEXIBLE IMAGES
FLEXIBLE IMAGES
MINWIDTH / HEIGHT
MAXWIDTH / HEIGHT
FLEXIBLE IMAGES
200 KB1382 x 778 px
100 KB992 x 559 px
70 KB768 x 443 px
30 KB480 x 272 px
FLEXIBLE IMAGES
MEDIA QUERIES@media (query) {/* CSS Rules used when query matches */
}
@media (min-width: 700px) {...
}
@media (min-width: 700px) and (orientation: landscape) {...
}
@media handheld and (min-width: 700px) and (orientation: landscape) {...
}
BREAK
WHERETO START?
MOBILEFIRST
WHICHDEVICES?
NONEOF THEM
BREAK
1024~ 1023~768 767~320
FONT
12 14 16 18 20 24 28 32 36 40 44 48 54 60 66 72
45 to 75 characters
FONT
FONT
CONVERSION
THINGS TO CONSIDER
Time & Money
Older Browsers
Content
Website vs. Mobile App
SEARCH RESULTS
MULTI WINDOW
TOOLS
Grid & Frameworks (Bootstrap, Less, Skeleton etc.)
Sketch Sheets & Wireframes (StyleTil.es etc.)
JavaScript & jQuery (Adapt.js, Respond.js etc.)
Other (FitText.js, Retina Images, Grunt etc.)
TEST
URL & iFrame (screenfly, screenqueri.es etc.)
Browser Tools (Chrome, Firefox etc.)
Emulators (Android, iOS, WP etc.)
Applications & Extensions (Adobe Edge Inspect etc.)
Q&A