Reimagining How We Design Responsively at Web Standards

This is a more technical version of the talk I gave at Future of Web Design about how to start building better responsive sites.

Transcript

1. Reimagining How We Design Responsively Jonathan Fielding @jonthanfielding
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
26. Unfortunately, on the majority of smaller devices navigation on a site becomes less obvious
29. Larger devices also have more space for content but don’t hide content completely on small devices
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
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>
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
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
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
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
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/ fowd2015
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?