Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Mobile First Responsive Design

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 101 Anzeige

Mobile First Responsive Design

Herunterladen, um offline zu lesen

Mobile first and responsive web design aren’t simply two great tastes that go great together. No they represent much more than that. Mobile first responsive web design is the responsible way to build responsive designs.

Mobile first responsive web design is the best way to build something that is both responsive from a layout AND a performance perspective.

But if mobile first is the right way to do responsive design, then why are so few people doing it? In this presentation, we’ll dig into why mobile first responsive design matters and the five techniques necessary to make it work.

Mobile first and responsive web design aren’t simply two great tastes that go great together. No they represent much more than that. Mobile first responsive web design is the responsible way to build responsive designs.

Mobile first responsive web design is the best way to build something that is both responsive from a layout AND a performance perspective.

But if mobile first is the right way to do responsive design, then why are so few people doing it? In this presentation, we’ll dig into why mobile first responsive design matters and the five techniques necessary to make it work.

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (18)

Andere mochten auch (20)

Anzeige

Ähnlich wie Mobile First Responsive Design (20)

Weitere von Jason Grigsby (20)

Anzeige

Aktuellste (20)

Mobile First Responsive Design

  1. 1. Mobile First Responsive Design Jason Grigsby • @grigs • jason@cloudfour.com http://www.flickr.com/photos/stuart-dootson/4024407198
  2. 2. Follow along @grigs Slides: bit.ly/mf-rwd http://www.flickr.com/photos/stevegarfield/4247757731/
  3. 3. The web has always been a balancing act… http://www.flickr.com/photos/classblog/5136926303
  4. 4. with many competing priorities. http://www.flickr.com/photos/tudor/4324056624/
  5. 5. Finding that balance is more difficult… http://www.flickr.com/photos/superfantastic/50088733/
  6. 6. as device diversity increases. http://www.flickr.com/photos/lyza/7382235106
  7. 7. Responsive web design offers us for a sensible way to deal with device diversity. http://www.flickr.com/photos/darrentunnicliff/4232232092/
  8. 8. And yet the one question I frequently ask myself is…
  9. 9. Can a one size fits all solution… http://www.flickr.com/photos/sldghmmr/6041481069
  10. 10. compete with a tailored experience? http://www.flickr.com/photos/helloturkeytoe/4932748746/
  11. 11. Important question from many perspectives:
  12. 12. Important question from many perspectives: Search engine optimization Context Advertising Performance
  13. 13. Search engines?
  14. 14. What about mobile context? http://www.flickr.com/photos/brunauto/5062644167/
  15. 15. 80% during misc downtime 76% while waiting in lines 62% while watching TV 69% for point of sale research http://www.flickr.com/photos/missmeng/5327470961
  16. 16. TMI: 39% use phone on the toilet.
  17. 17. Advertising? http://www.flickr.com/photos/ sh1mmer/2510487525
  18. 18. Performance?
  19. 19. http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf
  20. 20. Shopzilla improves load time 5 seconds http://velocityconf.com/velocity2009/public/schedule/detail/7709
  21. 21. http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
  22. 22. http://www.flickr.com/photos/wesbrowning/5316400258/
  23. 23. BBG: Before Boston Globe http://www.flickr.com/photos/69797234@N06/7203485148/
  24. 24. Media Queries Hide Problems Original Resized K Saved % Saved Holmes 34.7K 8.1K 26.6K 76.6% Watson 39.0K 8.4K 30.6K 78.4% Mycroft 30.5K 6.7K 23.8K 78.0% Moriarty 43.4K 8.2K 35.2K 81.1% Adler 26.0K 6.6K 19.4K 74.6% Winter 34.7K 7.8K 26.9K 77.5% Total 208.3K 45.8K 162.5K 78.0%
  25. 25. Crap, that’s not what I was trying to do. https://twitter.com/ldexterldesign/status/55229350299181057
  26. 26. What I meant to say: The way in which CSS media queries have been promoted for mobile hides tough problems and gives developers a false promise of a simple solution for designing for multiple screens.
  27. 27. The resounding answer from the community: Mobile First Responsive Web Design
  28. 28. Mobile First Responsive Web Design http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  29. 29. “Awesome. We’ll devote a chapter to Mobile First Responsive Web Design in our book.”
  30. 30. “Awesome. We’ll devote a chapter to Mobile First Responsive Web Design in our book.” Famous last words.
  31. 31. Where are the Mobile First RWDs? 106 sites from mediaqueri.es tested 9% 4% 25% 21% 4% 38% Mobile is Larger Same Size Less than 10% Savings 11 to 50% Savings 51% to 100% Savings Greater than 100% Savings http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/
  32. 32. Guy Podjarny repeated the experiment a year later. 347 sites from mediaqueri.es tested 3% 11% 86% Same size A bit smaller Much smaller A bit smaller = 50%-90% the size Much smaller = <50% the size http://www.slideshare.net/guypod/performance-implications-of-mobile-design
  33. 33. http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
  34. 34. Thankfully Guy took the tests further…
  35. 35. Big site, big waterfall 1600x1200 http://www.slideshare.net/guypod/performance-implications-of-mobile-design
  36. 36. Small site, big waterfall 320x480 http://www.slideshare.net/guypod/performance-implications-of-mobile-design
  37. 37. 1398 elements 1402 elements 3491 nodes 3485 nodes Simplicity not reflected in DOM 1600x1200 320x480 http://www.slideshare.net/guypod/performance-implications-of-mobile-design
  38. 38. http://www.flickr.com/photos/beautyredefined/2643858323/
  39. 39. http://www.flickr.com/photos/puuikibeach/3654517679
  40. 40. Most responsive web designs are…
  41. 41. Time to pen another fool’s gold post? http://www.flickr.com/photos/myklroventine/3400040943/
  42. 42. https://twitter.com/scottjehl/status/243025352069349377
  43. 43. 5 key techniques for responsible responsive design
  44. 44. #1 Build Mobile First Responsive Designs http://www.flickr.com/photos/auyongcheemeng/95769332/
  45. 45. Different than Mobile First Design Theory http://www.flickr.com/photos/localcelebrity/4831362933/
  46. 46. Mobile First Responsive Web Design http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  47. 47. Reorder media queries so cascade goes from small to large screens /* Wider viewports/higher resolutions (e.g. desktop) */ @media screen and (min-width:481px) { [Desktop layout rules here] M ove the mobile media query block } above the desktop media query. By doing this, we’re making S re su the cascading effect of CSfiris /* Mobile/lower-resolution devices */ @media screen and (max-width:480px) { st consistent with our mobile oach. [Mobile layout rules here] progressive enhancement appr } Keep basic styles outside of media queries.
  48. 48. The absence of support for media queries is in fact the first media query. —Bryan Rieger, Yiibu
  49. 49. Oh come on IE. No love? Because IE 8 and below don’t su media queries, IE isn’t getting t pport CSS rules that create columns. he
  50. 50. IE conditional comments <link rel="stylesheet" type="text/css" href="taps.css" /> <link rel="stylesheet" type="text/css" href="layout.css" media="all and (min-width: 481px)"> <!--[if (lt IE 9)&(!IEMobile)]> <link rel="stylesheet" type="text/css" href="layout.css" media="all" /> <![endif]--> The conditional comment repeats the line above it ensuring desktop IE sees our layout.css file.
  51. 51. IE conditional comments <link rel="stylesheet" type="text/css" href="taps.css" /> <link rel="stylesheet" type="text/css" href="layout.css" media="all and (min-width: 481px)"> <!--[if (lt IE 9)&(!IEMobile)]> <link rel="stylesheet" type="text/css" href="layout.css" media="all" /> <![endif]--> The conditional comment repeats the line above it ensuring desktop IE sees our layout.css file. or use Respond.js (a media query polyfill for IE)
  52. 52. #2 Keep CSS images in their place http://www.flickr.com/photos/lintmachine/2306383943/
  53. 53. Images with display:none are still downloaded K making it The taps.jpg file is 440.7 . the largest file on the page @media screen and (max-width:480px) { [Other CSS rules are here] .header {display:none;} }
  54. 54. Put CSS images inside media queries to prevent extra downloads @media screen and (min-width:481px){ .header { background:URL('images/taps.jpg') repeat-x; height: 300px; } }
  55. 55. http://timkadlec.com/2012/04/media-query-asset-downloading-results/
  56. 56. #3 Conditionally load JS based on screen size and capabilities http://www.flickr.com/photos/lyza/7382255242/
  57. 57. Hiding content with display:none does not prevent it from downloading. Look inside ontap.html to find this code. <iframe id="map" width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe> This single iframe causes 47 files to be downloaded! Extremely long URL abbreviated taps.css @media screen and (max-width:480px) { . les . There are many more ru . in the css file. #map {display:none;} } The iframe has an id of map. This rule hides the Google Maps iframe by setting the display to none.
  58. 58. https://github.com/paulirish/matchMedia.js
  59. 59. http://adactio.com/journal/5429/
  60. 60. AJAX Include Pattern <a href="articles/latest/" data-append="articles/latest/fragment" data-media="(min-width: 30em)"> Latest Articles </a> https://github.com/filamentgroup/Ajax-Include-Pattern/
  61. 61. #4 Deliver different size <IMG>s at different screen sizes http://www.flickr.com/photos/kk/230544325/
  62. 62. One SRC to rule all images On eer labels on thetag There are 16 b hat use an img Despite the need for multiple versions of this image depending on the Tap Now page tr the Bensons Bubbler. screen size, HTML only allows one value for the src. like this one fo <img src="brews_images/bensons_bubbler.jpg" alt="Bensons Bubbler">
  63. 63. Things are still moving forward on a standards- based approach for responsive images. http://www.flickr.com/photos/johnlamb/2576062549/
  64. 64. http://responsiveimages.org/
  65. 65. Add more on current status of spec.
  66. 66. Add more on the questions we still need to answer.
  67. 67. Picturefill JavaScript Library <div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <div data-src="small.jpg"></div> <div data-src="medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="large.jpg" data-media="(min-width: 800px)"></div> <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div> <!-- Fallback content for non-JS browsers. --> <noscript> <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> </noscript> </div> https://github.com/scottjehl/picturefill
  68. 68. Regardless of the img technique you choose, Plan to deprecate it when standards catch up with responsive images.
  69. 69. #5 Handle high-density images carefully
  70. 70. Downloads both standard and retina images Apple.com as an anti-pattern The total size of the page goes from 502.90K to 2.13MB when the retina versions of images are downloaded. http://blog.cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads/
  71. 71. If possible, use CSS for now <style> #main { background-size: 400px 250px; } @media screen and (-webkit-device-pixel-ratio: 1) { /* Image for normal displays. */ #main { background-image: url(dog.jpg); } } @media screen and (-webkit-min-device-pixel-ratio: 2) { /* Image for high resolution displays. */ #main { background-image: (dog-hi-res.jpg); } } </style>
  72. 72. CSS image-set new proposed spec div.dog { background-image: -webkit-image-set(url(dog.jpg) 1x, url(dog-hi-res.jpg) 2x); }
  73. 73. Picturefill User Preference Branch https://github.com/scottjehl/picturefill/tree/user-prefs
  74. 74. Large JPEGs with Low Quality Settings? http://blog.netvlies.nl/design-interactie/retina-revolution/
  75. 75. SOUTH L TIA STREET DE EN LU SS INC EC AX AJ https://github.com/filamentgroup/Southstreet
  76. 76. It’s two years later. Let’s revisit the my original question.
  77. 77. Can a one size fits all solution… http://www.flickr.com/photos/theyoungthousands/4025421438
  78. 78. compete with a tailored experience? http://www.flickr.com/photos/fronx/2862975043
  79. 79. Or will we always end up with something that is too big? http://www.flickr.com/photos/haddadi/5971508861
  80. 80. Unlikely responsive design will ever be as fast as something crafted specifically for a device. http://www.flickr.com/photos/quarenta/3256329577
  81. 81. But web design is a balancing act. http://www.flickr.com/photos/kalexanderson/6266452817
  82. 82. And performance is just one factor.
  83. 83. For most projects, responsive design can be fast enough to make sense… Flickr: Uploaded February 11, 2007 by hawridger
  84. 84. if we do the extra work to make mobile first responsive designs.
  85. 85. Thank You! Special thanks to Scott Jehl, Guy Podjarny, and all of the Flickr users sharing under creative commons. Jason Grigsby • @grigs jason@cloudfour.com Slides: bit.ly/mf-rwd http://www.flickr.com/photos/sualk61/4083223760/

×