Mobile First Responsive Design

Mobile First Responsive Design

Mobile first and responsive web design aren’t simply two great tastes that go great together—they represent far more than that. Mobile first responsive web design is the responsible way to build responsive design—the best way to create something that is both responsive from a layout and a performance perspective. But if mobile first is the right way to approach responsive design, then why are so few people doing it? Dig into why mobile first responsive design matters, and the techniques needed to make it work.

Dac45089aeda3bca56193072601a49d4?s=128

Jason Grigsby

October 27, 2014
Tweet

Transcript

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

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

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

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

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

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

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

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

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

  10. Important question from many perspectives:

  11. http://www.flickr.com/photos/andercismo/2349098787 Search engine optimization

  12. None
  13. None
  14. http://www.flickr.com/photos/brunauto/5062644167/

  15. http://www.flickr.com/photos/brunauto/5062644167/ Mobile Context

  16. 80% during misc downtime 76% while waiting in lines 86%

    while watching TV 69% for point of sale research http://www.flickr.com/photos/carbonnyc/5140154965
  17. TMI

  18. 39% use phone on toilet

  19. Advertising http://www.flickr.com/photos/powerbooktrance/267059283

  20. None
  21. None
  22. PERFORMANCE

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

  24. 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.
  25. 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/

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

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

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

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

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

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

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

  33. None
  34. None
  35. None
  36. None
  37. None
  38. 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
  39. 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
  40. 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%
  41. The resounding answer from the community: Mobile First Responsive Web

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

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

    Design in our book.” Famous last words.
  44. 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/
  45. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/ Guy Podjarny repeated the experiment 2013: 476 sites from

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

  47. None
  48. None
  49. None
  50. None
  51. http://www.flickr.com/photos/beautyredefined/2643858323/

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

  53. Most responsive web designs are…

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

  55. None
  56. None
  57. 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
  58. 5key techniques for responsible responsive design

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

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

  61. None
  62. Mobile First Design Principles Mobile First Responsive Design Forwarded by

    Luke Wroblewski Technical Approach for Responsive Design
  63. None
  64. *

  65. *FIRST Content First Structure First Performance First API First Command

    Line First
  66. http://www.flickr.com/photos/leah8691/2184863624/

  67. COFFEE FIRST! http://www.flickr.com/photos/leah8691/2184863624/

  68. http://www.flickr.com/photos/gumption/3639682201/

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

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

  71. Many say responsive design won’t work for apps https://twitter.com/freediverx/status/354698695041744896

  72. Responsive design for apps is inevitable. http://blog.cloudfour.com/responsive-design-for-apps-part-1/

  73. Lines between device classes are blurring Model Type Size Size

    Display Resolution Resolution Viewport Viewport W H W H W H Samsung Galaxy Note 2 Phone 3.17” 5.95” 5.5” 720 1280 360 640 Motorola RAZR HD Phone 2.67” 5.19” 4.7” 720 1280 360 519 Motorola Atrix HD Phone 2.75” 5.26” 4.5” 720 1280 540 812 HTC Droid DNA Phone 2.78” 5.5” 5” 1080 1920 360 640 Nexus 7 Tablet 4.72” 7.81” 7” 800 1280 600 793 Kindle Fire Tablet 4.72” 7.44” 7” 600 1024 600 819 Kindle Fire HD Tablet 5.4” 7.6” 7” 800 1280 533 731
  74. 640 px 600 px 519 px 640 px 622 px

    533 px 812 px Which are phones and which are tablets?
  75. iPad, iPad Mini, iPad Air x 480 320 x 568

    320 x 667 375 x 736 414 x 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  76. iPad, iPad Mini, iPad Air 480 320 568 320 667

    375 736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  77. iPad, iPad Mini, iPad Air 480 320 568 320 667

    375 736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  78. iPad, iPad Mini, iPad Air 480 320 568 320 667

    375 736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  79. iPad, iPad Mini, iPad Air 480 320 568 320 667

    375 736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  80. iPad, iPad Mini, iPad Air 480 320 568 320 667

    375 736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  81. iPad, iPad Mini, iPad Air 480 320 568 320 667

    375 736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  82. iPad, iPad Mini, iPad Air 480 320 568 667 375

    736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  83. iPad, iPad Mini, iPad Air 480 320 568 667 375

    736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  84. iPad, iPad Mini, iPad Air 480 320 568 667 375

    736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  85. iPad, iPad Mini, iPad Air 480 320 568 667 375

    736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  86. iPad, iPad Mini, iPad Air 480 320 568 667 375

    736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  87. iPad, iPad Mini, iPad Air 480 320 568 667 375

    736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  88. iPad, iPad Mini, iPad Air 480 320 568 667 375

    736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  89. iPad, iPad Mini, iPad Air 480 320 568 667 375

    736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  90. iPad, iPad Mini, iPad Air 480 320 568 667 375

    736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  91. iPad, iPad Mini, iPad Air 480 320 568 667 375

    736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  92. iPad, iPad Mini, iPad Air 480 320 568 667 375

    736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  93. iPad, iPad Mini, iPad Air 480 320 568 667 375

    736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  94. iPad, iPad Mini, iPad Air 480 320 568 667 375

    736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  95. iPad, iPad Mini, iPad Air 480 320 568 667 375

    736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  96. iPad, iPad Mini, iPad Air 480 320 568 667 375

    736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.
  97. iPad, iPad Mini, iPad Air 480 320 568 667 375

    736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum. The Magic 32 pixels
  98. https://twitter.com/_munter_/status/511770590123143168

  99. http://www.flickr.com/photos/geatchy/8489505999

  100. How do I make this responsive?

  101. How do I make this responsive?

  102. How do I make this responsive?

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

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

  105. None
  106. What would the mobile version look like?

  107. What would the mobile version look like?

  108. What would the mobile version look like?

  109. How does that map to desktop design?

  110. How does that map to desktop design?

  111. How does that map to desktop design?

  112. How does that map to desktop design?

  113. How does that map to desktop design?

  114. How does that map to desktop design?

  115. How does that map to desktop design?

  116. How does that map to desktop design?

  117. How does that map to desktop design?

  118. How does that map to desktop design?

  119. How does that map to desktop design?

  120. How does that map to desktop design?

  121. How does that map to desktop design?

  122. How does that map to desktop design?

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

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

    on existing projects.
  126. Frequent concern for this project: How something will scale to

    desktop.
  127. Frequent concern for this project: How something will scale to

    desktop. Actual times this has been a problem when mobile has been solid already: 0
  128. None
  129. Small screen assets Large screen assets Progressive enhancement based on

    screen size Mobile First Responsive Web Design is a technical approach for responsive designs.
  130. Mobile First Responsive Design Starts Simple: Reorder media queries so

    cascade goes from small to large screens
  131. None
  132. /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules

    here] /* Desktop layout styles */ [Desktop rules here] /* Mobile (small screen) styles */ @media screen and (max-width: 480px) { [Mobile layout rules here] } Typical Desktop First Responsive CSS Likely the original CSS. Added for mobile.
  133. /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules

    here] /* Desktop layout styles */ [Desktop rules here] /* Mobile (small screen) styles */ @media screen and (max-width: 480px) { [Mobile layout rules here] }
  134. /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules

    here] /* Desktop layout styles */ [Desktop rules here] /* Mobile (small screen) styles */ @media screen and (max-width: 480px) { [Mobile layout rules here] }
  135. /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules

    here] /* Desktop layout styles */ [Desktop rules here] /* Mobile (small screen) styles */ @media screen and (max-width: 480px) { [Mobile layout rules here] } Reorder CSS to Make it Mobile First
  136. /* Mobile (small screen) styles */ @media screen and (max-width:

    480px) { [Mobile layout rules here] } /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules here] /* Desktop layout styles */ [Desktop rules here] Reorder CSS to Make it Mobile First
  137. /* Mobile (small screen) styles */ @media screen and (max-width:

    480px) { [Mobile layout rules here] } /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules here] /* Desktop layout styles */ [Desktop rules here]
  138. /* Mobile (small screen) styles */ @media screen and (max-width:

    480px) { [Mobile layout rules here] } /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules here] /* Desktop layout styles */ [Desktop rules here]
  139. /* Mobile (small screen) styles */ @media screen and (max-width:

    480px) { [Mobile layout rules here] } /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules here] /* Desktop layout styles */ Add wide screen media query [Desktop rules here]
  140. /* Desktop layout styles */ /* Mobile (small screen) styles

    */ @media screen and (max-width: 480px) { [Mobile layout rules here] } /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules here] Add wide screen media query [Desktop rules here]
  141. /* Desktop layout styles */ /* Mobile (small screen) styles

    */ @media screen and (max-width: 480px) { [Mobile layout rules here] } /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules here] Add wide screen media query [Desktop rules here] @media screen and (min-width: 481px) {
  142. /* Desktop layout styles */ /* Mobile (small screen) styles

    */ @media screen and (max-width: 480px) { [Mobile layout rules here] } /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules here] Add wide screen media query [Desktop rules here] @media screen and (min-width: 481px) {
  143. /* Desktop layout styles */ /* Mobile (small screen) styles

    */ @media screen and (max-width: 480px) { [Mobile layout rules here] } /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules here] Add wide screen media query [Desktop rules here] @media screen and (min-width: 481px) { } The cascade is working for us: small to large.
  144. /* Desktop layout styles */ /* Mobile (small screen) styles

    */ @media screen and (max-width: 480px) { [Mobile layout rules here] } /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules here] [Desktop rules here] @media screen and (min-width: 481px) { }
  145. /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules

    here] /* Desktop layout styles */ /* Mobile (small screen) styles */ @media screen and (max-width: 480px) { [Mobile layout rules here] } [Desktop rules here] @media screen and (min-width: 481px) { }
  146. /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules

    here] /* Desktop layout styles */ /* Mobile (small screen) styles */ @media screen and (max-width: 480px) { [Mobile layout rules here] } [Desktop rules here] @media screen and (min-width: 481px) { } /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules here] Important to keep basic styles outside of media queries.
  147. None
  148. The absence of support for media queries is in fact

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

  152. None
  153. None
  154. Fallback for browsers w/o media queries

  155. Fallback for browsers w/o media queries

  156. Mobile First RWD = Fallback for browsers w/o media queries

    Mobile Fallback (More accurately, a baseline fallback)
  157. None
  158. None
  159. IE conditional comments <link rel="stylesheet" type="text/css" href="styles.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]-->
  160. IE conditional comments <link rel="stylesheet" type="text/css" href="styles.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]--> or use Respond.js (a media query polyfill for IE)
  161. http://www.flickr.com/photos/lintmachine/2306383943/ #2 Keep CSS images in their place

  162. None
  163. None
  164. None
  165. None
  166. None
  167. None
  168. @media screen and (max-width: 550px) { #content .homepage_background { display:

    none; } }
  169. @media screen and (max-width: 550px) { #content .homepage_background { display:

    none; } } Images with display:none are still downloaded
  170. @media screen and (max-width: 550px) { #content .homepage_background { display:

    none; } } Images with display:none are still downloaded downloaded and never displayed! 185K
  171. http://timkadlec.com/2012/04/media-query-asset-downloading-results/

  172. http://timkadlec.com/2012/04/media-query-asset-downloading-results/

  173. <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; } } #1: Images scoped within media queries http://timkadlec.com/2012/04/media-query-asset-downloading-results/ Only one rule can apply at any time.
  174. 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; } } #2: display:none on parent element
  175. 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; } } #2: display:none on parent element Why have extra markup in the DOM?
  176. 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'); } } #3: Image override with a media query
  177. 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'); } } #3: Image override with a media query
  178. http://dev.w3.org/csswg/css-images-3/#image-set-notation http://blog.cloudfour.com/the-forgotten-responsive-images-spec-image-set/ background-image: image-set( "foo.png" 1x, "foo-2x.png" 2x, "foo-print.png" 600dpi

    ); The forgotten responsive image solution: image-set()
  179. http://dev.w3.org/csswg/css-images-3/#image-set-notation http://blog.cloudfour.com/the-forgotten-responsive-images-spec-image-set/ background-image: image-set( "foo.png" 1x, "foo-2x.png" 2x, "foo-print.png" 600dpi

    ); The forgotten responsive image solution: image-set() Important for resolution switching use cases
  180. VOTE image-set()

  181. http://www.flickr.com/photos/lyza/7382255242/ #3 Conditionally load JS based on screen size and

    capabilities
  182. None
  183. None
  184. None
  185. None
  186. None
  187. None
  188. <div id="map-holder"> <div id="map"></div> </div>

  189. <div id="map-holder"> <div id="map"></div> </div> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js…"> </script> <script>

    [Maps JavaScript here] </script>
  190. <div id="map-holder"> <div id="map"></div> </div> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js…"> </script> <script>

    [Maps JavaScript here] </script> #map-holder { display: none; }
  191. <div id="map-holder"> <div id="map"></div> </div> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js…"> </script> <script>

    [Maps JavaScript here] </script>
  192. <div id="map-holder"> <div id="map"></div> </div> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js…"> </script> <script>

    [Maps JavaScript here] </script>
  193. <div id="map-holder"> <div id="map"></div> </div> @media all and (min-width: 768px)

    { #map-holder, #map-logo { display: block; } } <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js…"> </script> <script> [Maps JavaScript here] </script>
  194. <div id="map-holder"> <div id="map"></div> </div> @media all and (min-width: 768px)

    { #map-holder, #map-logo { display: block; } } <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js…"> </script> <script> [Maps JavaScript here] </script>
  195. <div id="map-holder"> <div id="map"></div> </div> @media all and (min-width: 768px)

    { #map-holder, #map-logo { display: block; } } <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js…"> </script> <script> [Maps JavaScript here] </script> Hiding content with display:none does not prevent it from downloading.
  196. None
  197. if (matchMedia('only screen and (max-width: 480px)').matches) { // small-screen related

    dom scripting } Use matchMedia() JS to test media query matchMedia() polyfill for older browsers: https://github.com/paulirish/matchMedia.js
  198. None
  199. <h2 data-after="demo-content/links.html" data-media="(min-width: 40em)"> <a href="demo-content/links.html"> Related External Links </a>

    </h2> AJAX Include Pattern https://github.com/filamentgroup/Ajax-Include-Pattern/
  200. None
  201. Behavioral Breakpoints

  202. Behavioral Breakpoints

  203. Behavioral Breakpoints

  204. Behavioral Breakpoints <div id="menu-trigger">Menu</div>

  205. Behavioral Breakpoints <div id="menu-trigger">Menu</div> @media screen and (min-width: 40em) {

    #menu-trigger { display : none; } }
  206. Behavioral Breakpoints <div id="menu-trigger">Menu</div> @media screen and (min-width: 40em) {

    #menu-trigger { display : none; } } switch (display) { case 'block': menu.on(); break; case 'none': menu.off(); break; }
  207. Behavioral Breakpoints <div id="menu-trigger">Menu</div> @media screen and (min-width: 40em) {

    #menu-trigger { display : none; } } switch (display) { case 'block': menu.on(); break; case 'none': menu.off(); break; }
  208. Behavioral Breakpoints <div id="menu-trigger">Menu</div> @media screen and (min-width: 40em) {

    #menu-trigger { display : none; } } switch (display) { case 'block': menu.on(); break; case 'none': menu.off(); break; } Breakpoints only in your CSS. Not repeated in JavaScript. http://cloudfour.github.io/offCanvasMenu/ http://blog.cloudfour.com/behavioral-breakpoints/
  209. http://www.flickr.com/photos/kk/230544325/ #4 Deliver different size <IMG>s at different screen sizes

  210. One SRC to rule all IMGs http://www.flickr.com/photos/vermininc/3182396114/

  211. Two most common use cases

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

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

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

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

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

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

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

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

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

  221. Not simply cropping

  222. 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
  223. No good solutions

  224. The standards process is slow moving but… http://www.flickr.com/photos/johnlamb/2576062549/

  225. picture specification

  226. <picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 18em)" srcset="med.jpg"> <img

    src="small.jpg" alt="The president giving an award."> </picture> The picture element
  227. Srcset and Sizes This is what you should use 75%

    of the time! http://blog.cloudfour.com/dont-use-picture-most-of-the-time/
  228. Srcset and Sizes <img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg

    320w" sizes="(min-width: 36em) 33.3%, 100%" alt="A rad wolf" /> Picture standard does not require you to use the picture element. This is what you should use 75% of the time! http://blog.cloudfour.com/dont-use-picture-most-of-the-time/
  229. http://ericportis.com/posts/2014/srcset-sizes/

  230. Responsive images are in some browsers NOW! Coming soon! Under

    consideration Unknown
  231. None
  232. Picturefill Picturefill A responsive image polyfill Download Getting Started Examples

    API Browser support Contributing The picture element and associated features are W3C standard HTML features that allow web developers to deliver an appropriate image to every user depending on a variety of conditions like screen size, viewport size, screen resolution, and more. Picturefill is a JavaScript file (or a polyfill to be more specific) that enables support for the picture element and associated features in browsers that do not yet support them, so you can start using them today! Picturefill is developed and maintained by , with help from the members of the Responsive Images Community Group and the developer community at large. For Picturefill version 2, a special thanks goes to Shawn Jansepar for all his work on polyfilling the new spec. Contributing, Bug Reports, and More information For more information on the development of Picturefill, and how you can file bugs or contribute fixes, check out the the code project site on Github : Picturefill on Github. Downloading Picturefill Downloading Picturefill Picturefill Version 2.0.0 http://scottjehl.github.io/picturefill/
  233. #5 Handle high-density images carefully

  234. A single image on multiple screens

  235. 0 500000 1000000 1500000 2000000 Blackberry Curve iPhone iPhone Retina

    Macbook Macbook Retina 1861632 465408 519360 130080 57920 320x181 480x271 960x541 909x512 1818x1024 Image Resolution
  236. 0 500000 1000000 1500000 2000000 Blackberry Curve iPhone iPhone Retina

    Macbook Macbook Retina 1861632 465408 519360 130080 57920 320x181 480x271 960x541 909x512 1818x1024 Image Resolution 32x bigger
  237. @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
  238. Picturefill User Preference Branch https://github.com/scottjehl/picturefill/tree/user-prefs

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

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

    images…
  241. Eights guidelines for responsive images

  242. #1 Use vector-based images whenever you can

  243. A Compendium of SVG Information Published*July*22,*2014*by*Chris*Coyier CSS-TRICKS Grow your CSS

    skills. * THE LODGE A*huge*pile*of*information*about SVG. How to Use SVG These*are*overview*articles covering*lots*of*stuff*relating*to SVG.*Why*to*use*it*and*the*basics of*how*to*use*it.*Mostly:* ,* ,* , <img> background-image <svg> ™ Learn*HTML,*CSS,*and*how*to*build iPhone*apps*at*Treehouse.*Their library*of*over*1,000*current*training FORUMS SNIPPETS ALMANAC VIDEOS BLOG http://css-tricks.com/mega-list-svg-information/
  244. /' // . // |\//7 /' " \ . |

    ( \ _ _ - -_ | '._ ' _ __ _- \_ _/ \'-' // \\_/ \\ | | || | / / | \ / |VV ||--\__________/-||-/| || || || || { } { } { }{ } . . Drag & Drop ur SVGs on the Grumpicon plz. What Is This Issues? Grumpicon.com based on Grunticon
  245. Media queries INSIDE SVG? http://www.flickr.com/photos/deleatur/3051737237

  246. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/ xlink" width="400" height="400"> <g> <title>Simple SVG +

    mediaqueries</title> <defs> <style type="text/css"> #circle { fill: #fce57e; stroke: #fff; stroke-width: 100px; stroke-opacity: 0.5; fill-opacity: 1; } @media screen and (max-width: 350px) { #circle { fill: #879758; } } @media screen and (max-width: 200px) { #circle { fill: #3b9557; } } @media screen and (max-width: 100px) { #circle { fill: #d8f935; } } @media screen and (max-width: 50px) { #circle { fill: #a8c45f; } } @media screen and (max-width: 25px) { #circle { fill: #2c3c0c; } } </style> </defs> <circle cx="200" cy="200" r="150" id="circle" /> </g> </svg>
  247. http://my.opera.com/ODIN/blog/2009/10/12/how-media-queries-allow-you-to-optimize-svg-icons-for-several-sizes

  248. http://my.opera.com/ODIN/blog/2009/10/12/how-media-queries-allow-you-to-optimize-svg-icons-for-several-sizes

  249. http://my.opera.com/ODIN/blog/2009/10/12/how-media-queries-allow-you-to-optimize-svg-icons-for-several-sizes

  250. #2 Encourage people to upload the highest quality source possible

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

  252. 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
  253. 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 Unique URLs are imperative to play nice with caching.
  254. None
  255. “Save for the Web” should be a thing of the

    past. —@adamdbradley “
  256. #5 Provide automated output of Picture and PictureFill <picture> <source

    media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 18em)" srcset="med.jpg"> <img src="small.jpg" alt="The president giving an award."> </picture>
  257. Responsive Images Markup Function

  258. { "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 }, ] } Responsive Images Markup Function Templates contain breakpoint info only.
  259. { "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 }, ] } Responsive Images Markup Function Responsive Images Markup Function Templates contain breakpoint info only. Markup for all images can be changed in one spot.
  260. { "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 }, ] } Responsive Images Markup Function Responsive Images Markup Function PictureFill Markup Templates contain breakpoint info only. Markup for all images can be changed in one spot.
  261. #6 Provide a way to override resized images for art

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

    learn from mod_pagespeed or use it #7 Integrate image compression best practices
  263. 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
  264. It’s three years later. Let’s revisit my original question.

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

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

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

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

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

  270. And performance is just one factor.

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

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

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

    all of the Flickr users sharing under creative commons.