L'impact du 
Responsive Web Design 
sur vos équipes projets
Mathieu PARISOT 
Développeur Web et Java 
@matparisot 
https://www.google.com/+ParisotMathieu
Au programme de cette session 
⦿ Un rappel sur le RWD 
⦿Pourquoi le fonctionnement actuel pose 
problème 
⦿Comment amélior...
Faites vos sites en responsive web design
Objectifs 
⦿ Mieux comprendre les problèmes du 
fonctionnement actuel 
⦿Avoir des pointeurs pour progresser 
⦿Découvrir de...
Responsive what
Théorisé par 
Ethan Marcotte en 
2010
Notion d'architecture
Grille Fluide 
Images flexibles 
Média queries
S'adapter à la taille de l'écran…
Adapter l'ergonomie…
S'adapter 
au contexte…
Des milliers de combinaisons…
Tant que ça ?
Comment on peut 
supporter autant de 
choses ?
1 site dédié aux ordinateurs de bureau ! 
(desktop)
1 site dédié aux ordinateurs de bureau ! 
(desktop) 
1 site dédié aux smartphones !
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 ordinateurs de bureau ! 
(desktop) 
1 site dédié aux smartphones ! 
1 site dédié aux tablettes… 
1 site d...
1 site dédié aux ordinateurs de bureau ! 
(desktop) 
1 site dédié aux smartphones ! 
1 site dédié aux tablettes… 
1 site d...
1 site dédié aux ordinateurs de bureau ! 
(desktop) 
1 site dédié aux smartphones ! 
1 site dédié aux tablettes… 
1 site d...
1 seul site !
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
2 approches ?
Tout ça n'est pas magique
Un exemple ? 
http://alistapart.com/
Meilleur référencement 
Flexibilité 
Coûts de développement 
Ergonomie 
Maintenance 
Simplicité
Augmenter le bonheur 
de vos utilisateurs
Back on track…
Concevoir un site web
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
Zoomons 
un peu
Lister les besoins
Tout caser dans l'espace 
disponible
Puis rendre 
tout ça joli
Intégrateurs web découpant un PSD, Paris 2013
Comparaison "pixel perfect" 
avec la maquette
La pointe de la 
technologie
Et le responsive dans tout ça ?
Combien de pages a votre site ?
Que se passe-t-il dans 
les résolutions intermédiaires ?
Pas sûr que ça 
tienne longtemps…
Une maquette hybride
?? ?? 
A l'intégrateur de s'adapter
Sans forcément 
avoir toutes 
les billes….
Pas idéal non plus
Imaginer un nouveau process
Ne pas réinventer la roue
Ne pas réinventer la roue
Ni remède 
miracle
Ok, let's rock ! 
RWD 
Vous
L'impact métier
Ou pourquoi faire 
tenir votre contenu 
dans écran de smartphone 
n'est pas QUE 
un problème de design
Contenu
Inventorier 
votre contenu
En utilisant 
votre vocabulaire 
METIER
Et les relier 
entre eux
Découper ses pages en blocs fonctionnels
Navigation vers sites 
externes 
Recherche sur le site 
Navigation interne 
Promotion des évènements 
Liste des 
formation...
Un carrousel ?
Des liens promotionnels : 
1 titre 
1 lien 
1 description courte 
1 image 
1 image miniature 
1 image intermédiaire
Un carrousel 
Une liste sans image 
Des tuiles Windows 
Des vignettes 
Une liste avec des miniatures
Ou n'importe quoi d'autre…
Des outils arrivent : 
http://www.lifeishao.com/rwdwire/
Prioriser ses contenus 
1 1 1
1 
2 
3
1 
2 
3
Qui décide de la priorité ?
Soyez le plus précis possible
Pensez à vos utilisateurs
Anticipez les besoins
Anticiper les besoins 
Mais pas trop… 
http://www.flickr.com/photos/samsmith/243104896/
Mesurez !
Se méfier des 
idées reçues
Josh Clark - The Seven Deadly Myths of Mobile - BDConf, April 2012 
http://vimeo.com/48327889
En profiter pour épurer son site Desktop
Intégrer le RWD dès le début !
Retirer des 
fonctionnalités ?
un BON contenu mobile 
est aussi 
un BON contenu desktop
Les créatifs
Oubliez Photoshop !
S'affranchir des contraintes 
d'un canevas
Prototyper le plus tôt possible !
Former les 
créatifs au web !
Sans en faire des 
développeurs non plus…
Ca reste 
un prototype !
Un prototype ne part pas en prod 
(Enfin on essaie d'éviter…)
Mais peut servir de fondation
Ou de briques réutilisables
Ca peut faire peur…
Passer par une étape de mockup
Le retour de Photoshop
Les Style Tiles 
(http://style.es)
Basez-vous 
sur le VRAI 
contenu !
"Il me faudrait un garage 
pour mon véhicule…"
Pas de soucis, voici la maquette…
Génial ! 
Mais pas sur que ça rentre…
Content first…
Les développeurs
Les développeurs
industrialiser 
votre site
Former les 
devs au web !
Passer de 
développeur 
backend…
… à développeur 
frontend
ou mieux répartir les rôles
La performance
Et voila, le plus dur est fait !
Ou pas…
L'équipe qualité
Les tests
Mode déconnecté
La vitesse du réseau
Conserver la batterie
option 1 : Tests en interne
option 2 : 
L'emprunt
option 3 : 
Sous-traiter
option 4 : 
Tester c'est douter !
Mixer les options !
Diviser pour mieux régner
Et oui c'est pas 
gagné…
Quelle stratégie 
adopter ?
Retrofitting
Plutôt que 
de partir 
du site 
classique…
Partir du 
site mobile !
Prendre un nouveau départ
Migrer progressivement
Amenez le changement 
progressivement
Car les gens n'aiment pas 
le changement
Sérieusement, vraiment pas !
Commencez par 
les équipes web mobile
impliquez les gens 
le + tôt possible
Restreignez 
votre périmètre
Et augmentez le 
petit à petit
Mesurez !
Impliquez 
les utilisateurs
Vous voilà prêt à dompter le RWD !
La refonte du site Soat
Mixer les options !
Trier votre contenu
Trier votre contenu 
Agencer sous forme de blocs
Trier votre contenu 
Agencer sous forme de blocs 
Prototyper le plus tôt possible
Trier votre contenu 
Agencer sous forme de blocs 
Prototyper le plus tôt possible 
Tester sera difficile
Commencez petit…
… et vous arriverez 
rapidement à des choses 
impressionnantes !
Et 
dans tout ça ?
Faire évoluer vos architectures
Définir vos besoins
Former vos équipes
Vous fournir 
Des consultants prêts 
à intervenir
Réaliser 
Des maquettes HTML
Définir votre 
stratégie de tests
Evangéliser 
dans votre entreprise
Merci !
One more thing … 
(Non, pas de montre Soat en vue  )
A venir : 
Un livre blanc détaillant 
le contenu de cette présentation
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - septembre 2014
Prochain SlideShare
Chargement dans…5
×

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

947 vues

Publié le

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.

Publié dans : Technologie
1 commentaire
5 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
947
Sur SlideShare
0
Issues des intégrations
0
Intégrations
90
Actions
Partages
0
Téléchargements
0
Commentaires
1
J’aime
5
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 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
  • 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

    ×