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

L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014

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

Consultez-les par la suite

1 sur 203 Publicité

L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014

Plus de 50% des internautes français utilisent un support mobile pour naviguer sur le web. Il est donc temps de repenser votre stratégie mobile et le Responsive Web Design, consistant à ne faire qu’un seul site adapté au périphérique qui l’affiche, constitue une approche possible.
Après une introduction à ses principes, nous verrons qu’au-delà des défis techniques, le RWD suppose de revoir entièrement le processus de développement d’un site web et les méthodes de travail des équipes, que ce soit en phase de conception ou lors des tests.
Cette conférence sera l’occasion de découvrir les nouveaux challenges à relever par vos équipes lors de la conception de vos prochains sites internet.

Plus de 50% des internautes français utilisent un support mobile pour naviguer sur le web. Il est donc temps de repenser votre stratégie mobile et le Responsive Web Design, consistant à ne faire qu’un seul site adapté au périphérique qui l’affiche, constitue une approche possible.
Après une introduction à ses principes, nous verrons qu’au-delà des défis techniques, le RWD suppose de revoir entièrement le processus de développement d’un site web et les méthodes de travail des équipes, que ce soit en phase de conception ou lors des tests.
Cette conférence sera l’occasion de découvrir les nouveaux challenges à relever par vos équipes lors de la conception de vos prochains sites internet.

Publicité
Publicité

Plus De Contenu Connexe

Les utilisateurs ont également aimé (20)

Publicité

Similaire à L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014 (20)

Plus par SOAT (20)

Publicité

Plus récents (20)

