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

What does Responsive Web Design mean in 2016

What does Responsive Web Design mean in 2016

At the heart of every progressive web app is a responsive site, built to be mobile first.

Unfortunately the techniques used to build mobile first sites are the same we have used for over a decade. Thankfully, browsers have been busy implementing new features that enable us to build better sites and have more fun while doing it!

So today we are going to look at ways we can build better responsive sites in 2016 using these new features

Jonathan Fielding

May 09, 2016

More Decks by Jonathan Fielding

Other Decks in Programming


  1. What does Responsive Web Design mean in 2016? Jonathan Fielding

  2. 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’
  3. At the heart of every progressive web app is a

    responsive site
  4. Built to be mobile first

  5. .floated-element { float: left } .clearfix { overflow: auto; }

    .vertical-content { height: 40px; position: absolute; top: 50%; margin-top: -20px; } However the techniques used to build mobile first sites are the same we have used for over a decade
  6. Browsers have been busy implementing new features that enable us

    to build better sites and have more fun while doing it!
  7. Our site content

  8. 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
  9. Content must work across a wide variety of devices

  10. Device usage (Global averages) 54% 41% 5% source: Statcounter http://gs.statcounter.com/#all-comparison-ww-monthly-201504-201604

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

    own site’s usage stats
  12. Auditing your content

  13. An audit of your content is simply an inventory of

    what you want to include in your page
  14. The audit of our content needs to be done before

    you start your UX or Design
  15. Jeremy Girard UXPin “Starting a website design without content is

    like creating packaging design without the product. You can do your best, but who knows if the end content or product will truly fit into what you create?” https://studio.uxpin.com/blog/a-better-responsive-web-design-process-for-2016/
  16. And you should include your stakeholders in the auditing process

  17. Prioritising Content

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

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

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

  21. and this is how it transforms to larger devices

  22. 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
  23. <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>
  24. @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; } }
  25. Ensuring content is discoverable

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

  27. None
  28. Unfortunately, on the majority of smaller devices, navigation on a

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

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

    functionality to better suit the device
  34. Laying out your content

  35. Responsive design has lead us to building our components to

    be fluid
  36. Enabling our components to scale to the different device sizes

    we are aiming to support
  37. Only recently however have we been able to do this

    without resorting to hacks
  38. Input Add-ons

  39. None
  40. <div class="input-wrap"> <input class="input-wrap__field"> <button class="input-wrap__button"> Go </button> </div> .input-wrap

    { display: flex; } .input-wrap__field { flex: 1; /* field styles */ } .input-wrap__button { /* item styles */ } HTML CSS
  41. Vertical Centered Content

  42. None
  43. <div class="aligner"> <div class="aligned-content"> <h3>I'm Centered!</h3> <p> This box is

    vertically and horizontally centered </p> </div> </div> .aligner { display: flex; align-items: center; justify-content: center; } .aligned-content { max-width: 50%; } HTML CSS
  44. Sticky Footer

  45. None
  46. <body class="site"> <header>...</header> <main class="site-content">...</main> <footer>...</footer> </body> .site { display:

    flex; min-height: 100vh; flex-direction: column; margin: 0; } .site-content { flex: 1; } HTML CSS
  47. Grids

  48. Basic Grids

  49. <div class="grid"> <div class="grid-cell">...</div> <div class="grid-cell">...</div> </div> .grid { display:

    flex; } .grid-cell { flex: 1; } HTML CSS
  50. Individual Sized Grids

  51. <div class="grid"> <div class="grid-cell">...</div> <div class="grid-cell">...</div> <div class="grid-cell grid-cell-half”> ...

    </div> </div> .grid { display: flex; } .grid-cell { flex: 1; } .grid-cell-half { width: 50% } HTML CSS
  52. How to measure the success of content optimisation

  53. Invite your users into your office and have them test

    your site
  54. Go out into the streets and ask people to test

    your site
  55. A-B test different functionality

  56. Content is King

  57. Time for obligatory kittens

  58. Site Performance

  59. There are three key types of performance that are important

    to a website
  60. Render performance - The time it takes for the browser

    to start rendering the page
  61. Page load performance - The time it takes to fully

    load a page and be fully interactive
  62. Perceived performance - the perception of the user of the

    performance of our site
  63. None
  64. Why should I care about the performance of the site?

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

    variety of internet connections
  66. and from a financial point of view, it can affect

    your business
  67. Amazon found every 100ms delay in loading a page cost

    them 1% in sales
  68. Google found an extra 500ms delay in loading of search

    results decreased traffic by 20%
  69. The trend of the past few years however is for

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

    Page Size (kB) 0 575 1150 1725 2300 April 2013 April 2014 April 2015 April 2016 Data from http://httparchive.org/interesting.php
  71. Average Page Weight >

  72. 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
  73. 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
  74. What steps can I take to improve site performance?

  75. Create a performance budget

  76. A performance budget relates to the size of the assets

    in our page
  77. 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/
  78. At the start of your project you need to understand

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

    aim to start rendering in 5 seconds on a slow 3G connection
  80. To start with we need to define ‘slow 3G’

  81. WebPageTest defines this as 96 kilobytes per second

  82. So as we want to load our site in 5

  83. 96KB x 5secs = 480KB

  84. We can then split 480KB across our assets

  85. Budget we defined HTML CSS JavaScript Images 30kb 40kb 50kb

  86. If we then decide we want to add web fonts

    to our website we then adjust our budget
  87. Budget we defined HTML CSS JavaScript Images Fonts 30kb 40kb

    50kb 300kb 60kb
  88. These figures seem very ambitious when we compare them against

    the industry averages but they are achievable
  89. Calculate your budget yourself using www.performancebudget.io

  90. Optimise how you load your assets

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

  92. <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>
  93. None
  94. To use the picture element on your site you will

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

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

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

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

    immediately visible to our users contribute to our page budget
  99. Defer loading of content

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

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

    loading of related content
  102. None
  103. None
  104. None
  105. The biggest danger of deferring content is that if JavaScript

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

    to defer loading
  108. The biggest advantage of deferring content is that we are

    able to reduce the size of what we initially deliver to our users
  109. In summary

  110. Building a responsive site is about much more than building

    a site that works across mobile, tablet and desktop
  111. It’s about adapting the user experience of a site so

    that regardless of the device the user still gets the best experience possible
  112. When building a responsive site we should spend time focusing

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

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

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

    found at www.jonathanfielding.com/talks/ responsive-design-in-2016/
  116. Flexbox examples based upon Solved by Flexbox by Philip Walton

  117. A special thanks goes out to to Charlie Fielding, Kate

    Montgomery and everyone at Beamly who helped me with putting these slides together.
  118. Thank you, any questions?