Post on 15-Jan-2015
description
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