L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014

  1. 1. L'impact du Responsive Web Design sur vos équipes projets
  2. 2. Mathieu PARISOT Développeur Web et Java @matparisot https://www.google.com/+ParisotMathieu
  3. 3. Au programme de cette session ⦿ Un rappel sur le RWD ⦿Pourquoi le fonctionnement actuel pose problème ⦿Comment améliorer ce process ⦿ Des astuces pour réussir ⦿Comment Soat peut vous aider ⦿Une conclusion
  4. 4. Faites vos sites en responsive web design
  5. 5. Objectifs ⦿ Mieux comprendre les problèmes du fonctionnement actuel ⦿Avoir des pointeurs pour progresser ⦿Découvrir des pistes à creuser ⦿ Savoir par où commencer
  6. 6. Responsive what
  7. 7. Théorisé par Ethan Marcotte en 2010
  8. 8. Notion d'architecture
  9. 9. Grille Fluide Images flexibles Média queries
  10. 10. S'adapter à la taille de l'écran…
  11. 11. Adapter l'ergonomie…
  12. 12. S'adapter au contexte…
  13. 13. Des milliers de combinaisons…
  14. 14. Tant que ça ?
  15. 15. Comment on peut supporter autant de choses ?
  16. 16. 1 site dédié aux ordinateurs de bureau ! (desktop)
  17. 17. 1 site dédié aux ordinateurs de bureau ! (desktop) 1 site dédié aux smartphones !
  18. 18. 1 site dédié aux ordinateurs de bureau ! (desktop) 1 site dédié aux smartphones ! 1 site dédié aux tablettes…
  19. 19. 1 site dédié aux ordinateurs de bureau ! (desktop) 1 site dédié aux smartphones ! 1 site dédié aux tablettes… 1 site dédié aux TV ?
  20. 20. 1 site dédié aux ordinateurs de bureau ! (desktop) 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 !
  21. 21. 1 site dédié aux ordinateurs de bureau ! (desktop) 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 !
  22. 22. 1 seul site !
  23. 23. Content First
  24. 24. S'adapter à son environnement
  25. 25. Amélioration progressive
  26. 26. Amélioration progressive
  27. 27. Amélioration progressive
  28. 28. Amélioration progressive
  29. 29. Dégradation élégante
  30. 30. Dégradation élégante
  31. 31. Dégradation élégante
  32. 32. Dégradation élégante
  33. 33. 2 approches ?
  34. 34. Tout ça n'est pas magique
  35. 35. Un exemple ? http://alistapart.com/
  36. 36. Meilleur référencement Flexibilité Coûts de développement Ergonomie Maintenance Simplicité
  37. 37. Augmenter le bonheur de vos utilisateurs
  38. 38. Back on track…
  39. 39. Concevoir un site web
  40. 40. Wireframes Les processus de conception
  41. 41. Wireframes Maquettage Les processus de conception
  42. 42. Wireframes ?? Maquettage Les processus de conception
  43. 43. Wireframes ?? Maquettage Les processus de conception site final
  44. 44. Zoomons un peu
  45. 45. Lister les besoins
  46. 46. Tout caser dans l'espace disponible
  47. 47. Puis rendre tout ça joli
  48. 48. Intégrateurs web découpant un PSD, Paris 2013
  49. 49. Comparaison "pixel perfect" avec la maquette
  50. 50. La pointe de la technologie
  51. 51. Et le responsive dans tout ça ?
  52. 52. Combien de pages a votre site ?
  53. 53. Que se passe-t-il dans les résolutions intermédiaires ?
  54. 54. Pas sûr que ça tienne longtemps…
  55. 55. Une maquette hybride
  56. 56. ?? ?? A l'intégrateur de s'adapter
  57. 57. Sans forcément avoir toutes les billes….
  58. 58. Pas idéal non plus
  59. 59. Imaginer un nouveau process
  60. 60. Ne pas réinventer la roue
  61. 61. Ne pas réinventer la roue
  62. 62. Ni remède miracle
  63. 63. Ok, let's rock ! RWD Vous
  64. 64. L'impact métier
  65. 65. Ou pourquoi faire tenir votre contenu dans écran de smartphone n'est pas QUE un problème de design
  66. 66. Contenu
  67. 67. Inventorier votre contenu
  68. 68. En utilisant votre vocabulaire METIER
  69. 69. Et les relier entre eux
  70. 70. Découper ses pages en blocs fonctionnels
  71. 71. Navigation vers sites externes Recherche sur le site Navigation interne Promotion des évènements Liste des formations Liste des articles de blog Liste des évènements Liste des news logo
  72. 72. Un carrousel ?
  73. 73. Des liens promotionnels : 1 titre 1 lien 1 description courte 1 image 1 image miniature 1 image intermédiaire
  74. 74. Un carrousel Une liste sans image Des tuiles Windows Des vignettes Une liste avec des miniatures
  75. 75. Ou n'importe quoi d'autre…
  76. 76. Des outils arrivent : http://www.lifeishao.com/rwdwire/
  77. 77. Prioriser ses contenus 1 1 1
  78. 78. 1 2 3
  79. 79. 1 2 3
  80. 80. Qui décide de la priorité ?
  81. 81. Soyez le plus précis possible
  82. 82. Pensez à vos utilisateurs
  83. 83. Anticipez les besoins
  84. 84. Anticiper les besoins Mais pas trop… http://www.flickr.com/photos/samsmith/243104896/
  85. 85. Mesurez !
  86. 86. Se méfier des idées reçues
  87. 87. Josh Clark - The Seven Deadly Myths of Mobile - BDConf, April 2012 http://vimeo.com/48327889
  88. 88. En profiter pour épurer son site Desktop
  89. 89. Intégrer le RWD dès le début !
  90. 90. Retirer des fonctionnalités ?
  91. 91. un BON contenu mobile est aussi un BON contenu desktop
  92. 92. Les créatifs
  93. 93. Oubliez Photoshop !
  94. 94. S'affranchir des contraintes d'un canevas
  95. 95. Prototyper le plus tôt possible !
  96. 96. Former les créatifs au web !
  97. 97. Sans en faire des développeurs non plus…
  98. 98. Ca reste un prototype !
  99. 99. Un prototype ne part pas en prod (Enfin on essaie d'éviter…)
  100. 100. Mais peut servir de fondation
  101. 101. Ou de briques réutilisables
  102. 102. Ca peut faire peur…
  103. 103. Passer par une étape de mockup
  104. 104. Le retour de Photoshop
  105. 105. Les Style Tiles (http://style.es)
  106. 106. Basez-vous sur le VRAI contenu !
  107. 107. "Il me faudrait un garage pour mon véhicule…"
  108. 108. Pas de soucis, voici la maquette…
  109. 109. Génial ! Mais pas sur que ça rentre…
  110. 110. Content first…
  111. 111. Les développeurs
  112. 112. Les développeurs
  113. 113. industrialiser votre site
  114. 114. Former les devs au web !
  115. 115. Passer de développeur backend…
  116. 116. … à développeur frontend
  117. 117. ou mieux répartir les rôles
  118. 118. La performance
  119. 119. Et voila, le plus dur est fait !
  120. 120. Ou pas…
  121. 121. L'équipe qualité
  122. 122. Les tests
  123. 123. Mode déconnecté
  124. 124. La vitesse du réseau
  125. 125. Conserver la batterie
  126. 126. option 1 : Tests en interne
  127. 127. option 2 : L'emprunt
  128. 128. option 3 : Sous-traiter
  129. 129. option 4 : Tester c'est douter !
  130. 130. Mixer les options !
  131. 131. Diviser pour mieux régner
  132. 132. Et oui c'est pas gagné…
  133. 133. Quelle stratégie adopter ?
  134. 134. Retrofitting
  135. 135. Plutôt que de partir du site classique…
  136. 136. Partir du site mobile !
  137. 137. Prendre un nouveau départ
  138. 138. Migrer progressivement
  139. 139. Amenez le changement progressivement
  140. 140. Car les gens n'aiment pas le changement
  141. 141. Sérieusement, vraiment pas !
  142. 142. Commencez par les équipes web mobile
  143. 143. impliquez les gens le + tôt possible
  144. 144. Restreignez votre périmètre
  145. 145. Et augmentez le petit à petit
  146. 146. Mesurez !
  147. 147. Impliquez les utilisateurs
  148. 148. Vous voilà prêt à dompter le RWD !
  149. 149. La refonte du site Soat
  150. 150. Mixer les options !
  151. 151. Trier votre contenu
  152. 152. Trier votre contenu Agencer sous forme de blocs
  153. 153. Trier votre contenu Agencer sous forme de blocs Prototyper le plus tôt possible
  154. 154. Trier votre contenu Agencer sous forme de blocs Prototyper le plus tôt possible Tester sera difficile
  155. 155. Commencez petit…
  156. 156. … et vous arriverez rapidement à des choses impressionnantes !
  157. 157. Et dans tout ça ?
  158. 158. Faire évoluer vos architectures
  159. 159. Définir vos besoins
  160. 160. Former vos équipes
  161. 161. Vous fournir Des consultants prêts à intervenir
  162. 162. Réaliser Des maquettes HTML
  163. 163. Définir votre stratégie de tests
  164. 164. Evangéliser dans votre entreprise
  165. 165. Merci !
  166. 166. One more thing … (Non, pas de montre Soat en vue  )
  167. 167. A venir : Un livre blanc détaillant le contenu de cette présentation

Notes de l'éditeur

  • Pas de code dans cette présentation
  • Pas vous convaincre
    Autres prez pour ça !
  • Nous allons parler Process !
  • Assez drôle : légende décision
  • 1 seule décision dans le workflow…
  • Principe #1 : s'adapter à l'écran
  • Pas suffisant
    Ergo différente sur mobile & desktop
    Tactile
    kinect
    voix
  • Contexte de l'utilisateur
    Utilisation métro (hors ligne) cliché
    Utilisation maison (wifi/canapé) majoritaire
    Changer en fonction de la localisation
    changer en fonction de l'éclairage (media queries 4)
  • Le RWD pas tout seul : changer son mode de penser
  • Penser au mobile en premier
    + de contraintes !
    Meilleurs design sous la contrainte
    + facile de rajouter que de retirer
  • Penser son site autour du contenu
    Ce qui compte c'est le contenu du verre pas sa forme
    Ne pas designer sans une idée clair du contenu final
  • Rien n'est magique en informatique et donc pas le RWD
    Pas simplement rajouté un framework ou quelques directives de code dans votre site
  • Rien n'est magique en informatique et donc pas le RWD
    Pas simplement rajouté un framework ou quelques directives de code dans votre site
  • Rien n'est magique en informatique et donc pas le RWD
    Pas simplement rajouté un framework ou quelques directives de code dans votre site
  • Objectif #1 : diminuer la frustration
    1 seul site = 1 ergo = 1 design
    Pas besoin de tout réapprendre
    + facile pour l'utilisateur
  • Réveillez vous !
  • Comment on fait dans la plus part des projets
  • On fait des wireframes
    Très visuel en général
    Avant même de savoir quel contenu on veut mettre dedans
  • 2. Le designer fait une maquette visuelle
    En image sous photoshop
    1 maquette par écran
    Sans visualisation des enchainements d'écrans, animations, etc.
  • 3. On donne tout ça aux intégrateurs/développeurs
  • 4. Pouf on a un site !
    C'est magique
    Personne ne sais trop comment ça marche
  • Si on regarde dans le détail
  • On liste ses besoins
    C'est la liste au père noel de tous les intervenants
  • On fait tout rentrer dans un ecran de taille fixe 1280px
  • Le designer rend ça jolie en rajoutant des couleurs et en fait une image
  • L'intégrateur découpe l'image et la transforme en site web en mesurant les espacement, etc.
  • Et puis on superpose les 2 pour comparer
    Anecdote : client qui imprime et superpose sur son écran
  • Ca a toujours marché pourquoi changer ?
  • Différentes tailles d'écran…
  • Version desktop : 1 wireframe
  • Et une maquette
  • Version tablette : 1 deuxième wireframe
  • Et une autre maquette
  • Version mobile : 1 troisième wireframe
  • Et toujours plus de maquettes
  • Combien de pages ?
    Combien de tailles d'écrans ?
    Trop de combinaisons
  • Combien de pages ?
    Combien de tailles d'écrans ?
    Trop de combinaisons

×