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

Slowing Down To Go Faster: Responsive Web Design And The Problem Of Agility vs Robustness

Tom Maslen
November 15, 2013

Slowing Down To Go Faster: Responsive Web Design And The Problem Of Agility vs Robustness

The great irony of modern web development is that to make a website as fast as possible requires much more of your time. In an environment where you have to develop swiftly, how do you balance the need of meeting deadlines with the need to get the job done right? Tom Maslen from BBC News will take you through a number of techniques to help you to stay true to the idealisms of web development while also helping you to comprehend and master the increasing complexities of web browser support.

Tom Maslen

November 15, 2013
Tweet

More Decks by Tom Maslen

Other Decks in Technology

Transcript

  1. SLOWING DOWN TO GO FASTER
    RESPONSIVE WEB DESIGN & THE PROBLEM OF
    AGILITY vs ROBUSTNESS

    View full-size slide

  2. Ciao!
    AT COPACABANA BEACH, BRAZIL
    3 MILLION PEOPLE LISTENING TO THE POPE

    View full-size slide

  3. PEOPLE NEVER SAW IT
    THIS IS THE FIRST WEBSITE I EVER MADE, 3 MILLION

    View full-size slide

  4. Ciao!
    Hello!
    AN AUDIENCE OF 3 MILLION
    MAKING WEBPAGES IS CLOSEST I’LL EVER GET TO

    View full-size slide

  5. UBIQUITY
    LESS
    IMPORTANT
    THAN
    ACCESSIBILITY
    PERFORMANCE
    USABILITY
    SEO FRIENDLY
    NO JAVASCRIPT
    SEMANTICS
    LESS
    IMPORTANT
    THAN
    HTML
    CSS
    JAVASCRIPT
    OUR WEBSITES
    WE WANT AS MANY PEOPLE AS POSSIBLE TO VIEW

    View full-size slide

  6. PART 1
    WHAT IS RESPONSIVE WEB DESIGN?
    Its when you
    resize the browser and
    the content changes
    width, right?
    YES

    View full-size slide

  7. But isn’t it also about
    building for mobiles first?
    YES

    View full-size slide

  8. And isn’t there
    a massive difference
    in device capabilities
    too?
    YES

    View full-size slide

  9. Can’t everyone just
    use an iPhone 5S?
    You’re not
    working hard enough if
    you can’t afford one
    NO!

    View full-size slide

  10. RESPONSIVE WEB DESIGN IS:
    A SOLUTION TO THE PROBLEM
    OF THE MASSIVE DIFFERENCES
    WE’RE NOW SEEING IN THE
    CLIENT

    View full-size slide

  11. ROBUSTNESS vs. AGILITY
    THE PROBLEM IS

    View full-size slide

  12. I WORK IN BBC NEWS VISUAL JOURNALISM...

    View full-size slide

  13. WE BUILD INFOGRAPHICS AND DATA
    VISUALISATIONS

    View full-size slide

  14. MORE DESIGN TIME
    RESPONSIVE WEB DESIGN TAKES LONGER
    MORE COMPLEX DEVELOPMENT
    MORE TESTING
    EVERYTHING WE MAKE IS NOW RESPONSIVE
    AND TAKES 3 TIMES LONGER TO BUILD

    View full-size slide

  15. PART 2
    OBVIOUS ADVICE
    PERFORMANCE IS EASY, HERE ARE 4
    OBVIOUS TIPS TO HELP YOU...

    View full-size slide

  16. Small file sizes?
    Oh... My... God...
    #headfuck
    MAKE YOUR FILES SMALLER
    WORK EXPERIENCE
    MONKEY
    OBVIOUS RULE #1

    View full-size slide

  17. Less requests? Of
    course!!!
    #ideagasm
    MAKE LESS REQUESTS
    PROJECT MANAGER
    KITTEH
    OBVIOUS RULE #2

    View full-size slide

  18. Dag nammit you
    clever!
    #takemymoney
    ONLY DOWNLOAD WHAT YOU NEED
    ANYONE WHO LIKES
    PARALLAX SCROLLING
    OBVIOUS RULE #3

    View full-size slide

  19. Floored by your
    awesomeness
    #maslened
    DON’T BREAK WHAT
    YOU’VE ALREADY MADE
    THE GUY WHO BREAKS
    THE BUILD ALL THE TIME
    OBVIOUS RULE #4

    View full-size slide

  20. BUT...
    PUTTING IT INTO YOUR
    WORKFLOW WITH RESPONSIVE
    WEB DESIGN IS HARD

    View full-size slide

  21. BUILD YOUR WORKFLOW
    DOWNLOAD ONLY WHAT YOU NEED
    REDUCE DOWNLOADS
    IMPROVE TIME TO GLASS
    DON’T BREAK STUFF

    View full-size slide

  22. www.gruntjs.com

    View full-size slide

  23. www.gruntjs.com
    integralist.co.uk/Grunt-Boilerplate.html
    MARK McDONNELL
    @integralist

    View full-size slide

  24. IMPROVE TIME TO GLASS

    View full-size slide

  25. ANGRY GLASWEGIAN
    PINT GLASS
    Ay’m gonna
    deck ya!
    THIS IS NOT TIME TO GLASS

    View full-size slide

  26. THIS IS TIME TO GLASS
    ILYA GRIGORIK - @igrigorik
    PATRICK HAMANN - @patrickhamann
    http://bit.ly/16h5OHm
    http://bit.ly/18AOWOz
    “OPTIMIZING THE CRITICAL PATH”
    “CSS AND THE CRITICAL PATH”

    View full-size slide

  27. TIME TO GLASS

    View full-size slide

  28. WE DO THIS USING THIS TECHNIQUE

    View full-size slide

  29. CORE EXPERIENCE
    SIMPLE LAYOUT, FAST, ALL BROWSERS
    7 8
    BB OS5
    (MANGO)
    1.6
    9 10
    BB OS6+
    (WEBKIT)
    2.1+

    View full-size slide

  30. JAVASCRIPT
    IF BROWSER “CUTS THE MUSTARD”...
    if (
    'querySelector' in document &&
    'localStorage' in window &&
    'addEventListener' in window
    ) {
    // load JS application

    View full-size slide

  31. ENHANCED EXPERIENCE
    COMPLEX LAYOUT, FUNCTIONAL, MODERN BROWSERS
    CORE EXPERIENCE
    SIMPLE LAYOUT, FAST, ALL BROWSERS
    7 8
    BB OS5
    (MANGO)
    1.6
    9 10
    BB OS6+
    (WEBKIT)
    2.1+

    View full-size slide

  32. BUILD YOUR WORKFLOW
    CORE EXPERIENCE
    DOWNLOAD ONLY WHAT YOU NEED
    REDUCE DOWNLOADS
    IMPROVE TIME TO GLASS
    DON’T BREAK STUFF

    View full-size slide

  33. I’m gonna
    shoot you!
    STEVIE SOUDERS WILL GET ANGRY UNLESS...

    View full-size slide

  34. YOU ONLY DOWNLOAD WHAT YOU NEED

    View full-size slide

  35. Img$
    62%$
    JS$
    17%$
    Other$
    9%$
    Flash$
    5%$
    HTML$
    4%$
    CSS$
    3%$
    httparchive.org/interesting.php
    AVERAGE % PER PAGE BY CONTENT TYPE
    LETS START WITH
    IMAGES

    View full-size slide

  36. WE CAN’T TELL BY DEVICE WIDTH WHAT SIZE
    IMAGE WE NEED

    View full-size slide

  37. SOMETIMES THEY ARE FULL WIDTH...

    View full-size slide

  38. OR HALF THE WIDTH...

    View full-size slide

  39. OR EVEN SMALLER

    View full-size slide

  40. WE NEED TO BUILD MULTIPLE VERSIONS OF THE
    SAME IMAGE...

    View full-size slide

  41. THEN DECIDE WHICH ONE TO USE
    ?

    View full-size slide

  42. IMAGER.JS IS A GRUNT TASK TO DO THIS

    View full-size slide

  43. MARK McDONNELL
    @integralist
    ADDY OSMANI
    @addyosmani
    MADE BY MYSELF AND THESE TWO CHAPS

    View full-size slide

  44. A GRUNTFILE
    ORIGINAL IMAGES
    YOU NEED...

    View full-size slide

  45. gruntfile.js
    responsive_images:  {
           options:  {
                   sizes:  [{
                           width:  320
                   },{
                           width:  640
                   },{
                           width:  1024
                   }]
           },
           files:  [{
                   cwd:  './original_img/',
                   src:  ['*.{jpg,gif,png}'],
                   dest:  './resp_img/'
           }]
    }
    WHERE THE ORIGINAL
    IMAGES ARE
    GRUNT NEEDS TO KNOW...

    View full-size slide

  46. gruntfile.js
    responsive_images:  {
           options:  {
                   sizes:  [{
                           width:  320
                   },{
                           width:  640
                   },{
                           width:  1024
                   }]
           },
           files:  [{
                   cwd:  './original_img/',
                   src:  ['*.{jpg,gif,png}'],
                   dest:  './resp_img/'
           }]
    }
    WHAT SIZES OF IMAGES
    YOU WANT
    GRUNT NEEDS TO KNOW...

    View full-size slide

  47. gruntfile.js
    responsive_images:  {
           options:  {
                   sizes:  [{
                           width:  320
                   },{
                           width:  640
                   },{
                           width:  1024
                   }]
           },
           files:  [{
                   cwd:  './original_img/',
                   src:  ['*.{jpg,gif,png}'],
                   dest:  './resp_img/'
           }]
    }
    WHERE IMAGES WILL BE
    OUTPUTTED
    GRUNT NEEDS TO KNOW...

    View full-size slide


  48. <br/>    var  imager  =  new  Imager({<br/>        availableWidths:  [320,  640,  1024]<br/>    });<br/>
    IN YOUR HTML INCLUDE THE IMAGE.JS FILE AND
    INSTANTIATE AN OBJECT LIKE SO
    MUST BE SAME ARRAY
    FROM TWO SLIDES PREVIOUS

    View full-size slide

  49. In  your  HTML...
    data-­‐src="img/320/squirrel.jpg">
    src="img/640/squirrel.jpg"  />
    IS REPLACED BY
    USE THIS DIV INSTEAD OF A NORMAL IMG TAG
    IT WILL TURN INTO AN IMG TAG, AUTOMATICALLY
    CHOOSING THE BEST FITTING IMAGE

    View full-size slide

  50. grunt  responsive_images
    THE DIFFERENT WIDTH VERSIONS OF THE IMAGE
    RUNNING THIS COMMAND WILL GENERATE
    BEFORE AFTER

    View full-size slide

  51. BUILD YOUR WORKFLOW
    CORE EXPERIENCE
    DOWNLOAD ONLY WHAT YOU NEED
    REDUCE DOWNLOADS
    IMPROVE TIME TO GLASS
    DON’T BREAK STUFF
    AUTOMATED
    RESPONSIVE IMAGES

    View full-size slide

  52. REDUCE DOWNLOADS

    View full-size slide

  53. httparchive.org/interesting.php
    CACHE LIFETIME (DAYS)
    56%$
    13%$
    18%$
    9%$
    4%$
    0%$
    10%$
    20%$
    30%$
    40%$
    50%$
    60%$
    70%$
    80%$
    90%$
    100%$
    t$=$0$ 0$<$t$<=1$ 1$<$t$<=$30$ 30$<$t$<=$365$ t$>$365$

    View full-size slide

  54. PRO TIP
    CACHE JS, CSS &
    IMAGES FOR A YEAR

    View full-size slide

  55. github.com/h5bp/mobile-­‐boilerplate/.htaccess

    #  CSS  and  JavaScript
    ExpiresByType  application/javascript  "access  plus  1  year"
    ExpiresByType  text/css                              "access  plus  1  year"

    SETTING THE CACHE

    View full-size slide

  56.                        
                   
                   
           

    View full-size slide

  57. THIS ISN’T EASY IF THERE ARE MANY FILES
           
           
           
    ...
                           
                   
           <br/>            
           <br/>            
           <br/>            
           <br/>            
           

    View full-size slide

  58. JARROD OVERSON
    @jsoverson

    View full-size slide

  59. YOU NEED A PACKAGE FILE

    View full-size slide

  60. {
       "name":  "Example",
       "description":  "Example  app  for  Velocity  EU  2013",
       "version":  "0.1.1",
       "devDependencies":  {
           "grunt":                        "~0.4.1",
           "grunt-­‐preprocess":  "~3.0.1"
       }
    }
    APP VERSION
    package.json

    View full-size slide

  61. module.exports  =  function(grunt)  {
       grunt.initConfig({
           pkg:  '',
           preprocess:  {
               options:  {
                   context:  {
                     version:  '<%=  pkg.version  %>'
                   }
               },
               multifile  :  {
                   files  :  {
                           'example.html.tmpl'  :  'example.html'
                   }
               }
           }  
       });
       grunt.loadNpmTasks('grunt-­‐preprocess');
    };
    REFERENCE
    GRUNT-PREPROCESS
    INSTRUCTIONS
    TEMPLATE OUTPUT
    Gruntfile.js
    TEMPLATE VARIABLE

    View full-size slide

  62.        "  />
           ”  />
       
    ...
                           
                   
           "><br/>            
           "><br/>            
           "><br/>            
           "><br/>            
       

    View full-size slide

  63.        
           
       
    ...
                           
                   
           <br/>            
           <br/>            
           <br/>            
           <br/>            
       

    View full-size slide

  64. File  updated
    Path:  package.json
    Old  version:  0.1.0.  New  version:  0.1.1.
    Done,  without  errors.
    Waiting...
    OK
    >>  File  "main.js"  changed.
    Running  "version:build"  (version)  task
    LOOK

    View full-size slide

  65. Waiting...
    OK
    >>  File  "main.js"  changed.
    Running  "version:build"  (version)  task
    File  updated
    Path:  package.json
    Old  version:  0.1.1.  New  version:  0.1.1-­‐1.
    Done,  without  errors.
    LOOK

    View full-size slide

  66.        
           
       
    ...
                           
                   
           <br/>            
           <br/>            
           <br/>            
           <br/>            
       

    View full-size slide

  67. BUT...
    PROXY SERVERS DO NOT
    CACHE ASSETS WITH QUERY
    STRINGS

    View full-size slide

  68. BREAK THE CACHE BY A CHANGE IN
    THE FILE PATH, NOT THE QUERYSTRING
    PRO TIP
     BAD  :-­‐(
         GOOD  :-­‐)

    View full-size slide

  69.        .css"  />
           .css”  />
       
    ...
                           
                   
           .js"><br/>            
           .js"><br/>            
           .js"><br/>            
           .js"><br/>            
       

    View full-size slide

  70. #Rules  for  Versioned  Static  Files
    RewriteRule  ^(scripts|css)/(.+)-­‐(.+)\.
    (js|css)$  $1/$2.$4  [L]
    THIS REWRITE RULE...
    DOES THIS REDIRECTION...
    scripts/main-­‐0.1.0.js scripts/main.js

    View full-size slide

  71. BUILD YOUR WORKFLOW
    CORE EXPERIENCE
    DOWNLOAD ONLY WHAT YOU NEED
    REDUCE DOWNLOADS
    VERSION ASSETS
    IMPROVE TIME TO GLASS
    DON’T BREAK STUFF
    AUTOMATED LONG
    CACHE
    AUTOMATED
    RESPONSIVE IMAGES

    View full-size slide

  72. DON’T BREAK STUFF

    View full-size slide

  73. A RESPONSIVE VISUAL REGRESSION TESTING TOOL

    View full-size slide

  74. @sthulb
    STEVEN THULBOURN
    @jcleveley
    JOHN CLEVELEY
    @dblooman
    DAVID BLOOMAN

    View full-size slide

  75. LIVE SITE TEST SITE DIFFERENCES

    View full-size slide

  76. LIVE SITE TEST SITE DIFFERENCES

    View full-size slide

  77. BUILD YOUR WORKFLOW
    CORE EXPERIENCE
    DOWNLOAD ONLY WHAT YOU NEED
    REDUCE DOWNLOADS
    VERSION ASSETS
    IMPROVE TIME TO GLASS
    DON’T BREAK STUFF
    AUTOMATED
    REGRESSION TESTS
    AUTOMATED LONG
    CACHE
    AUTOMATED
    RESPONSIVE IMAGES

    View full-size slide

  78. ROBUSTNESS vs. AGILITY
    THE PROBLEM IS

    View full-size slide

  79. 5 INCHES 7 INCHES
    THE PROBLEM WILL ONLY INCREASE IN
    COMPLEXITY

    View full-size slide

  80. LAPTOP OR TABLET?
    THE PROBLEM WILL ONLY INCREASE IN
    COMPLEXITY

    View full-size slide

  81. TOTAL DIVERGENCE
    THE PROBLEM WILL ONLY INCREASE IN
    COMPLEXITY

    View full-size slide

  82. MULTIPLE INTERACTION TYPES PER DEVICE
    THE PROBLEM WILL ONLY INCREASE IN
    COMPLEXITY

    View full-size slide

  83. TOOLING & AUTOMATION
    THE SOLUTION IS

    View full-size slide

  84. THE END
    MOVE SWIFTLY
    TOM MASLEN, BBC NEWS
    @tmaslen

    View full-size slide