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

Refocusing our Priorities in Responsive Design

Refocusing our Priorities in Responsive Design

Talk on Refocusing our Priorities in Responsive Design from Over the Air 2015

Jonathan Fielding

September 25, 2015

More Decks by Jonathan Fielding

Other Decks in Technology


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

    Author of Beginning Responsive Design • Regular contributor to open source, including SimpleStateManager, Echo.js, CriticalJS, FT’s Polyfill Service, Doccy among many projects • Lover and user of ‘the Twitter’
  2. There has not been the same focus on either the

    content or the performance of our site.
  3. 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...” http://everydaydesigner.net/design/change-your-focus-and-design-content-first
  4. An audit of your content is simply an inventory of

    what you want to include in your page
  5. Example: Different content priorities for a restaurant Small devices Large

    devices Phone number Atmosphere Directions Menu Booking Booking Menu Phone number Atmosphere Directions
  6. 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
  7. <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>
  8. @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; } }
  9. 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.
  10. Larger devices also have more space for content but don’t

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

    functionality to better suit the device
  12. In relation to a website, performance is the measure of

    how long it takes to deliver the content to the user
  13. Page load performance - The time it takes to fully

    load a page and be fully interactive
  14. A responsive site is expected to work on a wide

    variety of internet connections
  15. Google found an extra 500ms delay in loading of search

    results decreased traffic by 20%
  16. Average page weight has been increasing year on year Average

    Page Size (kB) 0 550 1100 1650 2200 September 2012 September 2013 September 2014 September 2015 Data from http://httparchive.org/interesting.php
  17. Scripts Fonts Video Images Stylesheets HTML Other 0 350 700

    1050 1400 4 56 69 1,350 209 107 354 Data from http://httparchive.org/interesting.php
  18. The average time to start rendering is also increasing Render

    start (ms) 0 1150 2300 3450 4600 March 2014 August 2014 March 2015 August 2015 Data from http://httparchive.org/interesting.php
  19. Tim Kadlec “The purpose of a performance budget is to

    make sure you focus on performance throughout a project. The reason you go through the trouble in the first place though is because you want to build a site that feels fast for your visitors.” http://www.timkadlec.com/2014/11/performance-budget-metrics/
  20. At the start of your project you need to understand

    the metrics you want to achieve
  21. As we are building a responsive site, today’s example will

    aim to start rendering in 5 seconds on a slow 3G connection
  22. If we then decide we want to add web fonts

    to our website we then adjust our budget
  23. These figures seem very ambitious when we compare them against

    the industry averages but it is achievable
  24. To use the picture element on your site you will

    need to include the polyfill which is called “picturefill”
  25. In cases where loading assets was deferred, it is important

    to ensure a suitable placeholder is in place
  26. In deferring the loading of our content only those images

    immediately visible to our users contribute to our page budget
  27. The content is the heart of our site but not

    all content is created equal
  28. The biggest danger of deferring content is that if JavaScript

    fails to load the content that is deferred will not be loaded
  29. The biggest implication about deferring content is that we are

    able to reduce the size of what we initially deliver to our users
  30. Show states which let the user know something is happening

    while we still wait for Main JS to load
  31. 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
  32. As we want to test our site on a slow

    3G connection we will use the advanced settings
  33. Full examples of everything we have talked about can be

    found at www.jonathanfielding.com/talks/ reimagining-responsive-design/
  34. 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.