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