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. 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
  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...”
  4. Example: Different content priorities for a restaurant Small devices Large

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

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

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

    how long it takes to deliver the content to the user
  12. A responsive site is expected to work on a wide

    variety of internet connections
  13. 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
  14. Page weight by content type March 2015 March 2012 Charts

    from http://httparchive.org/interesting.php
  15. 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
  16. • 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%
  17. To use the picture element on your site you will

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

    to ensure a suitable placeholder is in place
  19. The content is the heart of our site but not

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

    fails to load the content that is deferred will not be loaded
  21. Show states which let the user know something is happening

    while we still wait for Main JS to load
  22. 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
  23. Full examples of everything we have talked about can be

    found at www.jonathanfielding.com/untangle- responsive
  24. 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.