Responsive Web Design: A Case Study with Crossrail

Responsive Web Design: A Case Study with Crossrail where the web works

11th July 2013, Cambridge Digital Marketing Conference

www.studio24.net www.crossrail.co.uk

Tom LawsonSimon R JonesWebsite ManagerCrossrail Ltd.

Founder & Technical DirectorStudio 24 Ltd.

Hello

@simonrjones


Studio 24

Award winning Cambridge-based digital agency

Founded in 1999

Specialists at web design and development


Crossrail

New high frequency metro railway for London and the South East

Travelling from Maidenhead and Heathrow in the west to Shen!eld and Abbey Wood in the east from 2018


Why does mobile matter?

of UK population own smartphones

of smartphone owners use them to access websites

make purchases online via smartphones

60%51%

34%

60% 51% 34%

Source: eDigitalResearch

http://www.edigitalresearch.com/news/item/nid/655462669


Amazon, Wikipedia and Facebook see 20% of their tra"c from mobile users

46% of shoppers use their mobile to conduct pre purchase research

80% of B2B companies take an ad hoc approach to mobile

Only 33% of companies have a mobile-optimized site

20%46%

80%33%

PrintinthemixAll Things DMobile Path to Purchase

Sources:

http://printinthemix.com/Fastfacts/Show/622

http://allthingsd.com/20130325/among-big-properties-apple-and-amazon-have-greatest-portions-of-mobile-only-users/

http://www.mobilepathtopurchase.com/wp-content/uploads/2013/04/xAd_Telmetrics_Mobile_Path_to_Purchase_Press_Release_2013_US_General.pdf


Why do people access websites via mobile?

Answer questions quickly

Get information when away from computer

Pass time while waiting

Avoid missing out on things when on the go

Source: Think with Google

http://www.thinkwithgoogle.com/mobileplanet/en/



Crossrail tra!c from mobile users

%

30

25

20

15

2012JulJun Aug Sep Oct Nov Dec Jan Feb Mar Apr May Jun

15.9

22

27

2013


508K page views

136K visitors

27% mobile usage

303 mobile devices

543 di#erent web browsers


100s of devices, 1000s of screen sizes


And this is only the start…


Responsive Web Design


"Rather than tailoring disconnected designs to .. an ever-increasing number of web devices, we can treat them as facets of the same experience.

We .. make them not only more !exible, but more adaptive to the media that renders them.

In short, we need to practice responsive web design."

Ethan Marcotte, Responsive Web Design, A List Apart, May 25th, 2010Source: Responsive web design, A List Apart

http://alistapart.com/article/responsive-web-design



Apps vs Mobile sites vs Responsive Web Design


Native application, you build it for each OS

Apps


Separate website built for mobile

Mobile-only sites


Google now penalises a miscon"gured mobile site

Faulty redirects

Mobile-only error pages

Unplayable video

App download popups

Source: Google Webmaster Central Blog

http://googlewebmastercentral.blogspot.co.uk/2013/06/changes-in-rankings-of-smartphone_11.html


Responsive websiteAdapting your content to the device that displays it


Approaches to Responsive Web Design


Flexible Design

CSS Media queries

Tells the browser: “Change layout when browser width changes to X”

Triggered by breakpoints


Example


Breakpoints

600px480px 768px 992px


It’s not lots of "xed layouts

Flexible layout is important

Don’t design !xed layouts to breakpoints

Let your content guide how the layout changes


Crossrail Breakpoints

600px480px350px 768px

870px 992px 1100px


Testing

You need real devices

Focus on a few test devices

You’re testing mobile browsers

Look at your stats


Test devices

iPad 3iPhone 5

Samsung Galaxy S3

Samsung Galaxy S2Google Nexus 7

Samsung Galaxy S4 Google Nexus 4

HTC M7 OneBlackBerry 9900


Crossrail Q&A

Thanks!

where the web workswww.studio24.net@simonrjones@studio24

Find this talk on www.slideshare.net/simonrjones

www.crossrail.co.uk@crossrail

Technology

Responsive Web Design: A Case Study with Crossrail