ResponsiveWeb Designet Moutarde

SudWeb 2013

css-maintenables.fr

•Londres

•Responsive à la BBC : pourquoi…

•… et comment ?

iPad

Pinard

Crêpière

•Culture (concerts, musées, théâtre…)

•Pubs, bars à cocktails…

•Conférences web

•Profession “intégrateur” reconnue

Londres

Postulez…Il suffit de parler à un recruteur sur place

NEWSRWD et

moutarde

Historique

1. Le mobile, c’est moche

J’ai une idée !

2. Concevons des applications !

Windows Phone ? Non. Enfin… presque.

Devs

Utilisateurs

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 en 2012

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

Support en 2012

Session de dev(~10 téléphones)

•Le cœur du contenu doit être accessible à tout le monde•Cibler les capacités plutôt que les modèles•Les performances sont importantes

3. Concevons UN site web !

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

Amélioration progressive

Mobile first !

Oui, David.

Comment faire ?•Trop de combinaisons- OS- Browser- JavaScript on/off

•Besoin de certitudes pour développer rapidement

Couper la moutarde

“Répondre aux attentes”

@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

Couper la moutarde•2 expériences :- de base- améliorée

•Évite le device-detection…la plupart du temps(cas spéciaux : @font-face et HTML5 video)

Couper la moutarde

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

// chargement de l’expérience de base

if ('querySelector' in document

&& 'localStorage' in window

&& 'addEventListener' in window) {

// chargement des améliorations

}

Expérience de baseou sans JavaScript

“Most read” tab : lienDates absoluesImages très basse def

1 image : 1ère brèveBouton “Sections” : pointe vers le menu dans le footer

Index: 10 req. HTTP, 40 KB

Expérience amélioréepour navigateurs modernes

“Most read” tab : lazy loadTimestamps relatifsImages de qualité

Support HiDPI (Retina)Menu “Sections” amélioré

CSS & images additionnelles

Le futur

•Complètement responsive jusqu’au desktop(un seul domaine: www.)

•Déploiement continu et Monitoring en direct (RUM)

Demain

•tableaux de données

•images adaptatives (débit, densité de l’affichage)

•tv, lunettes, grilles pain…

Demain (bis)

Attends, tout ça pour ÇA ???

Attends, tout ça pour ÇA ???

Attends, tout ça pour ÇA ???

Attends, tout ça pour ÇA ???

Attends, tout ça pour ÇA ???

La plus belle slide pour la fin !

•Expérimentation•Test•Itération•Test•Rince and repeat

Le process RWD

Merci, vous pouvezreposer vos yeux

@kaelig — blog.kaelig.fr