Your SlideShare is downloading. ×

Responsive design @ bbc.co.uk

3,537
views

Published on

Published in: Technology, Design

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,537
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Responsive News <matt.chadburn@bbc.co.uk>, 2011-07 Lead Web Developer BBC NewsMonday, 25 July 2011
  • 2. • Current mobile browser landscape • Some demo’s • Why responsive design is a Good ThingMonday, 25 July 2011
  • 3. In the old days*, screensize was proportional to capability * 2006Monday, 25 July 2011
  • 4. Low (incapable)Monday, 25 July 2011
  • 5. Hi (capable)Monday, 25 July 2011
  • 6. Desktops Capability Mobiles small big ScreensizeMonday, 25 July 2011
  • 7. So, we built example.com and m.example.comMonday, 25 July 2011
  • 8. Device explosionMonday, 25 July 2011
  • 9. Small OnesMonday, 25 July 2011
  • 10. Squat OnesMonday, 25 July 2011
  • 11. Ginormous OnesMonday, 25 July 2011
  • 12. Tactile OnesMonday, 25 July 2011
  • 13. Voice Controlled OnesMonday, 25 July 2011
  • 14. Retro OnesMonday, 25 July 2011
  • 15. 2g Bandwidth-challenged OnesMonday, 25 July 2011
  • 16. Quick Ones 4g (100 Mbit)Monday, 25 July 2011
  • 17. Expensive OnesMonday, 25 July 2011
  • 18. Monochrome OnesMonday, 25 July 2011
  • 19. Embedded OnesMonday, 25 July 2011
  • 20. 3D OnesMonday, 25 July 2011
  • 21. These things are not mutually exclusiveMonday, 25 July 2011
  • 22. Devices can be rotated to become tall or wideMonday, 25 July 2011
  • 23. Devices can connect to both wifi or 3g to become quick or slowMonday, 25 July 2011
  • 24. Devices ship both touchscreens, trackballs and microphones to provide multiple inputsMonday, 25 July 2011
  • 25. Meanwhile, back at the ranch...Monday, 25 July 2011
  • 26. At same time the browser desktop market became competitive againMonday, 25 July 2011
  • 27. Browsers became platforms on which to build applicationsMonday, 25 July 2011
  • 28. Device API and Policies WG http://www.w3.org/2009/dap/Monday, 25 July 2011
  • 29. Broke Desktops Capability Mobiles small big ScreensizeMonday, 25 July 2011
  • 30. Reformulated? Desktops Smart phones Capability Tablets Netbooks TV Feature phones eReaders small big ScreensizeMonday, 25 July 2011
  • 31. “We take comfort in explicit requirements as they allow us to compartmentalize the problems before us” Ethan
Marco+e,
Responsive
Web
DesignMonday, 25 July 2011
  • 32. “Flexible, device independent design for the web” http://www.alistapart.com/articles/responsive-web-design/Monday, 25 July 2011
  • 33. Feature design across axes • Screensize (orientation, resolution, viewport) • Connection speed • Colour • Interaction (touch, mouse, voice) • Performance (cpu, memory) • Standards support (css, js, html5, DAP etc)Monday, 25 July 2011
  • 34. Why?Monday, 25 July 2011
  • 35. “even Google [is] not rich enough to support all of the different mobile platforms...” Vic Gundotra,VP of engineering at GoogleMonday, 25 July 2011
  • 36. Mobile is overtaking web trafficMonday, 25 July 2011
  • 37. Features built once and release simultaneously on many platformsMonday, 25 July 2011
  • 38. Quickly adapt when a new device or feature arrivesMonday, 25 July 2011
  • 39. It’s CDN-ableMonday, 25 July 2011
  • 40. One code baseMonday, 25 July 2011
  • 41. One UX and a single conceptual model across devicesMonday, 25 July 2011
  • 42. A core content model across devicesMonday, 25 July 2011
  • 43. Hosted on a single URL spaceMonday, 25 July 2011
  • 44. Thanks • Mark Hurrell • Mel Seyer • John Cleveley • Stuart Bayston • Tom Maslen • Heenesh Patel • Barry Haynes • Adrian Hall • Julian Kirby • Kate Milner • Anthony Sullivan • Josh ChisholmMonday, 25 July 2011
  • 45. Photo Credits • delafuente • garryknight • ivyfield • ciat • rolikeusch • sgis • donnie_bling • fuckyeahinternetfridge • griffintech • 55Laney69Monday, 25 July 2011