re-imagining how we design responsively (jonathan fielding)
TRANSCRIPT
Reimagining How We Design Responsively
Jonathan Fielding @jonthanfielding
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
Current Responsive Design techniques focus on mobile first
There has not been the same focus on either the content or the performance of our
site.
Our site content
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...”
We need to know our content before we can design
Content must work across a wide variety of devices
Device usage (Global averages)
65% 29% 6%
source: Statcounter http://gs.statcounter.com/#all-comparison-ww-monthly-201403-201504
Where possible, don’t rely on global statistics, look at your
own sites usage stats
Prioritising Content
The first step is to audit your site content
Content does not have to be in the same order on every
device
Example: Different content priorities for a restaurant
Small devices Large devices
Phone number Atmosphere
Directions Menu
Booking Booking
Menu Phone number
Atmosphere Directions
So this is how it could look on mobile
and this is how it transforms to larger devices
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
<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>
@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; } }
The limitation here is that not all older browsers support Flexbox.
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.
If in doubt about what your user’s priorities are, invite
them in and ask them
Ensure your content is discoverable
On larger devices navigating a site is often really easy
Unfortunately, on the majority of smaller devices
navigation on a site becomes less obvious
Larger devices also have more space for content but
don’t hide content completely on small devices
Instead think of ways in which you can change the functionality to better suit
the device
accordion on mobileopen content on desktop
accordion on mobiletabbed content on desktop
Thanks to @monsika http://codepen.io/mpiotrowicz/pen/gocmu
new page on mobilelightbox on desktop
simple scrollable content on mobile
parallax on desktop
How to measure the success of content
optimisation
Ask users to test your site and observe
A-B test different functionality
Content is King
Time for a cat break
Site Performance
What is performance?
“the action or process of performing a task or function”
In relation to a website, performance is the measure
of how long it takes to deliver the content to the user
There are two key types of performance that are
important to a website
Page load performance - The time it takes to fully load
a page
Perceived performance - the perception of the user of the performance of our site
Why should I care about the performance of the
site?
A responsive site is expected to work on a wide variety of
internet connections
The trend of the past few years however is for pages to
increase in weight
Average page weight has been increasing year on year
Aver
age
Page
Siz
e (k
B)
0
550
1100
1650
2200
March 2012 March 2013 March 2014 March 2015
Data from http://httparchive.org/interesting.php
Page weight by content typeMarch 2015March 2012
Charts from http://httparchive.org/interesting.php
The average time to start rendering is also increasing
Rend
er s
tart
(ms)
0
775
1550
2325
3100
August 2013 March 2014 August 2014 March 2015
Data from http://httparchive.org/interesting.php
How can I justify spending the time on performance?
• 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%
What steps can I take to improve site performance?
Optimise how you load your assets
Provide different images for different viewport sizes using
the <picture> element
<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>
To use the picture element on your site you will need to
include the polyfill which is called “picturefill”
Defer loading of both image and video to improve the
initial page load
The most common content to defer loading is images
In cases where loading assets was deferred, it is important
to ensure a suitable placeholder is in place
Defer loading of content
The content is the heart of our site but not all content is
created equal
Lets look at an example of how Metro defer the
loading of related content
Another example where content is deferred is
Facebook choose to defer loading the majority of the content of their page
The biggest danger of deferring content is that if JavaScript fails to load the
content that is deferred will not be loaded
We should therefore be careful with what content we
choose to defer loading
Optimise how you load your JavaScript
We can separate our JavaScript into two distinct
types
Critical JavaScript is the JavaScript required to
initialise our page.
Add events which track how user tries to interact with the
page
Show states which let the user know something is
happening while we still wait for Main JS to load
Trigger loading of the Main JS when the rest of the page
has loaded
Then we have our main JavaScript,
Fire any events that had been deferred
Replace the deferred event listeners with the real ones
Include all the rest of the functionality required for the
site to function
How this works in practice
Measure your performance improvements
It is important to regularly measure the site
performance
Need for speed
In Summary
When building a responsive site we should spend time
focusing on the content and performance
Our content should be prioritised and discoverable
And the perception of our site to our users should be
that it loads fast
Full examples of everything we have talked about can be found at www.jonathanfielding.com/
fowd2015
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.
Thank you, any questions?