Responsive Web Design
-
Upload
abdulhadi-celenlioglu -
Category
Design
-
view
3.218 -
download
0
Transcript of Responsive Web Design
![Page 1: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/1.jpg)
RESPONSIVE
DESIGN
Abdulhadi ÇELENLİOĞLUSenior DeveloperSONY
![Page 2: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/2.jpg)
AGENDA
DEFINITION / HISTORY
FACTS
HOW?
TOOLS
TEST
![Page 3: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/3.jpg)
DEFINITION
Optimal Viewing Experience
![Page 4: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/4.jpg)
DEFINITION
NO PINCHING NO SQUINTING NO SCROLLING
![Page 5: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/5.jpg)
DEFINITION
Optimal Viewing Experience
![Page 6: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/6.jpg)
HISTORY
Cameron AdamsSeptember, 2004Resolution Dependent LayoutEthan MarcotteMay, 2010Responsive Web Design
![Page 7: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/7.jpg)
FACTS
1.4 BILLION SMARTPHONES
![Page 8: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/8.jpg)
FACTS
2 HOURS PER DAY
1 IN 4 ONLINE SEARCH
%67 LIKELY TO PURCHASE
![Page 9: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/9.jpg)
FACTS
![Page 10: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/10.jpg)
HOW?
+ONEURL
SINGLECONTENT
![Page 11: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/11.jpg)
HOW?
+ +VIEWPORT
TAGFLUIDGRIDS
MEDIAQUERIES
![Page 12: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/12.jpg)
PIXELS ARE NOT PIXELS
![Page 13: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/13.jpg)
Device Pixel RatioPhysical PixelsLogical Pixels
=
PIXELS ARE NOT PIXELS
![Page 14: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/14.jpg)
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
![Page 15: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/15.jpg)
VIEWPORT
![Page 16: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/16.jpg)
VIEWPORT
![Page 17: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/17.jpg)
VIEWPORT
![Page 18: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/18.jpg)
VIEWPORT
![Page 19: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/19.jpg)
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>
![Page 24: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/24.jpg)
FLUID GRIDS
![Page 25: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/25.jpg)
FLUID GRIDS
YESNOdiv.fullWidth {width: 640px;margin-left: auto;margin-right: auto;
}
div.fullWidth {width: 100%;
}
Fixed width is dead.Long live 100%
![Page 26: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/26.jpg)
FLEXIBLE IMAGES
![Page 27: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/27.jpg)
FLEXIBLE IMAGES
MINWIDTH / HEIGHT
MAXWIDTH / HEIGHT
![Page 28: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/28.jpg)
FLEXIBLE IMAGES
200 KB1382 x 778 px
100 KB992 x 559 px
70 KB768 x 443 px
30 KB480 x 272 px
![Page 29: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/29.jpg)
FLEXIBLE IMAGES
![Page 30: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/30.jpg)
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) {...
}
![Page 31: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/31.jpg)
BREAK
WHERETO START?
MOBILEFIRST
WHICHDEVICES?
NONEOF THEM
![Page 32: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/32.jpg)
BREAK
1024~ 1023~768 767~320
![Page 33: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/33.jpg)
FONT
12 14 16 18 20 24 28 32 36 40 44 48 54 60 66 72
45 to 75 characters
![Page 35: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/35.jpg)
FONT
![Page 36: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/36.jpg)
FONT
![Page 37: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/37.jpg)
CONVERSION
![Page 38: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/38.jpg)
THINGS TO CONSIDER
Time & Money
Older Browsers
Content
Website vs. Mobile App
![Page 39: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/39.jpg)
SEARCH RESULTS
![Page 40: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/40.jpg)
MULTI WINDOW
![Page 41: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/41.jpg)
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.)
![Page 42: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/42.jpg)
TEST
URL & iFrame (screenfly, screenqueri.es etc.)
Browser Tools (Chrome, Firefox etc.)
Emulators (Android, iOS, WP etc.)
Applications & Extensions (Adobe Edge Inspect etc.)
![Page 43: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/43.jpg)
![Page 44: Responsive Web Design](https://reader033.fdocuments.net/reader033/viewer/2022042818/55b9e31bbb61eb874e8b4844/html5/thumbnails/44.jpg)
Q&A