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

Slowing Down To Go Faster: Responsive Web Desig...

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. 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
  2. PART 1 WHAT IS RESPONSIVE WEB DESIGN? Its when you

    resize the browser and the content changes width, right? YES
  3. Can’t everyone just use an iPhone 5S? You’re not working

    hard enough if you can’t afford one NO!
  4. RESPONSIVE WEB DESIGN IS: A SOLUTION TO THE PROBLEM OF

    THE MASSIVE DIFFERENCES WE’RE NOW SEEING IN THE CLIENT
  5. 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
  6. Small file sizes? Oh... My... God... #headfuck MAKE YOUR FILES

    SMALLER WORK EXPERIENCE MONKEY OBVIOUS RULE #1
  7. Dag nammit you clever! #takemymoney ONLY DOWNLOAD WHAT YOU NEED

    ANYONE WHO LIKES PARALLAX SCROLLING OBVIOUS RULE #3
  8. 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
  9. BUILD YOUR WORKFLOW DOWNLOAD ONLY WHAT YOU NEED REDUCE DOWNLOADS

    IMPROVE TIME TO GLASS DON’T BREAK STUFF
  10. 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”
  11. CORE EXPERIENCE SIMPLE LAYOUT, FAST, ALL BROWSERS 7 8 BB

    OS5 (MANGO) 1.6 9 10 BB OS6+ (WEBKIT) 2.1+
  12. JAVASCRIPT IF BROWSER “CUTS THE MUSTARD”... if ( 'querySelector' in

    document && 'localStorage' in window && 'addEventListener' in window ) { // load JS application
  13. 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+
  14. BUILD YOUR WORKFLOW CORE EXPERIENCE DOWNLOAD ONLY WHAT YOU NEED

    REDUCE DOWNLOADS IMPROVE TIME TO GLASS DON’T BREAK STUFF
  15. 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
  16. 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...
  17. 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...
  18. 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...
  19. <script  src="imager.js"></script> <script>    var  imager  =  new  Imager({  

         availableWidths:  [320,  640,  1024]    }); </script> IN YOUR HTML INCLUDE THE IMAGE.JS FILE AND INSTANTIATE AN OBJECT LIKE SO MUST BE SAME ARRAY FROM TWO SLIDES PREVIOUS
  20. In  your  HTML... <div  class="delayed-­‐image-­‐load"   data-­‐src="img/320/squirrel.jpg"></div> <img  class="image-­‐replace"  

    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
  21. BUILD YOUR WORKFLOW CORE EXPERIENCE DOWNLOAD ONLY WHAT YOU NEED

    REDUCE DOWNLOADS IMPROVE TIME TO GLASS DON’T BREAK STUFF AUTOMATED RESPONSIVE IMAGES
  22. 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$
  23. github.com/h5bp/mobile-­‐boilerplate/.htaccess <IfModule  mod_expires.c> #  CSS  and  JavaScript ExpiresByType  application/javascript  "access

     plus  1  year" ExpiresByType  text/css                              "access  plus  1  year" </IfModule> SETTING THE CACHE
  24.                    

       </div>                </div>                <script  src="main.js?v=0.1.0"></script>        </body> </html> CHANGE THE PATH TO BREAK THE CACHE WHEN A VERSION OF THE FILE IS AVAILABLE
  25. THIS ISN’T EASY IF THERE ARE MANY FILES    

       <link  href="index.css?v=0.1.0"  />        <link  href="share.css?v=0.1.0"  />        </head> ...                        </div>                </div>        <script  src="index.js?v=0.1.0">            </script>        <script  src="nav.js?v=0.1.0">            </script>        <script  src="imager.js?v=0.1.0">            </script>        <script  src="share.js?v=0.1.0">            </script>        </body> </html> LUCKILY GRUNT CAN HELP US
  26. {    "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
  27. module.exports  =  function(grunt)  {    grunt.initConfig({        pkg:

     '<json:package.json>',        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
  28.        <link  href="index.css?v=<!-­‐-­‐  @echo  version  -­‐-­‐>"  />  

         <link  href="share.css?v=<!-­‐-­‐  @echo  version  -­‐-­‐>”  />    </head> ...                        </div>                </div>        <script  src="index.js?v=<!-­‐-­‐  @echo  version  -­‐-­‐>">            </script>        <script  src="nav.js?v=<!-­‐-­‐  @echo  version  -­‐-­‐>">            </script>        <script  src="imager.js?v=<!-­‐-­‐  @echo  version  -­‐-­‐>">            </script>        <script  src="share.js?v=<!-­‐-­‐  @echo  version  -­‐-­‐>">            </script>    </body> </html> example.html.tmpl
  29.        <link  href="index.css?v=0.1.1"  />        <link

     href="share.css?v=0.1.1"  />    </head> ...                        </div>                </div>        <script  src="index.js?v=0.1.1">            </script>        <script  src="nav.js?v=0.1.1">            </script>        <script  src="imager.js?v=0.1.1">            </script>        <script  src="share.js?v=0.1.1">            </script>    </body> </html> example.html PACKAGE FILE OURSELVES BEFORE EACH RELEASE THIS IS NICE, BUT WE HAVE TO UPDATE THE
  30. 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
  31. 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
  32.        <link  href="index.css?v=0.1.1"  />        <link

     href="share.css?v=0.1.1"  />    </head> ...                        </div>                </div>        <script  src="index.js?v=0.1.1">            </script>        <script  src="nav.js?v=0.1.1">            </script>        <script  src="imager.js?v=0.1.1">            </script>        <script  src="share.js?v=0.1.1">            </script>    </body> </html> example.html AUTOMATED CACHE BREAKING!
  33. BREAK THE CACHE BY A CHANGE IN THE FILE PATH,

    NOT THE QUERYSTRING PRO TIP <script  src="main.js?v=0.1.0"></script>  BAD  :-­‐( <script  src="main-­‐0.1.0.js"></script>      GOOD  :-­‐)
  34.        <link  href="index-­‐<!-­‐-­‐  @echo  version  -­‐-­‐>.css"  />  

         <link  href="share-­‐<!-­‐-­‐  @echo  version  -­‐-­‐>.css”  />    </head> ...                        </div>                </div>        <script  src="index-­‐<!-­‐-­‐  @echo  version  -­‐-­‐>.js">            </script>        <script  src="nav-­‐<!-­‐-­‐  @echo  version  -­‐-­‐>.js">            </script>        <script  src="imager-­‐<!-­‐-­‐  @echo  version  -­‐-­‐>.js">            </script>        <script  src="share-­‐<!-­‐-­‐  @echo  version  -­‐-­‐>.js">            </script>    </body> </html> example.html.tmpl MOVE THE VERSION NUMBER INTO THE FILE NAME
  35. #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
  36. 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
  37. 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