Responsive News                       <matt.chadburn@bbc.co.uk>, 2011-07                        Lead Web Developer BBC New...
• Current mobile browser landscape                       • Some demo’s                       • Why responsive design is a ...
In the old days*,                        screensize was                       proportional to                           ca...
Low                       (incapable)Monday, 25 July 2011
Hi     (capable)Monday, 25 July 2011
Desktops                       Capability                                       Mobiles                             small ...
So, we built                       example.com and                        m.example.comMonday, 25 July 2011
Device explosionMonday, 25 July 2011
Small                       OnesMonday, 25 July 2011
Squat OnesMonday, 25 July 2011
Ginormous OnesMonday, 25 July 2011
Tactile                        OnesMonday, 25 July 2011
Voice       Controlled         OnesMonday, 25 July 2011
Retro OnesMonday, 25 July 2011
2g             Bandwidth-challenged                    OnesMonday, 25 July 2011
Quick Ones                       4g (100 Mbit)Monday, 25 July 2011
Expensive             OnesMonday, 25 July 2011
Monochrome                          OnesMonday, 25 July 2011
Embedded            OnesMonday, 25 July 2011
3D                       OnesMonday, 25 July 2011
These things are not                        mutually exclusiveMonday, 25 July 2011
Devices can be rotated                       to become tall or wideMonday, 25 July 2011
Devices can connect to                     both wifi or 3g to                   become quick or slowMonday, 25 July 2011
Devices ship both                       touchscreens, trackballs                         and microphones to               ...
Meanwhile,                       back at the ranch...Monday, 25 July 2011
At same time the                browser desktop market                  became competitive                         againMo...
Browsers                          became                       platforms on                       which to build          ...
Device API and Policies WG                       http://www.w3.org/2009/dap/Monday, 25 July 2011
Broke                                     Desktops                       Capability                                     Mo...
Reformulated?                                                                Desktops                                     ...
“We take comfort in                   explicit requirements as                       they allow us to                    c...
“Flexible, device                       independent design for                               the web”                     ...
Feature design across axes               • Screensize (orientation, resolution, viewport)               • Connection speed...
Why?Monday, 25 July 2011
“even Google [is] not rich                   enough to support all of                     the different mobile            ...
Mobile is overtaking                          web trafficMonday, 25 July 2011
Features built once and                        release simultaneously                          on many platformsMonday, 25...
Quickly adapt when a                       new device or feature                              arrivesMonday, 25 July 2011
It’s CDN-ableMonday, 25 July 2011
One code baseMonday, 25 July 2011
One UX and a single                        conceptual model                          across devicesMonday, 25 July 2011
A core content model                          across devicesMonday, 25 July 2011
Hosted on a                       single URL spaceMonday, 25 July 2011
Thanks                       • Mark Hurrell       • Mel Seyer                       • John Cleveley      • Stuart Bayston ...
Photo Credits                       • delafuente     • garryknight                       • ivyfield        • ciat          ...
Upcoming SlideShare
Loading in …5
×

Responsive design @ bbc.co.uk

3,963 views

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,963
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
25
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Responsive design @ bbc.co.uk

  1. 1. Responsive News <matt.chadburn@bbc.co.uk>, 2011-07 Lead Web Developer BBC NewsMonday, 25 July 2011
  2. 2. • Current mobile browser landscape • Some demo’s • Why responsive design is a Good ThingMonday, 25 July 2011
  3. 3. In the old days*, screensize was proportional to capability * 2006Monday, 25 July 2011
  4. 4. Low (incapable)Monday, 25 July 2011
  5. 5. Hi (capable)Monday, 25 July 2011
  6. 6. Desktops Capability Mobiles small big ScreensizeMonday, 25 July 2011
  7. 7. So, we built example.com and m.example.comMonday, 25 July 2011
  8. 8. Device explosionMonday, 25 July 2011
  9. 9. Small OnesMonday, 25 July 2011
  10. 10. Squat OnesMonday, 25 July 2011
  11. 11. Ginormous OnesMonday, 25 July 2011
  12. 12. Tactile OnesMonday, 25 July 2011
  13. 13. Voice Controlled OnesMonday, 25 July 2011
  14. 14. Retro OnesMonday, 25 July 2011
  15. 15. 2g Bandwidth-challenged OnesMonday, 25 July 2011
  16. 16. Quick Ones 4g (100 Mbit)Monday, 25 July 2011
  17. 17. Expensive OnesMonday, 25 July 2011
  18. 18. Monochrome OnesMonday, 25 July 2011
  19. 19. Embedded OnesMonday, 25 July 2011
  20. 20. 3D OnesMonday, 25 July 2011
  21. 21. These things are not mutually exclusiveMonday, 25 July 2011
  22. 22. Devices can be rotated to become tall or wideMonday, 25 July 2011
  23. 23. Devices can connect to both wifi or 3g to become quick or slowMonday, 25 July 2011
  24. 24. Devices ship both touchscreens, trackballs and microphones to provide multiple inputsMonday, 25 July 2011
  25. 25. Meanwhile, back at the ranch...Monday, 25 July 2011
  26. 26. At same time the browser desktop market became competitive againMonday, 25 July 2011
  27. 27. Browsers became platforms on which to build applicationsMonday, 25 July 2011
  28. 28. Device API and Policies WG http://www.w3.org/2009/dap/Monday, 25 July 2011
  29. 29. Broke Desktops Capability Mobiles small big ScreensizeMonday, 25 July 2011
  30. 30. Reformulated? Desktops Smart phones Capability Tablets Netbooks TV Feature phones eReaders small big ScreensizeMonday, 25 July 2011
  31. 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. 32. “Flexible, device independent design for the web” http://www.alistapart.com/articles/responsive-web-design/Monday, 25 July 2011
  33. 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. 34. Why?Monday, 25 July 2011
  35. 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. 36. Mobile is overtaking web trafficMonday, 25 July 2011
  37. 37. Features built once and release simultaneously on many platformsMonday, 25 July 2011
  38. 38. Quickly adapt when a new device or feature arrivesMonday, 25 July 2011
  39. 39. It’s CDN-ableMonday, 25 July 2011
  40. 40. One code baseMonday, 25 July 2011
  41. 41. One UX and a single conceptual model across devicesMonday, 25 July 2011
  42. 42. A core content model across devicesMonday, 25 July 2011
  43. 43. Hosted on a single URL spaceMonday, 25 July 2011
  44. 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. 45. Photo Credits • delafuente • garryknight • ivyfield • ciat • rolikeusch • sgis • donnie_bling • fuckyeahinternetfridge • griffintech • 55Laney69Monday, 25 July 2011

×