Slide 1
Slide 1 text
What does Responsive
Web Design mean in 2016?
Jonathan Fielding @jonthanfielding
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, Echo.js, CriticalJS, FT’s
Polyfill Service, Doccy among many projects
• Lover and user of ‘the Twitter’
Slide 3
Slide 3 text
At the heart of every
progressive web app is a
responsive site
Slide 4
Slide 4 text
Built to be mobile first
Slide 5
Slide 5 text
.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
Slide 6
Slide 6 text
Browsers have been busy
implementing new features
that enable us to build better
sites and have more fun while
doing it!
Slide 7
Slide 7 text
Our site content
Slide 8
Slide 8 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...”
http://everydaydesigner.net/design/change-your-focus-and-design-content-first
Slide 9
Slide 9 text
Content must work across a
wide variety of devices
Slide 10
Slide 10 text
Device usage (Global averages)
54% 41% 5%
source: Statcounter http://gs.statcounter.com/#all-comparison-ww-monthly-201504-201604
Slide 11
Slide 11 text
Where possible, don’t rely on
global statistics, look at your
own site’s usage stats
Slide 12
Slide 12 text
Auditing your content
Slide 13
Slide 13 text
An audit of your content is
simply an inventory of what
you want to include in your
page
Slide 14
Slide 14 text
The audit of our content
needs to be done before you
start your UX or Design
Slide 15
Slide 15 text
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/
Slide 16
Slide 16 text
And you should include your
stakeholders in the auditing
process
Slide 17
Slide 17 text
Prioritising Content
Slide 18
Slide 18 text
Content does not have to be
in the same order on every
device
Slide 19
Slide 19 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 20
Slide 20 text
So this is how it could
look on mobile
Slide 21
Slide 21 text
and this is how it transforms to larger devices
Slide 22
Slide 22 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 23
Slide 23 text
I am more important on mobile
I am more important on desktop
Slide 24
Slide 24 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 25
Slide 25 text
Ensuring content is
discoverable
Slide 26
Slide 26 text
On larger devices navigating
a site is often really easy
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Unfortunately, on the
majority of smaller devices,
navigation on a site becomes
less obvious
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Larger devices also have
more space for content but
don’t hide content
completely on small devices
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
Instead think of ways in
which you can change the
functionality to better suit
the device
Slide 34
Slide 34 text
Laying out your content
Slide 35
Slide 35 text
Responsive design has lead
us to building our
components to be fluid
Slide 36
Slide 36 text
Enabling our components to
scale to the different device
sizes we are aiming to
support
Slide 37
Slide 37 text
Only recently however have
we been able to do this
without resorting to hacks
Slide 38
Slide 38 text
Input Add-ons
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Go
.input-wrap {
display: flex;
}
.input-wrap__field {
flex: 1;
/* field styles */
}
.input-wrap__button {
/* item styles */
}
HTML CSS
Slide 41
Slide 41 text
Vertical Centered
Content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
I'm Centered!
This box is vertically and horizontally centered
Slide 44
Slide 44 text
Sticky Footer
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
...
...
...
.site {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
}
.site-content {
flex: 1;
}
HTML CSS
Slide 47
Slide 47 text
Grids
Slide 48
Slide 48 text
Basic Grids
Slide 49
Slide 49 text
...
...
Slide 50
Slide 50 text
Individual Sized Grids
Slide 51
Slide 51 text
...
...
Slide 52
Slide 52 text
How to measure the
success of content
optimisation
Slide 53
Slide 53 text
Invite your users into your
office and have them test
your site
Slide 54
Slide 54 text
Go out into the streets and
ask people to test your site
Slide 55
Slide 55 text
A-B test different
functionality
Slide 56
Slide 56 text
Content is King
Slide 57
Slide 57 text
Time for obligatory kittens
Slide 58
Slide 58 text
Site Performance
Slide 59
Slide 59 text
There are three key types of
performance that are
important to a website
Slide 60
Slide 60 text
Render performance -
The time it takes for the
browser to start rendering
the page
Slide 61
Slide 61 text
Page load performance -
The time it takes to fully load
a page and be fully
interactive
Slide 62
Slide 62 text
Perceived performance -
the perception of the user of
the performance of our site
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
Why should I care about
the performance of the
site?
Slide 65
Slide 65 text
A responsive site is expected
to work on a wide variety of
internet connections
Slide 66
Slide 66 text
and from a financial point of
view, it can affect your
business
Slide 67
Slide 67 text
Amazon found every 100ms
delay in loading a page cost
them 1% in sales
Slide 68
Slide 68 text
Google found an extra
500ms delay in loading of
search results decreased
traffic by 20%
Slide 69
Slide 69 text
The trend of the past few
years however is for pages to
increase in weight
Slide 70
Slide 70 text
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
Slide 71
Slide 71 text
Average Page
Weight
>
Slide 72
Slide 72 text
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
Slide 73
Slide 73 text
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
Slide 74
Slide 74 text
What steps can I take to
improve site performance?
Slide 75
Slide 75 text
Create a performance
budget
Slide 76
Slide 76 text
A performance budget
relates to the size of the
assets in our page
Slide 77
Slide 77 text
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/
Slide 78
Slide 78 text
At the start of your project
you need to understand the
metrics you want to achieve
Slide 79
Slide 79 text
As we are building a
responsive site, today’s
example will aim to start
rendering in 5 seconds on a
slow 3G connection
Slide 80
Slide 80 text
To start with we need to
define ‘slow 3G’
Slide 81
Slide 81 text
WebPageTest defines this as
96 kilobytes per second
Slide 82
Slide 82 text
So as we want to load our site
in 5 seconds…
Slide 83
Slide 83 text
96KB x 5secs = 480KB
Slide 84
Slide 84 text
We can then split 480KB
across our assets
Slide 85
Slide 85 text
Budget we defined
HTML CSS JavaScript Images
30kb 40kb 50kb 360kb
Slide 86
Slide 86 text
If we then decide we want to
add web fonts to our website
we then adjust our budget
Slide 87
Slide 87 text
Budget we defined
HTML CSS JavaScript Images Fonts
30kb 40kb 50kb 300kb 60kb
Slide 88
Slide 88 text
These figures seem very
ambitious when we compare
them against the industry
averages but they are
achievable
Slide 89
Slide 89 text
Calculate your budget
yourself using
www.performancebudget.io
Slide 90
Slide 90 text
Optimise how you load
your assets
Slide 91
Slide 91 text
Provide different images for
different viewport sizes using
the element
Slide 92
Slide 92 text
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
To use the picture element on your site
you will need to include the polyfill which
is called “picturefill”
Slide 95
Slide 95 text
Defer loading of both image
and video to improve the
initial page load
Slide 96
Slide 96 text
The most common content to defer
loading is images
Slide 97
Slide 97 text
In cases where loading assets
was deferred, it is important
to ensure a suitable
placeholder is in place
Slide 98
Slide 98 text
In deferring the loading of
our content only those
images immediately visible to
our users contribute to our
page budget
Slide 99
Slide 99 text
Defer loading of
content
Slide 100
Slide 100 text
The content is the heart of
our site but not all content is
created equal
Slide 101
Slide 101 text
Lets look at an example of
how Metro defer the
loading of related content
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
The biggest danger of
deferring content is that if
JavaScript fails to load the
content that is deferred will
not be loaded
Slide 106
Slide 106 text
No content
Slide 107
Slide 107 text
We should therefore be
careful with what content we
choose to defer loading
Slide 108
Slide 108 text
The biggest advantage of
deferring content is that we
are able to reduce the size of
what we initially deliver to
our users
Slide 109
Slide 109 text
In summary
Slide 110
Slide 110 text
Building a responsive site is
about much more than
building a site that works
across mobile, tablet and
desktop
Slide 111
Slide 111 text
It’s about adapting the user
experience of a site so that
regardless of the device the
user still gets the best
experience possible
Slide 112
Slide 112 text
When building a responsive
site we should spend time
focusing on the content and
performance
Slide 113
Slide 113 text
Our content should be
prioritised and discoverable
Slide 114
Slide 114 text
And the perception of our
site to our users should be
that it loads fast
Slide 115
Slide 115 text
Full examples of everything we have
talked about can be found at
www.jonathanfielding.com/talks/
responsive-design-in-2016/
Slide 116
Slide 116 text
Flexbox examples based upon Solved by Flexbox
by Philip Walton
https://philipwalton.github.io/solved-by-flexbox/
Slide 117
Slide 117 text
A special thanks goes out to to Charlie
Fielding, Kate Montgomery and everyone at
Beamly who helped me with putting these
slides together.
Slide 118
Slide 118 text
Thank you,
any questions?