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?

– Google

“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

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

The simplest tool for measuring performance is

www.webpagetest.org

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?