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 Jones
Website Manager
Crossrail Ltd.
Founder & Technical Director
Studio 24 Ltd.
Hello
@simonrjones

www.studio24.net www.crossrail.co.uk
Studio 24
Award winning Cambridge-based digital agency
Founded in 1999
Specialists at web design and development

www.studio24.net www.crossrail.co.uk
Crossrail
New high frequency metro railway for London and the South
East
Travelling from Maidenhead and Heathrow in the west to
Shenfield and Abbey Wood in the east from 2018

www.studio24.net www.crossrail.co.uk
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

www.studio24.net www.crossrail.co.uk
Amazon, Wikipedia
and Facebook see
20% of their traffic
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%
Printinthemix
All Things D
Mobile Path to Purchase
Sources:

www.studio24.net www.crossrail.co.uk
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

www.studio24.net www.crossrail.co.uk
Crossrail traffic from mobile users
%
30
25
20
15
2012
JulJun Aug Sep Oct NovDec Jan Feb Mar Apr May Jun
15.9
22
27
2013

www.studio24.net www.crossrail.co.uk
508K
page views
136K
visitors
27%
mobile usage
303
mobile devices
543
different web
browsers

www.studio24.net www.crossrail.co.uk
100s of devices, 1000s of screen sizes

www.studio24.net www.crossrail.co.uk
And this is only the start…

www.studio24.net www.crossrail.co.uk
Responsive Web Design

www.studio24.net www.crossrail.co.uk
"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 flexible, 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, 2010
Source: Responsive web design, A List Apart

www.studio24.net www.crossrail.co.uk
Apps vs Mobile sites vs Responsive Web Design

www.studio24.net www.crossrail.co.uk
Native application, you build
it for each OS
Apps

www.studio24.net www.crossrail.co.uk
Separate website built for
mobile
Mobile-only sites

www.studio24.net www.crossrail.co.uk
Google now penalises a misconfigured mobile
site
Faulty redirects
Mobile-only error pages
Unplayable video
App download popups
Source: Google Webmaster Central Blog

www.studio24.net www.crossrail.co.uk
Responsive website
Adapting your content to the device that displays it

www.studio24.net www.crossrail.co.uk
Approaches to Responsive Web Design

www.studio24.net www.crossrail.co.uk
Flexible Design
CSS Media queries
Tells the browser:
“Change layout when browser width changes to X”
Triggered by breakpoints

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

www.studio24.net www.crossrail.co.uk
Breakpoints
600px480px 768px 992px

www.studio24.net www.crossrail.co.uk
It’s not lots of fixed layouts
Flexible layout is important
Don’t design fixed layouts to breakpoints
Let your content guide how the layout changes

www.studio24.net www.crossrail.co.uk
Crossrail Breakpoints
600px480px350px 768px
870px 992px 1100px

www.studio24.net www.crossrail.co.uk
Testing
You need real devices
Focus on a few test devices
You’re testing mobile browsers
Look at your stats

www.studio24.net www.crossrail.co.uk
Test devices
iPad 3
iPhone 5
Samsung Galaxy S3
Samsung Galaxy S2
Google Nexus 7
Samsung Galaxy S4
Google Nexus 4
HTC M7 One
BlackBerry 9900

www.studio24.net www.crossrail.co.uk
Crossrail Q&A

Thanks!
where the web works
www.studio24.net
@simonrjones
@studio24
Find this talk on www.slideshare.net/simonrjones
www.crossrail.co.uk
@crossrail