1.
A la découverte du
Responsive Web Design

2.
Mathieu PARISOT
Développeur Web et Java
@matparisot
https://www.google.com/+ParisotMathieu

3.
Responsive what ?

4.
Responsive Web Design,
dimwit !

5.
S'adapter à la taille de l'écran

6.
S'adapter à l'ergonomie

7.
S'adapter
au contexte

8.
Des milliers de combinaisons…

9.
Tant que ça ?

10.
Bah, ça ne me
concerne pas tout
ça !

11.
"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

12.
"Pour 31%, il s'agit de leur
mode consultation principal"
Source : http://www.pewinternet.org/Reports/2012/Cell-Internet-Use-2012.aspx

13.
"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

14.
"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/

15.
"75% des gens utilisent leur
smartphone aux toilettes"
http://www.11mark.com/IT-in-the-Toilet

16.
"10% des gens américains
utilisent leur smartphone
pendant qu'ils font l'amour"
http://mashable.com/2013/07/11/smartphones-during-sex/

17.
Comment on peut
supporter autant
de trucs ?

18.
1 site dédié aux desktops !

19.
1 site dédié aux desktops !
1 site dédié aux smartphones !

20.
1 site dédié aux desktops !
1 site dédié aux smartphones !
1 site dédié aux tablettes…

21.
1 site dédié aux desktops !
1 site dédié aux smartphones !
1 site dédié aux tablettes…
1 site dédié aux TV ?

22.
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 !

23.
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 !

24.
1 seul site !

25.
Un code HTML unique !

26.
Des tailles relatives !
%
em
vh
rem
vw

27.
Des média queries !

28.
Des grilles fluides !

29.
Un exemple ?
http://alistapart.com/

30.
Le 1er site Responsive !
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

31.
Trop facile !
C'est tout ?

32.
Content First

33.
S'adapter à son environnement

34.
Amélioration progressive

35.
Amélioration progressive

36.
Amélioration progressive

37.
Amélioration progressive

38.
Dégradation élégante

39.
Dégradation élégante

40.
Dégradation élégante

41.
Dégradation élégante

42.
Les problèmes
que
tout cela pose…

43.
La performance

44.
La maintenabilité

45.
La compatibilité

46.
Des composants graphiques adaptés

47.
Des images adaptées
100ko
20ko
5ko

48.
Wireframes
Les processus
de conception

49.
Wireframes
Maquettage
Les processus
de conception

50.
Wireframes
Maquettage
Les processus
de conception
??

51.
Wireframes
Maquettage
??
Les processus
de conception
site final

52.
Les tests

53.
Pas adapté pour tout

54.
Trouver les compétences

55.
Oh mon Dieu,
on n'y arrivera jamais !

56.
Un site unique

57.
La flexibilité

58.
Une meilleurs conception

59.
Diminuer la frustration

60.
Parlons argent !

61.
ou pas…

62.
Bluffer
ou pas ?

63.
Chaque projet
est unique

64.
Des estimations pour sortir du flou

65.
Ceux qui ont essayé
sont contents

66.
Site Responsive
Site mobile
Site Desktop
Apprentissage

67.
Site Responsive
Site mobile
Site Desktop
Apprentissage
Equipe formée

68.
Site Responsive
Site mobile
Site Desktop
Milieu de projet
Apprentissage
Equipe formée

69.
Site Responsive
Site mobile
Fin de vie
Site Desktop
Milieu de projet
Apprentissage
Equipe formée

70.
L'apprentissage

71.
Les révolutions sont
souvent chaotiques

72.
Vos process vont dérailler…

73.
Stop à la bidouille !

74.
L'internet fixe est (trop) rapide

75.
Même pas peur, allons-y !

76.
Par où commencer ?

77.
Trouver les bonnes métriques

78.
commencez
PETIT !

79.
Restreignez votre
périmètre

80.
http://smashingmagazine.com/2013/07/08/
choosing-a-responsive-image-solution/

81.
Pour conclure…

82.
Vos sites doivent être
responsive par défaut !

83.
@matparisot
Merci !