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.

1. L'impact du
Responsive Web Design
sur vos équipes projets

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

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

5. Faites vos sites en responsive web design

9. Objectifs
⦿ Mieux comprendre les problèmes du
fonctionnement actuel
⦿Avoir des pointeurs pour progresser
⦿Découvrir des pistes à creuser
⦿ Savoir par où commencer

10. Responsive what

11. Théorisé par
Ethan Marcotte en
2010

12. Notion d'architecture

13. Grille Fluide
Images flexibles
Média queries

15. S'adapter à la taille de l'écran…

16. Adapter l'ergonomie…

17. S'adapter
au contexte…

18. Des milliers de combinaisons…

19. Tant que ça ?

32. Comment on peut
supporter autant de
choses ?

33. 1 site dédié aux ordinateurs de bureau !
(desktop)

34. 1 site dédié aux ordinateurs de bureau !
(desktop)
1 site dédié aux smartphones !

35. 1 site dédié aux ordinateurs de bureau !
(desktop)
1 site dédié aux smartphones !
1 site dédié aux tablettes…

36. 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 ?

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

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

39. 1 seul site !

42. Content First

43. S'adapter à son environnement

44. Amélioration progressive

45. Amélioration progressive

46. Amélioration progressive

47. Amélioration progressive

48. Dégradation élégante

49. Dégradation élégante

50. Dégradation élégante

51. Dégradation élégante

52. 2 approches ?

53. Tout ça n'est pas magique

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

56. Meilleur référencement
Flexibilité
Coûts de développement
Ergonomie
Maintenance
Simplicité

57. Augmenter le bonheur
de vos utilisateurs

58. Back on track…

59. Concevoir un site web

60. Wireframes
Les processus
de conception

61. Wireframes
Maquettage
Les processus
de conception

62. Wireframes
?? Maquettage
Les processus
de conception

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

64. Zoomons
un peu

65. Lister les besoins

66. Tout caser dans l'espace
disponible

67. Puis rendre
tout ça joli

68. Intégrateurs web découpant un PSD, Paris 2013

69. Comparaison "pixel perfect"
avec la maquette

70. La pointe de la
technologie

71. Et le responsive dans tout ça ?

78. Combien de pages a votre site ?

79. Que se passe-t-il dans
les résolutions intermédiaires ?

80. Pas sûr que ça
tienne longtemps…

81. Une maquette hybride

82. ?? ??
A l'intégrateur de s'adapter

83. Sans forcément
avoir toutes
les billes….

84. Pas idéal non plus

85. Imaginer un nouveau process

86. Ne pas réinventer la roue

87. Ne pas réinventer la roue

88. Ni remède
miracle

89. Ok, let's rock !
RWD
Vous

90. L'impact métier

91. Ou pourquoi faire
tenir votre contenu
dans écran de smartphone
n'est pas QUE
un problème de design

92. Contenu

93. Inventorier
votre contenu

94. En utilisant
votre vocabulaire
METIER

95. Et les relier
entre eux

96. Découper ses pages en blocs fonctionnels

100. 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

101. Un carrousel ?

102. Des liens promotionnels :
1 titre
1 lien
1 description courte
1 image
1 image miniature
1 image intermédiaire

103. Un carrousel
Une liste sans image
Des tuiles Windows
Des vignettes
Une liste avec des miniatures

104. Ou n'importe quoi d'autre…

105. Des outils arrivent :
http://www.lifeishao.com/rwdwire/

107. Prioriser ses contenus
1 1 1

108. 1
2
3

109. 1
2
3

110. Qui décide de la priorité ?

111. Soyez le plus précis possible

112. Pensez à vos utilisateurs

113. Anticipez les besoins

114. Anticiper les besoins
Mais pas trop…
http://www.flickr.com/photos/samsmith/243104896/

115. Mesurez !

116. Se méfier des
idées reçues

117. Josh Clark - The Seven Deadly Myths of Mobile - BDConf, April 2012
http://vimeo.com/48327889

118. En profiter pour épurer son site Desktop

119. Intégrer le RWD dès le début !

120. Retirer des
fonctionnalités ?

121. un BON contenu mobile
est aussi
un BON contenu desktop

123. Les créatifs

124. Oubliez Photoshop !

125. S'affranchir des contraintes
d'un canevas

126. Prototyper le plus tôt possible !

129. Former les
créatifs au web !

130. Sans en faire des
développeurs non plus…

131. Ca reste
un prototype !

132. Un prototype ne part pas en prod
(Enfin on essaie d'éviter…)

133. Mais peut servir de fondation

134. Ou de briques réutilisables

135. Ca peut faire peur…

136. Passer par une étape de mockup

137. Le retour de Photoshop

138. Les Style Tiles
(http://style.es)

139. Basez-vous
sur le VRAI
contenu !

140. "Il me faudrait un garage
pour mon véhicule…"

141. Pas de soucis, voici la maquette…

142. Génial !
Mais pas sur que ça rentre…

143. Content first…

144. Les développeurs

145. Les développeurs

146. industrialiser
votre site

147. Former les
devs au web !

148. Passer de
développeur
backend…

149. … à développeur
frontend

150. ou mieux répartir les rôles

151. La performance

152. Et voila, le plus dur est fait !

153. Ou pas…

154. L'équipe qualité

155. Les tests

158. Mode déconnecté

159. La vitesse du réseau

160. Conserver la batterie

161. option 1 : Tests en interne

162. option 2 :
L'emprunt

163. option 3 :
Sous-traiter

164. option 4 :
Tester c'est douter !

165. Mixer les options !

166. Diviser pour mieux régner

167. Et oui c'est pas
gagné…

168. Quelle stratégie
adopter ?

169. Retrofitting

170. Plutôt que
de partir
du site
classique…

171. Partir du
site mobile !

172. Prendre un nouveau départ

173. Migrer progressivement

174. Amenez le changement
progressivement

175. Car les gens n'aiment pas
le changement

176. Sérieusement, vraiment pas !

177. Commencez par
les équipes web mobile

178. impliquez les gens
le + tôt possible

179. Restreignez
votre périmètre

180. Et augmentez le
petit à petit

181. Mesurez !

182. Impliquez
les utilisateurs

183. Vous voilà prêt à dompter le RWD !

184. La refonte du site Soat

185. Mixer les options !

186. Trier votre contenu

187. Trier votre contenu
Agencer sous forme de blocs

188. Trier votre contenu
Agencer sous forme de blocs
Prototyper le plus tôt possible

189. Trier votre contenu
Agencer sous forme de blocs
Prototyper le plus tôt possible
Tester sera difficile

190. Commencez petit…

191. … et vous arriverez
rapidement à des choses
impressionnantes !

192. Et
dans tout ça ?

193. Faire évoluer vos architectures

194. Définir vos besoins

195. Former vos équipes

196. Vous fournir
Des consultants prêts
à intervenir

197. Réaliser
Des maquettes HTML

198. Définir votre
stratégie de tests

199. Evangéliser
dans votre entreprise

200. Merci !

201. One more thing …
(Non, pas de montre Soat en vue  )

202. A venir :
Un livre blanc détaillant
le contenu de cette présentation