Date post: | 06-May-2015 |
Category: |
Technology |
Upload: | simon-jones |
View: | 797 times |
Download: | 1 times |
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
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 Shen!eld 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 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:
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 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
www.studio24.net www.crossrail.co.uk
508K page views
136K visitors
27% mobile usage
303 mobile devices
543 di#erent 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 !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
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 miscon"gured 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 websiteAdapting 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 "xed layouts
Flexible layout is important
Don’t design !xed 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 3iPhone 5
Samsung Galaxy S3
Samsung Galaxy S2Google Nexus 7
Samsung Galaxy S4 Google Nexus 4
HTC M7 OneBlackBerry 9900
www.studio24.net www.crossrail.co.uk
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