Responsive design @ bbc.co.uk
45
-
Upload
commuterjoy -
Category
Technology
-
view
3.544 -
download
1
Transcript of Responsive design @ bbc.co.uk
• Current mobile browser landscape
• Some demo’s
• Why responsive design is a Good Thing
Monday, 25 July 2011
In the old days*, screensize was proportional to
capability
* 2006
Monday, 25 July 2011
Low (incapable)
Monday, 25 July 2011
Hi(capable)
Monday, 25 July 2011
small big
Cap
abili
ty
Screensize
Desktops
Mobiles
Monday, 25 July 2011
So, we built example.com andm.example.com
Monday, 25 July 2011
Device explosion
Monday, 25 July 2011
SmallOnes
Monday, 25 July 2011
Squat Ones
Monday, 25 July 2011
Ginormous Ones
Monday, 25 July 2011
Tactile Ones
Monday, 25 July 2011
Voice Controlled
Ones
Monday, 25 July 2011
Retro Ones
Monday, 25 July 2011
Bandwidth-challengedOnes
2g
Monday, 25 July 2011
Quick Ones
4g (100 Mbit)
Monday, 25 July 2011
ExpensiveOnes
Monday, 25 July 2011
MonochromeOnes
Monday, 25 July 2011
Embedded Ones
Monday, 25 July 2011
3DOnes
Monday, 25 July 2011
These things are not mutually exclusive
Monday, 25 July 2011
Devices can be rotated to become tall or wide
Monday, 25 July 2011
Devices can connect to both wifi or 3g to
become quick or slow
Monday, 25 July 2011
Devices ship both touchscreens, trackballs
and microphones to provide
multiple inputs
Monday, 25 July 2011
Meanwhile,back at the ranch...
Monday, 25 July 2011
At same time the browser desktop market
became competitive again
Monday, 25 July 2011
Browsers became
platforms on which to build applications
Monday, 25 July 2011
http://www.w3.org/2009/dap/
Device API and Policies WG
Monday, 25 July 2011
Broke
small big
Cap
abili
ty
Screensize
Desktops
Mobiles
Monday, 25 July 2011
small big
Cap
abili
ty
Screensize
Desktops
Smartphones
Reformulated?
TV
Tablets
Featurephones
Netbooks
eReaders
Monday, 25 July 2011
“We take comfort in explicit requirements as
they allow us to compartmentalize the problems before us”
EthanMarco+e,ResponsiveWebDesign
Monday, 25 July 2011
“Flexible, device independent design for
the web”http://www.alistapart.com/articles/responsive-web-design/
Monday, 25 July 2011
• Screensize (orientation, resolution, viewport)
• Connection speed
• Colour
• Interaction (touch, mouse, voice)
• Performance (cpu, memory)
• Standards support (css, js, html5, DAP etc)
Feature design across axes
Monday, 25 July 2011
Why?
Monday, 25 July 2011
“even Google [is] not rich enough to support all of
the different mobile platforms...”
Vic Gundotra, VP of engineering at Google
Monday, 25 July 2011
Mobile is overtaking web traffic
Monday, 25 July 2011
Features built once andrelease simultaneously
on many platforms
Monday, 25 July 2011
Quickly adapt when a new device or feature
arrives
Monday, 25 July 2011
It’s CDN-able
Monday, 25 July 2011
One code base
Monday, 25 July 2011
One UX and a single conceptual model
across devices
Monday, 25 July 2011
A core content model across devices
Monday, 25 July 2011
Hosted on asingle URL space
Monday, 25 July 2011
Thanks
• Mark Hurrell
• John Cleveley
• Tom Maslen
• Barry Haynes
• Julian Kirby
• Anthony Sullivan
• Mel Seyer
• Stuart Bayston
• Heenesh Patel
• Adrian Hall
• Kate Milner
• Josh Chisholm
Monday, 25 July 2011
Photo Credits
• delafuente
• ivyfield
• rolikeusch
• donnie_bling
• griffintech
• garryknight
• ciat
• sgis
• fuckyeahinternetfridge
• 55Laney69
Monday, 25 July 2011
![Responsive Design Fundamentals [Read-Only] - … Design Fundame… · Responsive Design Fundamentals Carolyn Yon, PMI-ACP Development Manager ... Responsive Design • web design](https://static.fdocuments.net/doc/165x107/5b7c060b7f8b9adb4c8df8c4/responsive-design-fundamentals-read-only-design-fundame-responsive-design.jpg)
