Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

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

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité

Consultez-les par la suite

1 sur 109 Publicité

Plus De Contenu Connexe

Les utilisateurs ont également aimé (20)

Similaire à A la découverte du Responsive Web Design par Mathieu Parisot - Soat (20)

Publicité

Plus par SOAT (20)

Plus récents (20)

Publicité

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 !

×