The Mobile web, Responsive Web Design and a Q&A with Crossrail on the recent responsive web design project. The Q&A questions do not appear in this slideshow. This talk was presented at the 7th Cambridge Digital Marketing Conference - http://www.marketingconference.co.uk/ A shorter version of this talk was presented at Marketing Week Live in late June.

1. Responsive Web Design:
A Case Study with Crossrail where the web works
11th July 2013, Cambridge Digital Marketing Conference

2. www.studio24.net www.crossrail.co.uk
Tom LawsonSimon R Jones
Website Manager
Crossrail Ltd.
Founder & Technical Director
Studio 24 Ltd.
Hello
@simonrjones

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

4. 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

5. 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

6. 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:

7. 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

8. 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

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

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

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

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

13. 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

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

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

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

17. 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

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

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

20. 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

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

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

23. 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

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

25. 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

26. 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

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

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