Slide 1
Slide 1 text
Untangling How We
Design Responsively
Jonathan Fielding
@jonthanfielding #UntangleResponsive
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
Current Responsive Design
techniques focus on mobile first
Slide 4
Slide 4 text
There has not been the same
focus on either the content
or the performance of our
site.
Slide 5
Slide 5 text
Our site content
Slide 6
Slide 6 text
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...”
Slide 7
Slide 7 text
We need to know our
content before we can design
Slide 8
Slide 8 text
Content must work across a
wide variety of devices
Slide 9
Slide 9 text
Device usage (Global averages)
65% 29% 6%
source: Statcounter http://gs.statcounter.com/#all-comparison-ww-monthly-201403-201504
Slide 10
Slide 10 text
Where possible, don’t rely on
global statistics, look at your
own sites usage stats
Slide 11
Slide 11 text
Prioritising Content
Slide 12
Slide 12 text
The first step is to audit your
site content
Slide 13
Slide 13 text
Content does not have to be
in the same order on every
device
Slide 14
Slide 14 text
Example: Different content
priorities for a restaurant
Small devices Large devices
Phone number Atmosphere
Directions Menu
Booking Booking
Menu Phone number
Atmosphere Directions
Slide 15
Slide 15 text
So this is how it could
look on mobile
Slide 16
Slide 16 text
and this is how it transforms to larger devices
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
I am more important on mobile
I am more important on desktop
Slide 19
Slide 19 text
@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;
}
}
Slide 20
Slide 20 text
The limitation here is that not all
older browsers support Flexbox.
Slide 21
Slide 21 text
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.
Slide 22
Slide 22 text
If in doubt about what your
user’s priorities are, invite
them in and ask them
Slide 23
Slide 23 text
Ensure your content is
discoverable
Slide 24
Slide 24 text
On larger devices navigating
a site is often really easy
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
Unfortunately, on the
majority of smaller devices
navigation on a site becomes
less obvious
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
Larger devices also have
more space for content but
don’t hide content
completely on small devices
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Instead think of ways in
which you can change the
functionality to better suit
the device
Slide 32
Slide 32 text
accordion on mobile
open content on desktop
Slide 33
Slide 33 text
accordion on mobile
tabbed content on desktop
Thanks to @monsika http://codepen.io/mpiotrowicz/pen/gocmu
Slide 34
Slide 34 text
new page on mobile
lightbox on desktop
Slide 35
Slide 35 text
simple scrollable
content on mobile
parallax on desktop
Slide 36
Slide 36 text
How to measure the
success of content
optimisation
Slide 37
Slide 37 text
Ask users to test your site
and observe
Slide 38
Slide 38 text
A-B test different
functionality
Slide 39
Slide 39 text
Content is King
Slide 40
Slide 40 text
Time for a cat break
Slide 41
Slide 41 text
Site Performance
Slide 42
Slide 42 text
What is performance?
Slide 43
Slide 43 text
– Google
“the action or process of
performing a task or function”
Slide 44
Slide 44 text
In relation to a website,
performance is the measure
of how long it takes to deliver
the content to the user
Slide 45
Slide 45 text
There are two key types of
performance that are
important to a website
Slide 46
Slide 46 text
Page load performance -
The time it takes to fully load
a page
Slide 47
Slide 47 text
Perceived performance -
the perception of the user of
the performance of our site
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
Why should I care about
the performance of the
site?
Slide 50
Slide 50 text
A responsive site is expected
to work on a wide variety of
internet connections
Slide 51
Slide 51 text
The trend of the past few
years however is for pages to
increase in weight
Slide 52
Slide 52 text
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
Slide 53
Slide 53 text
Page weight by content type
March 2015
March 2012
Charts from http://httparchive.org/interesting.php
Slide 54
Slide 54 text
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
Slide 55
Slide 55 text
How can I justify spending
the time on performance?
Slide 56
Slide 56 text
• 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%
Slide 57
Slide 57 text
What steps can I take to
improve site performance?
Slide 58
Slide 58 text
Optimise how you load
your assets
Slide 59
Slide 59 text
Provide different images for
different viewport sizes using
the element
Slide 60
Slide 60 text
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
To use the picture element on
your site you will need to
include the polyfill which is
called “picturefill”
Slide 63
Slide 63 text
Defer loading of both image
and video to improve the
initial page load
Slide 64
Slide 64 text
The most common content to defer
loading is images
Slide 65
Slide 65 text
In cases where loading assets
was deferred, it is important
to ensure a suitable
placeholder is in place
Slide 66
Slide 66 text
Defer loading of
content
Slide 67
Slide 67 text
The content is the heart of
our site but not all content is
created equal
Slide 68
Slide 68 text
Lets look at an example of
how Metro defer the
loading of related content
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
Another example where
content is deferred is
Facebook
Slide 73
Slide 73 text
Facebook choose to defer loading the
majority of the content of their page
Slide 74
Slide 74 text
The biggest danger of
deferring content is that if
JavaScript fails to load the
content that is deferred will
not be loaded
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
We should therefore be
careful with what content we
choose to defer loading
Slide 77
Slide 77 text
Optimise how you load
your JavaScript
Slide 78
Slide 78 text
We can separate our
JavaScript into two distinct
types
Slide 79
Slide 79 text
Critical JavaScript is the
JavaScript required to
initialise our page.
Slide 80
Slide 80 text
Add events which track how
user tries to interact with the
page
Slide 81
Slide 81 text
Show states which let the
user know something is
happening while we still wait
for Main JS to load
Slide 82
Slide 82 text
Trigger loading of the Main
JS when the rest of the page
has loaded
Slide 83
Slide 83 text
Then we have our main
JavaScript,
Slide 84
Slide 84 text
Fire any events that had been
deferred
Slide 85
Slide 85 text
Replace the deferred event
listeners with the real ones
Slide 86
Slide 86 text
Include all the rest of the
functionality required for the
site to function
Slide 87
Slide 87 text
How this works in practice
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
So how do I do it?
Slide 91
Slide 91 text
Use a library called CriticalJS
Slide 92
Slide 92 text
Download CriticalJS from
https://github.com/jonathan-
fielding/criticaljs
Slide 93
Slide 93 text
Load the CriticalJS library
Tell it where your main JavaScript is
Slide 94
Slide 94 text
Click Me
Add data attribute specifying
what events are to be deferred
Slide 95
Slide 95 text
Then in your main JavaScript
Slide 96
Slide 96 text
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
Slide 97
Slide 97 text
Measure your performance
improvements
Slide 98
Slide 98 text
It is important to regularly
measure the site
performance
Slide 99
Slide 99 text
The simplest tool for
measuring performance is
www.webpagetest.org
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
Need for speed
Slide 104
Slide 104 text
In Summary
Slide 105
Slide 105 text
When building a responsive
site we should spend time
focusing on the content and
performance
Slide 106
Slide 106 text
Our content should be
prioritised and discoverable
Slide 107
Slide 107 text
And the perception of our
site to our users should be
that it loads fast
Slide 108
Slide 108 text
Full examples of everything we have
talked about can be found at
www.jonathanfielding.com/untangle-
responsive
Slide 109
Slide 109 text
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.
Slide 110
Slide 110 text
Thank you,
any questions?