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

Transcript

1. What does Responsive Web Design mean in 2016? Jonathan Fielding @jonthanfielding
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
28. Unfortunately, on the majority of smaller devices, navigation on a site becomes less obvious
31. Larger devices also have more space for content but don’t hide content completely on small devices
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
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
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
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
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 seconds…
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 360kb
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> element
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>
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
105. The biggest danger of deferring content is that if JavaScript fails to load the content that is deferred will not be loaded
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 https://philipwalton.github.io/solved-by-flexbox/
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?