A la découverte du
Responsive Web Design
Mathieu PARISOTDéveloppeur Web et Java
@matparisot
https://www.google.com/+ParisotMathieu
Responsive what ?
Responsive Web Design,dimwit !
S'adapter à la taille de l'écran
S'adapter à l'ergonomie
S'adapter au contexte
Des milliers de combinaisons…
Tant que ça ?
Bah, ça ne me concerne pas tout
ça !
"55 % des américains ont utilisés un smartphone pour accéder à internet en 2012"
Source : http://www.pewinternet.org/Reports/2012/Cell-Internet-Use-2012.aspx
"Pour 31%, il s'agit de leur mode consultation principal"
Source : http://www.pewinternet.org/Reports/2012/Cell-Internet-Use-2012.aspx
"Plus de 50% des clients Amazon ont acheté depuis leur
mobile à noël 2013"
Source : http://phx.corporate-ir.net/phoenix.zhtml?c=176060&p=irol-newsArticle&ID=1886961
"Walmart.ca en RWD :+20% de conversions
+98% de vente sur mobile"
Src : http://www.getelastic.com/how-walmart-cas-responsive-redesign-boost-conversion-by-20/
"75% des gens utilisent leur smartphone aux toilettes"
http://www.11mark.com/IT-in-the-Toilet
"10% des gens américains utilisent leur smartphone
pendant qu'ils font l'amour"
http://mashable.com/2013/07/11/smartphones-during-sex/
Comment on peut supporter autant
de trucs ?
1 site dédié aux desktops !
1 site dédié aux desktops !1 site dédié aux smartphones !
1 site dédié aux desktops !1 site dédié aux smartphones !
1 site dédié aux tablettes…
1 site dédié aux desktops !1 site dédié aux smartphones !
1 site dédié aux tablettes…1 site dédié aux TV ?
1 site dédié aux desktops !1 site dédié aux smartphones !
1 site dédié aux tablettes…1 site dédié aux TV ?
Oups le PDG a acheté une montre connectée !
1 site dédié aux desktops !1 site dédié aux smartphones !
1 site dédié aux tablettes…1 site dédié aux TV ?
Oups le PDG a acheté une montre connectée !
1 seul site !
Un code HTML unique !
Des tailles relatives !
%em
rem
vh vw
Des média queries !
Des grilles fluides !
Un exemple ?
http://alistapart.com/
Le 1er site Responsive !
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Trop facile ! C'est tout ?
Content First
S'adapter à son environnement
Amélioration progressive
Amélioration progressive
Amélioration progressive
Amélioration progressive
Dégradation élégante
Dégradation élégante
Dégradation élégante
Dégradation élégante
Les problèmes que
tout cela pose…
La performance
La maintenabilité
La compatibilité
Des composants graphiques adaptés
Des images adaptées
5ko
20ko
100ko
Les processus de conception
Wireframes
Les processus de conception
WireframesMaquettage
Les processus de conception
??WireframesMaquettage
Les processus de conception
??WireframesMaquettage
site final
Les tests
Pas adapté pour tout
Trouver les compétences
Oh mon Dieu, on n'y arrivera jamais !
Un site unique
La flexibilité
Une meilleurs conception
Diminuer la frustration
Parlons argent !
ou pas…
Bluffer ou pas ?
Chaque projet est unique
Des estimations pour sortir du flou
Ceux qui ont essayé sont contents
Apprentissage
Site Responsive
Site mobile
Site Desktop
Apprentissage Equipe formée
Site Responsive
Site mobile
Site Desktop
Apprentissage Equipe formée
Milieu de projet
Site Responsive
Site mobile
Site Desktop
Apprentissage Equipe formée
Milieu de projet
Fin de vie
Site Responsive
Site mobile
Site Desktop
L'apprentissage
Les révolutions sont souvent chaotiques
Vos process vont dérailler…
Stop à la bidouille !
L'internet fixe est (trop) rapide
Même pas peur, allons-y !
Par où commencer ?
Trouver les bonnes métriques
commencezPETIT !
Restreignez votre périmètre
http://smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
Pour conclure…
Vos sites doivent être responsive par défaut !
Merci !
@matparisot