RWD-Optimal Viewing Experience Across Devices
•
57 j'aime•10,468 vues
Responsive web design refers to a website designed to adapt to whatever device a visitor is using. Responsive web sites are designed to provide an optimal viewing experience across all platforms. In this presentation, you'll find benefits and basic principles of Responsive Web Design.
Recommandé
Contenu connexe
Similaire à RWD-Optimal Viewing Experience Across Devices
Similaire à RWD-Optimal Viewing Experience Across Devices (20)
Dernier
Dernier (20)
RWD-Optimal Viewing Experience Across Devices
- 2. AGENDA DEFINITION / HISTORY FACTS HOW? TOOLS TEST
- 4. DEFINITION NO PINCHING NO SQUINTING NO SCROLLING
- 6. HISTORY Cameron Adams September, 2004 Resolution Dependent Layout Ethan Marcotte May, 2010 Responsive Web Design
- 8. FACTS 2HOURS PER DAY 1 IN 4 ONLINE SEARCH %67 LIKELY TO PURCHASE
- 9. FACTS
- 12. PIXELS ARE NOT PIXELS
- 13. Device Pixel Ratio Physical Pixels Logical Pixels = PIXELS ARE NOT PIXELS
- 14. 1920 x 1080 pixels 960 x 540 pixels 2= 1920 x 1080 pixels 1920 x 1080 pixels 1= 1920 x 1080 pixels 640 x 360 pixels 3= PIXELS ARE NOT PIXELS
- 15. VIEWPORT
- 16. VIEWPORT
- 17. VIEWPORT
- 18. VIEWPORT
- 19. 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>
- 20. WITHOUT & WITH bit.ly/rwd-novp bit.ly/rwd-vp
- 24. FLUID GRIDS
- 25. FLUID GRIDS YESNO div.fullWidth { width: 640px; margin-left: auto; margin-right: auto; } div.fullWidth { width: 100%; } Fixed width is dead. Long live 100%
- 26. FLEXIBLE IMAGES
- 27. FLEXIBLE IMAGES MIN WIDTH / HEIGHT MAX WIDTH / HEIGHT
- 28. FLEXIBLE IMAGES 200 KB 1382 x 778 px 100 KB 992 x 559 px 70 KB 768 x 443 px 30 KB 480 x 272 px
- 29. FLEXIBLE IMAGES
- 30. 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) { ... }
- 33. FONT 12 14 16 18 20 24 28 32 36 404448 54 60 66 72 45to 75characters
- 34. FONT FULL VIEW ZOOMED IN
- 35. FONT
- 36. FONT
- 37. CONVERSION
- 38. THINGS TO CONSIDER Time & Money Older Browsers Content Website vs. Mobile App
- 39. SEARCH RESULTS
- 40. MULTI WINDOW
- 41. 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.)
- 42. TEST URL & iFrame (screenfly, screenqueri.es etc.) Browser Tools (Chrome, Firefox etc.) Emulators (Android, iOS, WP etc.) Applications & Extensions (Adobe Edge Inspect etc.)
- 44. Q&A