Responsive Web Design: A Case Study with Crossrail


Published on

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 -

A shorter version of this talk was presented at Marketing Week Live in late June.

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Responsive Web Design: A Case Study with Crossrail

  1. 1. Responsive Web Design: A Case Study with Crossrail where the web works 11th July 2013, Cambridge Digital Marketing Conference
  2. 2. Tom LawsonSimon R Jones Website Manager Crossrail Ltd. Founder & Technical Director Studio 24 Ltd. Hello @simonrjones
  3. 3. Studio 24 Award winning Cambridge-based digital agency Founded in 1999 Specialists at web design and development
  4. 4. 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. 5. 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. 6. 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. 7. 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. 8. 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. 9. 508K page views 136K visitors 27% mobile usage 303 mobile devices 543 different web browsers
  10. 10. 100s of devices, 1000s of screen sizes
  11. 11. And this is only the start…
  12. 12. Responsive Web Design
  13. 13. "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. 14. Apps vs Mobile sites vs Responsive Web Design
  15. 15. Native application, you build it for each OS Apps
  16. 16. Separate website built for mobile Mobile-only sites
  17. 17. Google now penalises a misconfigured mobile site Faulty redirects Mobile-only error pages Unplayable video App download popups Source: Google Webmaster Central Blog
  18. 18. Responsive website Adapting your content to the device that displays it
  19. 19. Approaches to Responsive Web Design
  20. 20. Flexible Design CSS Media queries Tells the browser: “Change layout when browser width changes to X” Triggered by breakpoints
  21. 21. Example
  22. 22. Breakpoints 600px480px 768px 992px
  23. 23. 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. 24. Crossrail Breakpoints 600px480px350px 768px 870px 992px 1100px
  25. 25. Testing You need real devices Focus on a few test devices You’re testing mobile browsers Look at your stats
  26. 26. 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. 27. Crossrail Q&A
  28. 28. Thanks! where the web works @simonrjones @studio24 Find this talk on @crossrail
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.