This document discusses reimagining responsive design by focusing on content and performance. It recommends auditing site content and prioritizing it differently for different devices using techniques like CSS Flexbox. It also stresses the importance of page load performance and perceived performance. Strategies to improve performance include optimizing asset loading with responsive images, deferring loading of non-critical content and JavaScript, and measuring performance regularly. The goal is for responsive sites to work well across devices while maintaining fast load times.

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 mobileopen content on desktop

33. accordion on mobiletabbed content on desktop
Thanks to @monsika http://codepen.io/mpiotrowicz/pen/gocmu

34. new page on mobilelightbox 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
AveragePageSize(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 2015March 2012
Charts from http://httparchive.org/interesting.php

54. The average time to start rendering is also
increasing
Renderstart(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. Measure your performance
improvements

91. It is important to regularly
measure the site
performance

92. The simplest tool for
measuring performance is
www.webpagetest.org

96. Need for speed

97. In Summary

98. When building a responsive
site we should spend time
focusing on the content and
performance

99. Our content should be
prioritised and discoverable

100. And the perception of our
site to our users should be
that it loads fast

101. Full examples of everything we have
talked about can be found at
www.jonathanfielding.com/
fowd2015

102. 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.

103. Thank you,
any questions?