Mobile First Responsive Design — Respond 2014 Sydney

Dac45089aeda3bca56193072601a49d4?s=47 Jason Grigsby
February 05, 2014

Mobile First Responsive Design — Respond 2014 Sydney

Presented at Web Directions Respond 2014 in Sydney

Dac45089aeda3bca56193072601a49d4?s=128

Jason Grigsby

February 05, 2014
Tweet

Transcript

  1. Mobile First Responsive Design Jason Grigsby • @grigs • cloudfour.com

  2. Follow along at @grigs_talks http://bit.ly/grigs-respond2014

  3. The web has always been a balancing act… p://www.flickr.com/photos/classblog/5136926303

  4. with many competing priorities. http://www.flickr.com/photos/tudor/4324056624/

  5. Finding that balance is more difficult… http://www.flickr.com/photos/superfantastic/50088733/

  6. http://www.flickr.com/photos/lyza/7382235106 as device diversity increases.

  7. http://www.flickr.com/photos/darrentunnicliff/4232232092/ Responsive web design offers us for a sensible way

    to deal with device diversity.
  8. And yet the one question I frequently ask myself is…

  9. Can a one size fits all solution… http://www.flickr.com/photos/sldghmmr/6041481069

  10. compete with a tailored experience? http://www.flickr.com/photos/helloturkeytoe/4932748746/

  11. Context Advertising Performance Important question from many perspectives: Search engine

    optimization
  12. None
  13. PERFORMANCE

  14. http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf People demand fast web sites.

  15. Log In Subscribe Basket Contact Us i am looking for...

    67% of consumers cite slow websites as the main cause of basket abandonment Daily Pulse Newsletter Get our free Daily Pulse Newsletter to keep informed about the latest news and insights in Digital Marketing. Register for our free Daily Pulse ADVERTISE HERE » by David Moth 06 December 2012 11:40 8 comments Print Tweet Tweet 236 3 Everyone hates slow loading websites, and a new survey highlights just how damaging a slow site can be to the user experience. The study by Brand Perfect found that two thirds of UK consumers (67%) cite slow loading times as the main reason they would abandon an online purchase. It’s a topic we’ve looked at in more detail in our post 'Site speed: case studies, tips and tools for improving your conversion rate', with stats showing that slow loading websites are losing businesses up to £1.73bn a year. Privacy and cookie policy Home / Blog Subscribe Reports Training Events Jobs Blog More Browse by topic Like 14 Share Share 20 Slow sites mean real dollars are lost.
  16. Top ecommerce sites are 22% slower than last year http://www.webperformancetoday.com/2013/03/27/top-ecommerce-sites-are-slower-than-they-were-last-year/

  17. http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf Mobile users don’t care that their network is slow.

  18. Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071

  19. Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071 Many ways to navigate desktop

    web sites on mobile.
  20. http://www.flickr.com/photos/stephenjohnbryde/384095768/ There are no gestures that can make a web

    site faster.
  21. http://www.flickr.com/photos/nathaninsandiego/4829858186/

  22. http://www.flickr.com/photos/wesbrowning/5316400258/

  23. http://www.flickr.com/photos/69797234@N06/7203485148/ BBG: Before Boston Globe

  24. None
  25. None
  26. None
  27. None
  28. None
  29. 34.7K 8.1K 26.6K 76.6% 39.0K 8.4K 30.6K 78.4% 30.5K 6.7K

    23.8K 78.0% Original Resized K Saved % Saved 43.4K 8.2K 35.2K 81.1% 26.0K 6.6K 19.4K 74.6% 34.7K 7.8K 26.9K 77.5% Original Resized K Saved % Saved
  30. 34.7K 8.1K 26.6K 76.6% 39.0K 8.4K 30.6K 78.4% 30.5K 6.7K

    23.8K 78.0% Original Resized K Saved % Saved 43.4K 8.2K 35.2K 81.1% 26.0K 6.6K 19.4K 74.6% 34.7K 7.8K 26.9K 77.5% Original Resized K Saved % Saved
  31. 34.7K 8.1K 26.6K 76.6% 39.0K 8.4K 30.6K 78.4% 30.5K 6.7K

    23.8K 78.0% Original Resized K Saved % Saved 43.4K 8.2K 35.2K 81.1% 26.0K 6.6K 19.4K 74.6% 34.7K 7.8K 26.9K 77.5% Original Resized K Saved % Saved Original Resized K Saved % Saved Total 208.3K 45.8K 162.5K 78.0%
  32. The resounding answer from the community: Mobile First Responsive Web

    Design
  33. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/ Mobile First Responsive Web Design

  34. “Awesome. We’ll devote a chapter to Mobile First Responsive Web

    Design in our book.”
  35. “Awesome. We’ll devote a chapter to Mobile First Responsive Web

    Design in our book.” Famous last words.
  36. 9% 4% 21% 38% 4% 25% Mobile is Larger Same

    Size Less than 10% Savings 11 to 50% Savings 51% to 100% Savings Greater than 100% Savings Where are the Mobile First RWDs? 106 sites from mediaqueri.es tested http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/
  37. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/ Guy Podjarny repeated the experiment 2013: 476 sites from

    mediaqueri.es tested
  38. http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/

  39. None
  40. None
  41. None
  42. None
  43. http://www.flickr.com/photos/beautyredefined/2643858323/

  44. http://www.flickr.com/photos/puuikibeach/3654517679

  45. Most responsive web designs are…

  46. http://www.flickr.com/photos/myklroventine/3400040943/ Time to pen another fool’s gold post?

  47. None
  48. None
  49. Being Responsive from a layout perspective should not preclude us

    from being responsive from a performance and interaction perspective. —Scott Jehl “ https://twitter.com/scottjehl/status/243025352069349377
  50. 5key techniques for responsible responsive design

  51. http://www.flickr.com/photos/auyongcheemeng/95769332/ #1 Build Mobile First Responsive Designs

  52. http://www.flickr.com/photos/localcelebrity/4831362933/ Different than Mobile First Design Theory

  53. None
  54. Mobile First Design Principles

  55. Mobile First Design Principles Mobile First Responsive Design

  56. Mobile First Design Principles Mobile First Responsive Design * FIRST

    Content First Structure First Performance First API First Command Line First
  57. Mobile First Design Principles Mobile First Responsive Design * FIRST

    Content First Structure First Performance First API First Command Line First Coffee First
  58. http://www.flickr.com/photos/gumption/3639682201/

  59. But we’ve already got a desktop design and we can’t

    start over.
  60. How do I make this responsive?

  61. How do I make this responsive?

  62. How do I make this responsive?

  63. http://www.flickr.com/photos/ancphotos_/6728574731

  64. Ok, let’s start from a clean slate http://www.flickr.com/photos/salendron/5569020488/

  65. None
  66. What would the mobile version look like?

  67. What would the mobile version look like?

  68. What would the mobile version look like?

  69. How does that map to desktop design?

  70. How does that map to desktop design?

  71. How does that map to desktop design?

  72. How does that map to desktop design?

  73. How does that map to desktop design?

  74. How does that map to desktop design?

  75. How does that map to desktop design?

  76. How does that map to desktop design?

  77. How does that map to desktop design?

  78. How does that map to desktop design?

  79. How does that map to desktop design?

  80. How does that map to desktop design?

  81. How does that map to desktop design?

  82. How does that map to desktop design?

  83. Can this desktop version be better using what we’ve learned

    from the mobile version?
  84. None
  85. This is why Mobile First thinking is so powerful even

    on existing projects.
  86. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/ Mobile First Responsive Web Design is a technical approach

    for responsive designs.
  87. /* Wider viewports/higher resolutions (e.g. desktop) */ @media screen and

    (min-width:481px) { [Desktop layout rules here] } /* Mobile/lower-resolution devices */ @media screen and (max-width:480px) { [Mobile layout rules here] } Move the mobile media query block above the desktop media query. By doing this, we’re making sure the cascading effect of CSS is consistent with our mobile first progressive enhancement approach. Reorder media queries so cascade goes from small to large screens Keep basic styles outside of media queries.
  88. None
  89. The absence of support for media queries is in fact

    the first media query. —Bryan Rieger, Yiibu “
  90. None
  91. IE8 and below don’t support media queries.

  92. None
  93. None
  94. Desktop First Responsive Web Design = Desktop Fallback Mobile First

    Responsive Web Design = Mobile Fallback What do you see if your browser doesn’t support media queries?
  95. <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. IE conditional comments
  96. <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. IE conditional comments or use Respond.js (a media query polyfill for IE)
  97. http://www.flickr.com/photos/lintmachine/2306383943/ #2 Keep CSS images in their place

  98. The taps.jpg file is 440.7K making it the largest file

    on the page. @media screen and (max-width:480px) { [Other CSS rules are here] .header {display:none;} } Images with display:none are still downloaded
  99. http://timkadlec.com/2012/04/media-query-asset-downloading-results/

  100. <div  id="test5"></div> @media  all  and  (min-­‐width:  601px)  {    

       #test5  {                background-­‐ image:url('images/test5-­‐ desktop.png');                width:200px;                height:75px;        } } @media  all  and  (max-­‐width:  600px)  {        #test5  {                background-­‐ image:url('images/test5-­‐ mobile.png');                width:200px;                height:75px;        } } Images scoped within media queries http://timkadlec.com/2012/04/media-query-asset-downloading-results/
  101. http://timkadlec.com/2012/04/media-query-asset-downloading-results/ <div  id="test3">        <div></div> </div> #test3  div

     {        background-­‐image:url('images/ test3.png');        width:200px;        height:75px; } @media  all  and  (max-­‐width:  600px)   {        #test3  {                display:none;        } } display:none on parent element
  102. http://timkadlec.com/2012/04/media-query-asset-downloading-results/ <div  id="test4"></div> #test4  {        background-­‐image:url('images/ test4-­‐desktop.png');

           width:200px;        height:75px; } @media  all  and  (max-­‐width:  600px)  {        #test4  {                background-­‐image:url('images/ test4-­‐mobile.png');        } } Image override with a media query
  103. http://www.flickr.com/photos/lyza/7382255242/ #3 Conditionally load JS based on screen size and

    capabilities
  104. @media screen and (max-width:480px) { . . . #map {display:none;}

    } There are many more rules in the css file. The iframe has an id of map. This rule hides the Google Maps iframe by setting the display to none. Hiding content with display:none does not prevent it from downloading. <iframe id="map" width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe> Extremely long URL abbreviated This single iframe causes 47 files to be downloaded!
  105. https://github.com/paulirish/matchMedia.js In JS, use matchMedia() or a polyfill for it

    to test a media query
  106. <a  href="articles/latest/"            data-­‐append="articles/latest/fragment"    

           data-­‐media="(min-­‐width:  30em)">          Latest  Articles </a> AJAX Include Pattern https://github.com/filamentgroup/Ajax-Include-Pattern/ Use AJAX to bring more content into the page as the viewport width gets bigger
  107. Behavioral Breakpoints

  108. http://www.flickr.com/photos/kk/230544325/ #4 Deliver different size <IMG>s at different screen sizes

  109. One SRC to rule all images <img src="brews_images/bensons_bubbler.jpg" alt="Bensons Bubbler">

    There are 16 beer labels on the On Tap Now page that use an img tag like this one for the Bensons Bubbler. Despite the need for multiple versions of this image depending on the screen size, HTML only allows one value for the src.
  110. Two most common use cases

  111. https://www.flickr.com/photos/whitehouse/8491445521

  112. https://www.flickr.com/photos/whitehouse/8491445521 Resolution Switching Includes high-density (retina) images.

  113. http://www.flickr.com/photos/barackobamadotcom/5795228030/

  114. Art direction http://www.flickr.com/photos/barackobamadotcom/5795228030/

  115. http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction

  116. http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction

  117. http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction

  118. http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction

  119. http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction

  120. Not simply cropping

  121. Art direction: Images with text Sign In Account Get Email

    Español Shopping Bag Features New Arrivals Show Off Tees Backpacks Tech Toys 2/$30 & 2/$40 PINK Favorites Spin the Panty Wheel Tops All Tops Hoodies & Crews Tees & Tanks Bottoms All Bottoms Sweats Shorts Yoga PINK Loves Yoga Panties 5/$26 Styles 3/$33 Styles Shop by Style Bras All Bras Bandeaus & Bralettes 2/$42 Wear Everywhere Bras Bras 101 Swim Search
  122. No good solutions

  123. Things are still moving forward on a standards- based approach

    for responsive images. http://www.flickr.com/photos/johnlamb/2576062549/
  124. New proposed standards <picture> srcset src-n Too early to use

    any of them
  125. None
  126. <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> Picturefill JavaScript Library https://github.com/scottjehl/picturefill
  127. #5 Handle high-density images carefully

  128. A single image on multiple screens

  129. Image Resolution 0 500000 1000000 1500000 2000000 Blackberry Curve iPhone

    iPhone Retina Macbook Macbook Retina 1861632 465408 519360 130080 57920 320x181 480x271 960x541 909x512 1818x1024
  130. Image Resolution 3,214% bigger 0 500000 1000000 1500000 2000000 Blackberry

    Curve iPhone iPhone Retina Macbook Macbook Retina 1861632 465408 519360 130080 57920 320x181 480x271 960x541 909x512 1818x1024
  131. @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); } } If possible, use CSS for now
  132. None
  133. Picturefill User Preference Branch https://github.com/scottjehl/picturefill/tree/user-prefs

  134. Compressive images? http://blog.netvlies.nl/design-interactie/retina-revolution/

  135. http://www.flickr.com/photos/fuzzylittlemanpeach/4633972431/ If I could dream up my ideal solution for

    images…
  136. Eights guidelines and one immutable rule

  137. #1 Use vector-based images or font icons whenever you can

  138. Topics: accessibility css icon design javascript Bulletproof Accessible Icon Fonts

    Posted by Zach on 01/13/2014 Care must be taken when implementing icon fonts to ensure a great experience for all users. What happens when your font doesn’t load? What happens when @font-face isn’t supported in the browser? We’ll show you how to implement bulletproof font icons. In our never-ending quest to build sites more efficiently and effectively for our clients, the lowly font has been proposed many times as an option to easily implement vector icons. While we typically prefer (and recommend) using SVG for vector icons for some of the reasons Ian Feather of Lonelyplanet.com has documented in his blog post, we sometimes collaborate with other teams who have already implemented icon fonts. For those cases we decided to research how to best implement icon fonts in a universally accessible way. What we do What we've done What we're thinking Who we are
  139. IcoMoon App Premium Icons Font CDN Browse 3800+ Free Vector

    Icons Import Your Own Vectors to Make Fonts Generate Custom & Crisp Icon Fonts Generate CSS Sprites with any size or color Basic Glyph Editing 1200+ Vector Icons & Counting Handcrafted on a 16×16 grid Several Different Formats Optimized for Icon Fonts Free Updates Serve Custom-Built Fonts Powered by Amazon Web Services Easily Update Your Icon Fonts Production (Cached) Links Starting at $1.60/Month IcoMoon IcoMoon Custom Built and Crisp Icon Fonts, Done Right Home App Icon Packs Font CDN Demo Documentation Blog About
  140. /' // . // |\//7 /' " \ . |

    ( \ _ _ - -_ | '._ ' _ __ _- \_ _/ \'-' // \\_/ \\ | | || | / / | \ / |VV ||--\__________/-||-/| || || || || { } { } { }{ } . . Drag & Drop ur SVGs on the Grumpicon plz. What Is This Issues? Grumpicon.com based on Grunticon
  141. None
  142. #2 Encourage people to upload the highest quality source possible

  143. #3 Provide an automatic image resizing and compression service

  144. Example from Sencha IO SRC. Define height, width or both.

    <img src="http://src.sencha.io/320/http:// sencha.com/files/u.jpg" alt="My constrained image" /> #4 Images can be resized to any size with URL parameters
  145. None
  146. “Save for the Web” should be a thing of the

    past. —@adamdbradley “
  147. <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> #5 Provide automated output of PictureFill or alternative
  148. { "source":"/source.jpg", "breakpoints":  [ {  "max-­‐width":"30em","pixel-­‐density":1,"width":360px},   {  "max-­‐width":"30em","pixel-­‐density":2,"width":720px}, {

     "max-­‐width":"30em","pixel-­‐density":1,"width":800px}, {  "max-­‐width":"30em","pixel-­‐density":2,"width":1600px}, {  "pixel-­‐density":1,"width":800px}, {  "pixel-­‐density":2,"width":1600px}, ] } templates contain breakpoint information Responsive Images Markup Function Responsive Images Markup Function PictureFill  Markup Sample syntax. Don’t get hung up on details. Markup for all images can be changed in one spot.
  149. #6 Provide a way to override resized images for art

    direction needs
  150. jpegtran or jpegoptim OptiPNG or PNGOUT far future expires headers

    learn from mod_pagespeed or use it #7 Integrate image compression best practices
  151. The average WebP file size is 25% - 34% smaller

    compared to JPEG file size. WebP compresses 34% better than libpng, and 26% better than pngout for loseless images. #8 Bonus: Detect support for WebP image format and use it
  152. #! The only rule for your responsive images implementation.

  153. Plan for the fact that it will be deprecated. Make

    it easy to change. #! The only rule for your responsive images implementation.
  154. It’s three years later. Let’s revisit the my original question.

  155. Can a one size fits all solution… http://www.flickr.com/photos/theyoungthousands/4025421438

  156. compete with a tailored experience? http://www.flickr.com/photos/fronx/2862975043

  157. http://www.flickr.com/photos/haddadi/5971508861 Or will it always be TOO BIG?

  158. Unlikely responsive design will ever be as fast as something

    crafted specifically for a device. http://www.flickr.com/photos/quarenta/3256329577
  159. But web design is a balancing act. http://www.flickr.com/photos/kalexanderson/6266452817

  160. And performance is just one factor.

  161. Flickr: Uploaded February 11, 2007 by hawridger For most projects,

    responsive design can be fast enough to make sense…
  162. if we do the extra work to make mobile first

    responsive designs.
  163. Thank You! Special thanks to Scott Jehl, Guy Podjarny, and

    all of the Flickr users sharing under creative commons.