Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Akamai Edge: When Responsive Design Meets the Real World

Akamai Edge: When Responsive Design Meets the Real World

Most responsive designs are bloated and slow. Learn how to make them fast.

Jason Grigsby

October 09, 2013
Tweet

More Decks by Jason Grigsby

Other Decks in Technology

Transcript

  1. Responsive web design offers us for a sensible way to

    deal with device diversity. http://www. ickr.com/photos/superfantastic/50088733/ http://www. ickr.com/photos/darrentunnicliff/4232232092/
  2. And yet the one question I frequently ask myself is…

    http://www. ickr.com/photos/classblog/5136926303
  3. 80% during misc downtime 76% while waiting in lines 86%

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

  5. TMI

  6. http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf People demand fast web sites Slow sites mean real

    dollars are lost 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. Home / Blog Subscribe Reports Training Events Jobs Blog More Browse by topic Like 14 Share Share 20 http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf 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/
  7. 34.7K 8.1K 26.6K 76.6% 39.0K 8.4K 30.6K 78.4% 30.5K 6.7K

    23.8K 78% 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
  8. 34.7K 8.1K 26.6K 76.6% 39.0K 8.4K 30.6K 78.4% 30.5K 6.7K

    23.8K 78% 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
  9. 34.7K 8.1K 26.6K 76.6% 39.0K 8.4K 30.6K 78.4% 30.5K 6.7K

    23.8K 78% 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%
  10. 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/
  11. Guy Podjarny repeated the experiment 2013: 476 sites from mediaqueri.es

    tested http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
  12. Akin to hosting a dinner party on short notice… http://www.

    ickr.com/photos/beautyrede ned/2643858323/
  13. So you shove all your junk in the closet. http://www.

    ickr.com/photos/puuikibeach/3654517679
  14. 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
  15. /* 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.
  16. 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] } /* 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. Keep basic styles outside of media queries.
  17. The absence of support for media queries is in fact

    the rst media query. —Bryan Rieger “
  18. 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?
  19. <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.
  20. <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 poly ll for IE)
  21. 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;} }
  22. 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
  23. Images scoped within media queries <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;        } } http://timkadlec.com/2012/04/media-query-asset-downloading-results/
  24. display:none on parent element 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;        } }
  25. Image override with a media query 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');        } }
  26. #3 Conditionally load JS based on screen size and capabilities

    http://www.flickr.com/photos/lyza/7382255242/
  27. 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!
  28. <a  href="articles/latest/"            data-­‐append="articles/latest/fragment"    

           data-­‐media="(min-­‐width:  30em)">          Latest  Articles </a> https://github.com/filamentgroup/Ajax-Include-Pattern/ Use AJAX to bring more content into the page as the viewport width gets bigger AJAX Include Pattern
  29. Behaviorial Breakpoints Better yet, keep your breakpoints in your CSS

    and have your JavaScript watch to changes to the DOM triggered by media queries.
  30. <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.
  31. <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. One SRC to rule all images
  32. 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
  33. In the meantime, pick a hack. My fave is PictureFill.

    <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>                <!-­‐-­‐  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
  34. 0 500000 1000000 1500000 2000000 Blackberry Curve iPhone iPhone Retina

    Macbook Macbook Retina 1861632 465408 519360 130080 57920 Single image on multiple screens 320x18 480x27 960x54 909x51 1818x10
  35. 0 500000 1000000 1500000 2000000 Blackberry Curve iPhone iPhone Retina

    Macbook Macbook Retina 1861632 465408 519360 130080 57920 Single image on multiple screens 3,214% bigger 320x18 480x27 960x54 909x51 1818x10
  36. Apple.com is an anti-pattern. Downloads both standard and retina. The

    total size of the page goes from 502.90K to 2.13MB when the retina versions of images are downloaded.
  37. If possible, use CSS for now. @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); } }
  38. PictureFill User Preference Branch Tap HD/SD to switch image density

    https://github.com/scottjehl/picturefill/tree/user-prefs
  39. IcoMoon.io makes font icons easy IcoMoon App Premium Icons Font

    CDN Browse 3800+ Free Vector Icons 1200+ Vector Icons & Counting Serve Custom-Built Fonts IcoMoon IcoMoon Custom Built and Crisp Icon Fonts, Done Right Home App Icon Packs Font CDN Demo Documentation Blog About
  40. Grumpicon.com helps with SVG Based on open source grunticon /'

    // . // |\//7 /' " \ . | ( \ _ _ - -_ | '._ ' _ __ _- \_ _/ \'-' // \\_/ \\ | | || | / / | \ / |VV ||--\__________/-||-/| || || || || { } { } { }{ } . . Drag & Drop ur SVGs on the Grumpicon plz. What Is This Issues?
  41. Images can be resized to any size with URL parameters

    #4 <img src="http://src.sencha.io/320/http://sencha.com/files/u.jpg" alt="My constrained image" />
  42. Provide automated output of PictureFill or alternative #5 { "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 PictureFill  Markup Sample syntax. Don’t get hung up on details. Markup for all images can be changed in one spot.
  43. Bonus: Detect support for WebP image format and use it

    #8 The average WebP le size is 25% - 34% smaller compared to JPEG le size. WebP compresses 34% better than libpng, and 26% better than pngout for loseless images.
  44. The only rule for your responsive images implementation: Plan for

    the fact that it will be deprecated. Make it easy to change.
  45. Unlikely responsive design will ever be as fast as something

    crafted speci cally for a device. http://www.flickr.com/photos/quarenta/3256329577
  46. Thank You! Special thanks to Scott Jehl, Guy Podjarny, and

    all of the Flickr users sharing under creative commons.