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

Untangling Responsive Design

Untangling Responsive Design

Responsive design is still a relatively new technique – however, it has already gone through several different incarnations of how we should be building these sites. In the first incarnation we started by adding media queries, adapting our site to work better on mobile devices. The second incarnation arrived with mobile first design: Building for the least capable, smallest devices and then using progressive enhancement to take advantage of larger screens and extra features that devices offered. This talk will focus on how we can reimagine responsive design with a focus on the content and performance: Evolving a new incarnation where we aim to deliver a functioning site as quickly as possible to our users that delivers content that is prioritised to what the user is trying to achieve.

Jonathan Fielding

June 08, 2015
Tweet

More Decks by Jonathan Fielding

Other Decks in Technology

Transcript

  1. Untangling How We Design Responsively Jonathan Fielding @jonthanfielding #UntangleResponsive

  2. A bit about me… • Technical Architect at Beamly •

    Author of Beginning Responsive Design • Regular contributor to open source, including SimpleStateManager, HTML5 Boilerplate, Echo.js, Gitissu.es, DigitalOceanCLI, Doccy among many projects
  3. Current Responsive Design techniques focus on mobile first

  4. There has not been the same focus on either the

    content or the performance of our site.
  5. Our site content

  6. Bobby Anderson - Everyday Designer “Content is king, it always

    has been and always will be. Content is why users visit your site, subscribe to your newsletters and follow you on social media. Content is the single most important aspect of your website...”
  7. We need to know our content before we can design

  8. Content must work across a wide variety of devices

  9. Device usage (Global averages) 65% 29% 6% source: Statcounter http://gs.statcounter.com/#all-comparison-ww-monthly-201403-201504

  10. Where possible, don’t rely on global statistics, look at your

    own sites usage stats
  11. Prioritising Content

  12. The first step is to audit your site content

  13. Content does not have to be in the same order

    on every device
  14. Example: Different content priorities for a restaurant Small devices Large

    devices Phone number Atmosphere Directions Menu Booking Booking Menu Phone number Atmosphere Directions
  15. So this is how it could look on mobile

  16. and this is how it transforms to larger devices

  17. To reorder content based on the type of device we

    can use CSS Flexbox to handle the ordering and target the device based on the screen size
  18. <div class="wrapper"> <div class="better-content-for-mobile"> I am more important on mobile

    </div> <div class="better-content-for-desktop"> I am more important on desktop </div> </div>
  19. @media only screen and (min-width: 768px) { .wrapper { display:

    flex; flex-direction: column; } .better-content-for-desktop { order: 1; } .better-content-for-mobile { order: 2; } }
  20. The limitation here is that not all older browsers support

    Flexbox.
  21. If you need to support IE9 or below you should

    order your content for larger devices in HTML and then use the CSS on smaller devices to reorder.
  22. If in doubt about what your user’s priorities are, invite

    them in and ask them
  23. Ensure your content is discoverable

  24. On larger devices navigating a site is often really easy

  25. None
  26. Unfortunately, on the majority of smaller devices navigation on a

    site becomes less obvious
  27. None
  28. None
  29. Larger devices also have more space for content but don’t

    hide content completely on small devices
  30. None
  31. Instead think of ways in which you can change the

    functionality to better suit the device
  32. accordion on mobile open content on desktop

  33. accordion on mobile tabbed content on desktop Thanks to @monsika

    http://codepen.io/mpiotrowicz/pen/gocmu
  34. new page on mobile lightbox on desktop

  35. simple scrollable content on mobile parallax on desktop

  36. How to measure the success of content optimisation

  37. Ask users to test your site and observe

  38. A-B test different functionality

  39. Content is King

  40. Time for a cat break

  41. Site Performance

  42. What is performance?

  43. – Google “the action or process of performing a task

    or function”
  44. In relation to a website, performance is the measure of

    how long it takes to deliver the content to the user
  45. There are two key types of performance that are important

    to a website
  46. Page load performance - The time it takes to fully

    load a page
  47. Perceived performance - the perception of the user of the

    performance of our site
  48. None
  49. Why should I care about the performance of the site?

  50. A responsive site is expected to work on a wide

    variety of internet connections
  51. The trend of the past few years however is for

    pages to increase in weight
  52. Average page weight has been increasing year on year Average

    Page Size (kB) 0 550 1100 1650 2200 March 2012 March 2013 March 2014 March 2015 Data from http://httparchive.org/interesting.php
  53. Page weight by content type March 2015 March 2012 Charts

    from http://httparchive.org/interesting.php
  54. The average time to start rendering is also increasing Render

    start (ms) 0 775 1550 2325 3100 August 2013 March 2014 August 2014 March 2015 Data from http://httparchive.org/interesting.php
  55. How can I justify spending the time on performance?

  56. • Amazon found every 100ms delay in loading a page

    cost them 1% in sales • Google found an extra 500ms delay in loading of search results decreased traffic by 20%
  57. What steps can I take to improve site performance?

  58. Optimise how you load your assets

  59. Provide different images for different viewport sizes using the <picture>

    element
  60. <picture> <source srcset="large.jpg" media="(min-width: 1200px)"> <source srcset="medium.jpg" media="(min-width: 600px)"> <img

    src="small.jpg" alt="Picture element"> </picture>
  61. None
  62. To use the picture element on your site you will

    need to include the polyfill which is called “picturefill”
  63. Defer loading of both image and video to improve the

    initial page load
  64. The most common content to defer loading is images

  65. In cases where loading assets was deferred, it is important

    to ensure a suitable placeholder is in place
  66. Defer loading of content

  67. The content is the heart of our site but not

    all content is created equal
  68. Lets look at an example of how Metro defer the

    loading of related content
  69. None
  70. None
  71. None
  72. Another example where content is deferred is Facebook

  73. Facebook choose to defer loading the majority of the content

    of their page
  74. The biggest danger of deferring content is that if JavaScript

    fails to load the content that is deferred will not be loaded
  75. None
  76. We should therefore be careful with what content we choose

    to defer loading
  77. Optimise how you load your JavaScript

  78. We can separate our JavaScript into two distinct types

  79. Critical JavaScript is the JavaScript required to initialise our page.

  80. Add events which track how user tries to interact with

    the page
  81. Show states which let the user know something is happening

    while we still wait for Main JS to load
  82. Trigger loading of the Main JS when the rest of

    the page has loaded
  83. Then we have our main JavaScript,

  84. Fire any events that had been deferred

  85. Replace the deferred event listeners with the real ones

  86. Include all the rest of the functionality required for the

    site to function
  87. How this works in practice

  88. None
  89. None
  90. So how do I do it?

  91. Use a library called CriticalJS

  92. Download CriticalJS from https://github.com/jonathan- fielding/criticaljs

  93. <script src="../src/criticaljs.js" data-deferredjs="scripts/main.js"></script> Load the CriticalJS library Tell it where

    your main JavaScript is
  94. <button data-deferred=“click”> Click Me </button> Add data attribute specifying what

    events are to be deferred
  95. Then in your main JavaScript

  96. var button = document.querySelector('button') var clicked = criticaljs.deferred(button, ‘click’); var

    ev = function(){ alert(‘clicked’); } if (clicked) { ev.bind(button)(); } button.addEventListener(ev); Check if the event has been triggered Handle deferred user interaction Attach the real interaction
  97. Measure your performance improvements

  98. It is important to regularly measure the site performance

  99. The simplest tool for measuring performance is www.webpagetest.org

  100. None
  101. None
  102. None
  103. Need for speed

  104. In Summary

  105. When building a responsive site we should spend time focusing

    on the content and performance
  106. Our content should be prioritised and discoverable

  107. And the perception of our site to our users should

    be that it loads fast
  108. Full examples of everything we have talked about can be

    found at www.jonathanfielding.com/untangle- responsive
  109. A special thanks goes out to to Charlie Fielding, Kate

    Montgomery, Phil Nash, Callum Macrae and everyone at Beamly who helped me with putting these slides together.
  110. Thank you, any questions?