A la découverte du

Responsive Web Design
Mathieu PARISOT
Dé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/Repo...
"Pour 31%, il s'agit de leur
mode consultation principal"

Source : http://www.pewinternet.org/Reports/2012/Cell-Internet-...
"Plus de 50% des clients
Amazon ont acheté depuis leur
mobile à noël 2013"

Source : http://phx.corporate-ir.net/phoenix.z...
"Walmart.ca en RWD :
+20% de conversions
+98% de vente sur mobile"

Src : http://www.getelastic.com/how-walmart-cas-respon...
"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/smartphone...
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...
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...
1 seul site !
Un code HTML unique !
Des tailles relatives !

%
em

vh

rem
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

100ko

20ko
5ko
Wireframes

Les processus
de conception
Wireframes
Maquettage

Les processus
de conception
Wireframes
Maquettage

Les processus
de conception

??
Wireframes
Maquettage

??

Les processus
de conception
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
Site Responsive
Site mobile
Site Desktop

Apprentissage
Site Responsive
Site mobile
Site Desktop

Apprentissage

Equipe formée
Site Responsive
Site mobile
Site Desktop
Milieu de projet

Apprentissage

Equipe formée
Site Responsive
Site mobile

Fin de vie

Site Desktop
Milieu de projet

Apprentissage

Equipe formée
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
commencez
PETIT !
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 !
@matparisot

Merci !
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
Prochain SlideShare
Chargement dans…5
×

A la découverte du Responsive Web Design par Mathieu Parisot - Soat

1 649 vues

Publié le

La présentation présentée par Mathieu Parisot chez Soat le 27 février sur le thème : A la découverte du Responsive Web Design

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 649
Sur SlideShare
0
Issues des intégrations
0
Intégrations
200
Actions
Partages
0
Téléchargements
41
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

A la découverte du Responsive Web Design par Mathieu Parisot - Soat

  1. 1. A la découverte du Responsive Web Design
  2. 2. Mathieu PARISOT Développeur Web et Java @matparisot https://www.google.com/+ParisotMathieu
  3. 3. Responsive what ?
  4. 4. Responsive Web Design, dimwit !
  5. 5. S'adapter à la taille de l'écran
  6. 6. S'adapter à l'ergonomie
  7. 7. S'adapter au contexte
  8. 8. Des milliers de combinaisons…
  9. 9. Tant que ça ?
  10. 10. Bah, ça ne me concerne pas tout ça !
  11. 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. 12. "Pour 31%, il s'agit de leur mode consultation principal" Source : http://www.pewinternet.org/Reports/2012/Cell-Internet-Use-2012.aspx
  13. 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. 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. 15. "75% des gens utilisent leur smartphone aux toilettes" http://www.11mark.com/IT-in-the-Toilet
  16. 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. 17. Comment on peut supporter autant de trucs ?
  18. 18. 1 site dédié aux desktops !
  19. 19. 1 site dédié aux desktops ! 1 site dédié aux smartphones !
  20. 20. 1 site dédié aux desktops ! 1 site dédié aux smartphones ! 1 site dédié aux tablettes…
  21. 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. 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. 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. 24. 1 seul site !
  25. 25. Un code HTML unique !
  26. 26. Des tailles relatives ! % em vh rem vw
  27. 27. Des média queries !
  28. 28. Des grilles fluides !
  29. 29. Un exemple ? http://alistapart.com/
  30. 30. Le 1er site Responsive ! http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  31. 31. Trop facile ! C'est tout ?
  32. 32. Content First
  33. 33. S'adapter à son environnement
  34. 34. Amélioration progressive
  35. 35. Amélioration progressive
  36. 36. Amélioration progressive
  37. 37. Amélioration progressive
  38. 38. Dégradation élégante
  39. 39. Dégradation élégante
  40. 40. Dégradation élégante
  41. 41. Dégradation élégante
  42. 42. Les problèmes que tout cela pose…
  43. 43. La performance
  44. 44. La maintenabilité
  45. 45. La compatibilité
  46. 46. Des composants graphiques adaptés
  47. 47. Des images adaptées 100ko 20ko 5ko
  48. 48. Wireframes Les processus de conception
  49. 49. Wireframes Maquettage Les processus de conception
  50. 50. Wireframes Maquettage Les processus de conception ??
  51. 51. Wireframes Maquettage ?? Les processus de conception site final
  52. 52. Les tests
  53. 53. Pas adapté pour tout
  54. 54. Trouver les compétences
  55. 55. Oh mon Dieu, on n'y arrivera jamais !
  56. 56. Un site unique
  57. 57. La flexibilité
  58. 58. Une meilleurs conception
  59. 59. Diminuer la frustration
  60. 60. Parlons argent !
  61. 61. ou pas…
  62. 62. Bluffer ou pas ?
  63. 63. Chaque projet est unique
  64. 64. Des estimations pour sortir du flou
  65. 65. Ceux qui ont essayé sont contents
  66. 66. Site Responsive Site mobile Site Desktop Apprentissage
  67. 67. Site Responsive Site mobile Site Desktop Apprentissage Equipe formée
  68. 68. Site Responsive Site mobile Site Desktop Milieu de projet Apprentissage Equipe formée
  69. 69. Site Responsive Site mobile Fin de vie Site Desktop Milieu de projet Apprentissage Equipe formée
  70. 70. L'apprentissage
  71. 71. Les révolutions sont souvent chaotiques
  72. 72. Vos process vont dérailler…
  73. 73. Stop à la bidouille !
  74. 74. L'internet fixe est (trop) rapide
  75. 75. Même pas peur, allons-y !
  76. 76. Par où commencer ?
  77. 77. Trouver les bonnes métriques
  78. 78. commencez PETIT !
  79. 79. Restreignez votre périmètre
  80. 80. http://smashingmagazine.com/2013/07/08/ choosing-a-responsive-image-solution/
  81. 81. Pour conclure…
  82. 82. Vos sites doivent être responsive par défaut !
  83. 83. @matparisot Merci !

×