bbc news: responsive web design and mustard

ResponsiveWeb Designand Mustard

24 May 2013

css-maintenables.fr

•Being a developer in London

•Responsive at BBC: why?

•And How?

iPad

Wine

Crêpière

•Culture (gigs, museums, theatres…)

•Pubs, cocktail bars…

•Web events and conferences

•“front-end developer” is a real job here

London

Just apply…Recruiters will harass

you anyway

NEWSRWD and mustard

History

1. Mobile is uglyAnd so are these slides!

I have an idea!

2. Let’s build apps !

Windows Phone? Nope. Well… kinda.

Devs

Users

Nov 26 - 30 2012

505 40

277 ~240

Total: 1304 devices

•BBOS Browser•Safari Mobile iOS 4.1+•Android Browser 1.6+•IE Mobile WP 7+•OVI (Nokia)

Support in 2012

•Opera Mini•Opera Mobile•Firefox & Firefox OS•UCWeb (Nº1 en Chine)•Java Browsers

Support in 2012

Dev session(~10 devices)

•Core content should be accessible to everyone•Detect features, not devices•Performance matters (a lot)

3. Let’s build ONE website!

htt

p:/

/ww

w.fl

ickr

.com

/photo

s/osc

ar-

kinsk

i/345522488/s

izes/

l/in

/fave

s-ala

nst

anto

n/

All rights reserved by Oscar Kinski

Progressive enhancement

Mobile first !

Sure, David.

How?•Too many platforms- OS- Browser- JavaScript on/off

•We need a solid development process

Cutting the mustard

“Meeting expectations”

@tmaslen

http://responsiveconf.com.s3.amazonaws.com/audio/3-tom-maslen-responsiveconf.mp3

https://speakerdeck.com/tmaslen/cutting-the-mustard-future-friendly-browser-support

http://www.flickr.com/photos/57785771@N08/8521491468/ ©Bevan Stephens

Cutting the Mustard•2 experiences:- core (basic)- enhanced (via a JS app)

•Prevents device detection…in most cases(edge cases: @font-face et HTML5 video)

Cutting the Mustard

http://blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard/

// Loading core experience

if ('querySelector' in document

&& 'localStorage' in window

&& 'addEventListener' in window) {

// Loading enhanced experience

}

Core experienceFor browsers not cutting the mustard or having JS off

“Most read” tab: linkAbsolute datesLow res/quality images

1 image: 1st story“Sections” button: links to the a menu in the footer

Home: 10 HTTP req., 40 KB

Enhanced experienceFor browsers cutting the mustard

“Most read” tab: lazy loadedRelative datesResponsive images

HiDPI Support (Retina)Enhanced “Sections” menu

Additional CSS and images

Le futur

•Fully responsive up to desktop

•Continuous deployment and Real User Monitoring (RUM)

Tomorrow

•Data tables

•Really responsive story images (connection type, display density…)

•tv, glasses, toasters…

Tomorrow (bis)

Hang on, all this for THAT?

Hang on, all this for THAT?

Hang on, all this for THAT?

Hang on, all this for THAT?

Hang on, all this for THAT?

Without a doubt: the most beautiful slide

•Experiment•Test•Iterate•Test•Rinse and repeat

Responsive Process

Thanks, you may now rest your eyes

@kaelig — blog.kaelig.fr