Responsive design

1,109 views
1,054 views

Published on

This is a quick presentation I gave to my teammates to demonstrate some features of responsive design and how it can be applied across different viewports.

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,109
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
38
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Responsive design

  1. 1. AN OVERVIEW OFRESPONSIVE WEB DESIGN Ivan Frantar - 2012
  2. 2. MEDIA QUERIES• What is Responsive Design?• Mobile Influence• Fluid Design• Adapting to Context• Adapting to Typography• Adaptive Images• Media Queries• Tools for browser compatibility
  3. 3. WHAT IS RESPONSIVE WEB DESIGN?“Rather than tailoring disconnected designs to each of an ever-increasingnumber of web devices, we can treat them as facets of the sameexperience. We can design for an optimal viewing experience, but embedstandards-based technologies into our designs to make them not onlymore flexible, but more adaptive to the media that renders them.In short, we need to practice responsive web design.- Ethan MarcotteSource: http://www.alistapart.com/articles/responsive-web-design/
  4. 4. WHAT IS RESPONSIVE WEB DESIGN?• Flexible grid layout• Flexible Images & Typography• Media queries• Adaptive User ExperienceBENEFITS• Cant afford mobile developers• Optimize User Experience using same content
  5. 5. MOBILE INFLUENCESource: http://www.flickr.com/photos/jodyodea/3910686634/
  6. 6. MOBILE INFLUENCESTATISTICS AS OF END OF 2011Connect 69% 31% AppNavigate 65% 35% BrowserInform 61% 39%Manage 54% 46%Entertain 40% 60%Search 37% 63%Shop 27% 73% Source: http://www.mediafly.com/2012/02/mobile-app-usage-vs-browser-usage-on-mobile-devices/
  7. 7. FLUID DESIGN #header 100% #header 100%#content 70% #sidebar 20% #main-content 20% 30% 60% #footer 100% #footer 100% #wrapper max-width:960px
  8. 8. FLUID DESIGN• Good for different screen sizes• Good for accessibility• Good for keeping the content flexible
  9. 9. BUT WHAT ABOUT ALL THOSE GADGETS PEOPLE ARE CARRING WITH THEM?
  10. 10. ADAPTING TO CONTEXTTarget % Context = Result 960px 698px 218px
  11. 11. ADAPTING TO CONTEXTTarget % Context = Result 960px 96% 698px 218px 698 % 960 218 % 960 Width:72.7083333%; Width:22.7083333%;
  12. 12. ADAPTING TYPOGRAPHYUSING EMS• Size of an em related to the size of its context• Most browsers use as default 16px font size• Therefore if we use ems by changing the size of the body tag We can change the size of all the types accordinglybody { font-size:100%; /* will condition the size across font */ 218px}
  13. 13. ADAPTING TYPOGRAPHYUSING EMS – example• Apply same formula: target % context = result#header { #header { display: block; display: block; padding-top: 75px; padding-top: 75px; color: #333; color: #333; text-transform: uppercase; text-transform: uppercase; font: Arial; font: Arial; font-size: 48px; font-size: 3em; /* 48 % 16 = 3 */} } 218px
  14. 14. ADAPTING IMAGESimg { max-width:100%;}• Automatically images will scale 100% of container• Remove height and width attributes on <img> tag• Applicable to <embed>, <object>, <video> 218px
  15. 15. ADAPTING IMAGESPROBLEMS• File size not suitable from one viewport to another• Connectivity hungry if large images for wrong device• No solid solution to retrieve images appropriatly to deviceSOLUTIONS (NOT ENTIRELY RELIABLE AT PRESENT TIME)• Responsive Images: 218px Experimenting with Context-Aware Image Sizing (link)• Adaptive Images (link)
  16. 16. MEDIA QUERIES@media screen and (max-width: 1200px) { @media screen and (max-width: 980px) {body{ body{ width:1000px; width:850px; margin:0 auto; margin:0 auto; } }#content { #content { width: 700px; width: 550px; } }.sidebar{ .sidebar{ width:280px; width:280px; } }} }@media screen and (max-width: 750px) { @media screen and (max-width: 380px) {body{ body{ width:600px; width:360px; 218px margin:0 auto; margin:0 auto; } }#content { #content { width: 400px; width: 360px; } }.sidebar{ .sidebar{ width:190px; width:360px; margin: 0 0 20px 10px; margin: 0 0 10px 0; } }} }
  17. 17. MEDIA QUERIES
  18. 18. TOOLS & SOURCES• Modernizr (link)• Mediaqueri.es (link)• Respond.js (link)• Semantic.gs (link)• Columnal.com (link)
  19. 19. AN OVERVIEW OFRESPONSIVE WEB DESIGN Ivan Frantar - 2012
  20. 20. MEDIA QUERIES• What is Responsive Design?• Mobile Influence• Fluid Design• Adapting to Context• Adapting to Typography• Adaptive Images• Media Queries• Tools for browser compatibility
  21. 21. WHAT IS RESPONSIVE WEB DESIGN?“Rather than tailoring disconnected designs to each of an ever-increasingnumber of web devices, we can treat them as facets of the sameexperience. We can design for an optimal viewing experience, but embedstandards-based technologies into our designs to make them not onlymore flexible, but more adaptive to the media that renders them.In short, we need to practice responsive web design.- Ethan MarcotteSource: http://www.alistapart.com/articles/responsive-web-design/
  22. 22. WHAT IS RESPONSIVE WEB DESIGN?• Flexible grid layout• Flexible Images & Typography• Media queries• Adaptive User ExperienceBENEFITS• Cant afford mobile developers• Optimize User Experience using same content
  23. 23. MOBILE INFLUENCESource: http://www.flickr.com/photos/jodyodea/3910686634/
  24. 24. MOBILE INFLUENCESTATISTICS AS OF END OF 2011Connect 69% 31% AppNavigate 65% 35% BrowserInform 61% 39%Manage 54% 46%Entertain 40% 60%Search 37% 63%Shop 27% 73% Source: http://www.mediafly.com/2012/02/mobile-app-usage-vs-browser-usage-on-mobile-devices/
  25. 25. FLUID DESIGN #header 100% #header 100%#content 70% #sidebar 20% #main-content 20% 30% 60% #footer 100% #footer 100% #wrapper max-width:960px
  26. 26. FLUID DESIGN• Good for different screen sizes• Good for accessibility• Good for keeping the content flexible
  27. 27. BUT WHAT ABOUT ALL THOSE GADGETS PEOPLE ARE CARRING WITH THEM?
  28. 28. ADAPTING TO CONTEXTTarget % Context = Result 960px 698px 218px
  29. 29. ADAPTING TO CONTEXTTarget % Context = Result 960px 96% 698px 218px 698 % 960 218 % 960 Width:72.7083333%; Width:22.7083333%;
  30. 30. ADAPTING TYPOGRAPHYUSING EMS• Size of an em related to the size of its context• Most browsers use as default 16px font size• Therefore if we use ems by changing the size of the body tag We can change the size of all the types accordinglybody { font-size:100%; /* will condition the size across font */ 218px}
  31. 31. ADAPTING TYPOGRAPHYUSING EMS – example• Apply same formula: target % context = result#header { #header { display: block; display: block; padding-top: 75px; padding-top: 75px; color: #333; color: #333; text-transform: uppercase; text-transform: uppercase; font: Arial; font: Arial; font-size: 48px; font-size: 3em; /* 48 % 16 = 3 */} } 218px
  32. 32. ADAPTING IMAGESimg { max-width:100%;}• Automatically images will scale 100% of container• Remove height and width attributes on <img> tag• Applicable to <embed>, <object>, <video> 218px
  33. 33. ADAPTING IMAGESPROBLEMS• File size not suitable from one viewport to another• Connectivity hungry if large images for wrong device• No solid solution to retrieve images appropriatly to deviceSOLUTIONS (NOT ENTIRELY RELIABLE AT PRESENT TIME)• Responsive Images: 218px Experimenting with Context-Aware Image Sizing (link)• Adaptive Images (link)
  34. 34. MEDIA QUERIES@media screen and (max-width: 1200px) { @media screen and (max-width: 980px) {body{ body{ width:1000px; width:850px; margin:0 auto; margin:0 auto; } }#content { #content { width: 700px; width: 550px; } }.sidebar{ .sidebar{ width:280px; width:280px; } }} }@media screen and (max-width: 750px) { @media screen and (max-width: 380px) {body{ body{ width:600px; width:360px; 218px margin:0 auto; margin:0 auto; } }#content { #content { width: 400px; width: 360px; } }.sidebar{ .sidebar{ width:190px; width:360px; margin: 0 0 20px 10px; margin: 0 0 10px 0; } }} }
  35. 35. MEDIA QUERIES
  36. 36. TOOLS & SOURCES• Modernizr (link)• Mediaqueri.es (link)• Respond.js (link)• Semantic.gs (link)• Columnal.com (link)

×