Successfully reported this slideshow.
RWD
2 
1. Constat : La grande fragmentation 
2. Comment s’armer face à tous ses écrans 
3. Un projet responsive 
4. Les enjeux...
3 
Ethan Marcotte 
lance le terme de 
Responsive Web Design 
en mai 2010 dans un article de 
A List Appart
4 
1. Constat : La grande 
fragmentation
5 
Le Web est mort 
Le Digital est partout
Le “phablet”, même Apple y a succombé!
Des écrans encore plus grands!
Et d’autres plus petits….
Des …. différents
Des écrans partout, tout le temps
Des écrans partout, tout le temps
12 
Un trafic mondial du smartphone 
qui Triple 
Q1 2012 
8,67% 
Q1 2013 
14,3% 
Q1 2014 
24,16% 
31,5% 
30% 
25% 
20% 
15...
13 
La majorité des navigateurs 
supportent HTML5 
90 
80 
70 
60 
50 
40 
30 
20 
10 
0 
Très bon support Bon support Pas...
14 
Une chose est sûr. 
Ceci est un parcours frustrant, l’utilisateur ne l’a pas choisit
15 
Les contextes de navigation 
évoluent au fil de la journée. 
Les constructeurs offrent la récupération de la navigatio...
16 
PENSER à l’usage, à l’utilisateur 
La première chose que vous devez faire 
est d’oublier les buzzwords et autre jargon...
17 
2. Quelles sont nos 
armes?
18 
Une diversification des supports : 
Un nombre de support à traiter très important 
(tablettes / desktop / smartphones,...
19 
Changer notre mode de 
support 
On ne doit plus concevoir en fonction des 
navigateurs … mais en fonction des formats ...
20 
Un pattern de conception 
éprouvé 
Design fluide 
Le RESPONSIVE WEB DESIGN 
Un fonctionnement par paliers de tailles d...
21 
A chaque écran, ses 
spécifications
22 
Pour anticiper l’avenir, il faut respecter les 
standards 
• Les fonctionnalités des nouveaux navigateurs 
seront simu...
23 
Il s’agit donc de définir deux niveaux de paliers : 
Les paliers sont liés à la technicité du sujet: 
• Beaucoup de mé...
Définir des paliers peut servir le parcours 
24
25 
3. Un projet responsive
26 
Des paliers responsives 
SMALL MEDIUM LARGE X-LARGE
27 
Le responsive 
implique d’oublier le 
cycle en V 
De nouvelles “best 
practices” projet 
Le prototype est 
indispensab...
28 
Le prototype 
C’est le seul moyen d’adapter les 
comportements sur chacun des 
terminaux en observant 
l’expérience qu...
29 
Définir le palier minimum et le palier 
Les techniques de design maximum 
évoluent 
Créer des éléments plus que des mi...
30 
De nouveaux outils 
créatifs … 
… en opposition avec le pixel perfect. 
Adobe Edge Reflow
31 
Un nouveau Processus de validation 
Processus 
itératif 
BRIEF 
PSD fluide 
Proto 
HTML 
Croquis
32 
Un nouveau Processus de validation 
Processus 
itératif 
Concept 
Créa 
PSD fluide 
Proto 
HTML 
Croquis
33 
http://loic/prototype_fspp 
Le prototype, pierre angulaire 
http://renault-fspp.dev.ekino.com/ 
planProduit.html 
http...
34 
Une phase de conception décisive 
Des workshops au 
plus près du client pour : 
Comprendre le besoin 
Comprendre les e...
35 
Une méthodologie agile 
Les enjeux du RWD 
impliquent un 
fonctionnement agile 
Tout au long de la phase de conception...
36 
Une équipe d’experts 
Une équipe modulaire, 
dédiée, aux 
expériences multiples 
et travaillant de façon 
collaborativ...
37 
La contribution 
Les outils de contribution, CMS, doivent s’adapter au 
responsive web design : 
Ces outils doivent pe...
38 
Les enjeux 
TECHNIQUES
39 
Un grand SITE sur un tout petit mobile
40 
La PERFORMANCE au coeur de 
l’expérience 
Les utilisateurs s’attendent un temps de chargement de 2 
secondes. 
Au-delà...
41 
Les 3 piliers de la WebPerf 
Réseau Affichage Exécution
42 
Optimiser Le Réseau 
Diminuer les temps de réponse : 
Le bon média pour chaque device 
Concaténation et minification d...
43 
LES médias, un enjeu majeur 
Il faut adresser la bonne image pour chaque écran. 
Solution historique : utiliser le use...
44 
LES IMAGES, LE VRAI CHALLENGE 
DU FLUIDE 
RÉSOLUTION ECRAN 
QUALITÉ DE 
L’IMAGE 
BANDE 
PASSANTE 
Netbook 
en wifi 
Ga...
45 
Les images, le vrai challenge du fluide 
RÉSOLUTION ECRAN 
BANDE 
PASSANTE 
QUALITÉ DE 
L’IMAGE 
Galaxy Note 2 
en 4g ...
46 
Les points d’action 
LE 
CHARGEMENT 
LA 
BONNE IMAGE 
PAR DEVICE 
Mise en place d’un polyfill 
de détection de bande p...
47 
Sélection de la bonne image 
Le w3c et ses participants sont enfin d’accord sur un format HTML 
PICTURE 
ELEMENT SRC S...
48 
Les vidéos 
L’utilisation de la balise HTML5 vidéo induit un nombre conséquent de types de sources. 
Navigateur / Devi...
49 
Les vidéos 
DES PLATEFORMES 
existent et adressent déjà les différents écrans. 
C’est à ces plateformes d’adresser les...
50 
Optimiser l’affichage 
Il faut charger ce que l’utilisateur voit 
Un chargement des médias « on demand » 
La prise en ...
51 
Viewport 
On affiche uniquement les images qui 
apparaissent à l’écran 
Un chargement sur 
mesure 
Sous le Viewport 
L...
52 
Maîtriser les zones à accélérer 
Zone accélérée GPU 
Il ne faut accélérer 
que les zones qui 
ont besoin d’être 
animé...
53 
Eviter les REFLOW
54 
Prendre en compte les contraintes 
d’éxecution 
Il faut adapter les fonctionnalités au contexte d’utilisation 
Il faut...
Un tunnel d’achat sur smartphone ne doit pas avoir les mêmes champs et les 
mêmes étapes que sur ordinateur à part si l’ut...
56 
RESS : FONCTIONNEMENT 
Une galerie média en layer La galerie sur mobile est dans une 
nouvelle page
57 
RESS : FONCTIONNEMENT 
SERVEUR 
DÉTECTION UA 
page.html 
composant_support2.html
58 
Un petit mot sur le seo 
Que pense Google 
du responsive web design ? 
https://developers.google.com/webmasters/smartp...
59 
Le seo reste un enjeux majeur pour 
les webapp 
Dans le cadre d’une application web, le contenu peut être généré en 
A...
60 
Mettre en place une couverture de tests 
unitaires côté JS/CSS La RECETTE côté DEV 
Automatiser pour éviter 
les régre...
Banc de test Ghostlab
62 
CONCLUSION
63 
Le RWD n’est pas une finalité
64 
Nouvelle 
méthodologie de 
production 
Expérience utilisateur Future Proof
65 
Questions ?
66 
Et c’est quoi l’Adaptive Web Design? 
Adapter le site aux capacités du navigateur.
67 
Ca coûte combien ? 
Si vous ne changez pas grand chose à vos habitudes, ca va vous coûter très cher 
L’agence créa va ...
68 
Un site responsive ou Dédié? 
RESPONSIVE 
WEB DESIGN 
Le contenu est fluide et réagit 
pour s’adapter à n’importe quel...
69 
Un site responsive ou Dédié? 
SITE 
DÉDIÉ 
Le contenu va être modifié selon 
des formats et types d’écrans 
prédéfinis...
70 
Cost–Benefit Analysis : 
The benefits of platform-optimized user interfaces are clear : 
• Usability is increased. 
• ...
71 
Un site responsive ou Dédié? 
Un site lourd présentant un fonctionnel très riche ne devrait pas se retrouver tel quel ...
72 
Du Fluide pour le SMARTPHONE 
Ne pas faire de responsive 
ne signifie pas pour autant 
un layout fixe. 
Un site mobile...
73 
Ekino 
157, rue Anatole France 
92300 Levallois-Perret 
@3k1n0 
@NewsDuFront 
www.ekino.com
Prochain SlideShare
Chargement dans…5
×

Responsive web design new14

6 482 vues

Publié le

Morning Session du Groupe FullSIX - Responsive Web Design by Loïc Calvy (CTO Ekino)

Publié dans : Technologie
  • Soyez le premier à commenter

Responsive web design new14

  1. 1. RWD
  2. 2. 2 1. Constat : La grande fragmentation 2. Comment s’armer face à tous ses écrans 3. Un projet responsive 4. Les enjeux techniques du responsive 5. Conclusion
  3. 3. 3 Ethan Marcotte lance le terme de Responsive Web Design en mai 2010 dans un article de A List Appart
  4. 4. 4 1. Constat : La grande fragmentation
  5. 5. 5 Le Web est mort Le Digital est partout
  6. 6. Le “phablet”, même Apple y a succombé!
  7. 7. Des écrans encore plus grands!
  8. 8. Et d’autres plus petits….
  9. 9. Des …. différents
  10. 10. Des écrans partout, tout le temps
  11. 11. Des écrans partout, tout le temps
  12. 12. 12 Un trafic mondial du smartphone qui Triple Q1 2012 8,67% Q1 2013 14,3% Q1 2014 24,16% 31,5% 30% 25% 20% 15% 10% 5% 0% 2011-1 2012-1 2013-1 2014-1 2011 2012 2013 2014
  13. 13. 13 La majorité des navigateurs supportent HTML5 90 80 70 60 50 40 30 20 10 0 Très bon support Bon support Pas ou peu de support Autre / Non déterminé 2011-1 2011-2 2011-3 2011-4 2012-1 2012-2 2012-3 2012-4 2013-1 2013-2 2013-3 2013-4 2014-1
  14. 14. 14 Une chose est sûr. Ceci est un parcours frustrant, l’utilisateur ne l’a pas choisit
  15. 15. 15 Les contextes de navigation évoluent au fil de la journée. Les constructeurs offrent la récupération de la navigation Un type de parcours qui augmente chaque jour.
  16. 16. 16 PENSER à l’usage, à l’utilisateur La première chose que vous devez faire est d’oublier les buzzwords et autre jargon et vous concentrer sur les besoins réels de votre entreprise. Christina Warren “ http://mashable.com/2013/08/06/responsive-vs-native-app/
  17. 17. 17 2. Quelles sont nos armes?
  18. 18. 18 Une diversification des supports : Un nombre de support à traiter très important (tablettes / desktop / smartphones, phablets,…) De plus en plus de résolutions à traiter. Une fragmentation des devices Android non maitrisée. ≠ Monde opensignalmap • La fragmentation peut aussi être liée au contexte d’utilisation : • Ex : Un mobile en WiFi n’offre pas le même contexte qu’un ordinateur en 3G avec faible réception.
  19. 19. 19 Changer notre mode de support On ne doit plus concevoir en fonction des navigateurs … mais en fonction des formats d’écran. DU SUPPORT NAVIGATEUR AU SUPPORT FORMAT
  20. 20. 20 Un pattern de conception éprouvé Design fluide Le RESPONSIVE WEB DESIGN Un fonctionnement par paliers de tailles d’écrans RWD RWD Taille de texte adaptée Réorganisation du layout {
  21. 21. 21 A chaque écran, ses spécifications
  22. 22. 22 Pour anticiper l’avenir, il faut respecter les standards • Les fonctionnalités des nouveaux navigateurs seront simulées sur les plus anciens: • Flash pour balise Vidéo, • Javascript pour les animations, • Des subtilités graphiques ou animations ne seront pas présentes: • coins arrondis, • motion, • text-shadows, Une expérience optimale pour les derniers navigateurs et les mobiles performants Une expérience fonctionnelle pour les autres Un fonctionnement par paliers de fonctionnalités Standards
  23. 23. 23 Il s’agit donc de définir deux niveaux de paliers : Les paliers sont liés à la technicité du sujet: • Beaucoup de métier – applicatif • Beaucoup d’animations • Institutionnel • Etc… Un support par paliers TAILLES D’ÉCRANS FONCTIONNALITÉS
  24. 24. Définir des paliers peut servir le parcours 24
  25. 25. 25 3. Un projet responsive
  26. 26. 26 Des paliers responsives SMALL MEDIUM LARGE X-LARGE
  27. 27. 27 Le responsive implique d’oublier le cycle en V De nouvelles “best practices” projet Le prototype est indispensable L’utilisateur est au centre de la conception
  28. 28. 28 Le prototype C’est le seul moyen d’adapter les comportements sur chacun des terminaux en observant l’expérience qui leur est propre
  29. 29. 29 Définir le palier minimum et le palier Les techniques de design maximum évoluent Créer des éléments plus que des mises en pages D’un design statique à une maquette HTML vivante
  30. 30. 30 De nouveaux outils créatifs … … en opposition avec le pixel perfect. Adobe Edge Reflow
  31. 31. 31 Un nouveau Processus de validation Processus itératif BRIEF PSD fluide Proto HTML Croquis
  32. 32. 32 Un nouveau Processus de validation Processus itératif Concept Créa PSD fluide Proto HTML Croquis
  33. 33. 33 http://loic/prototype_fspp Le prototype, pierre angulaire http://renault-fspp.dev.ekino.com/ planProduit.html http://www.renault.fr/gamme-renault/vehicules-particuliers/ clio/clio-berline/
  34. 34. 34 Une phase de conception décisive Des workshops au plus près du client pour : Comprendre le besoin Comprendre les enjeux métier Pérenniser la réflexion Anticiper au mieux les innovations Définir les contextes d’utilisation Prioriser les éléments à afficher Déterminer quel « layout » adopter Client
  35. 35. 35 Une méthodologie agile Les enjeux du RWD impliquent un fonctionnement agile Tout au long de la phase de conception et de développement, il faut faire des itérations pour assurer : Une bonne expérience utilisateur Un support optimal des terminaux à la sortie du site
  36. 36. 36 Une équipe d’experts Une équipe modulaire, dédiée, aux expériences multiples et travaillant de façon collaborative Le consultant UX, au centre, est garant de la cohésion de l’équipe et du fonctionnel Développeurs : Front / Back Chef de projet Experts : Front / Back /Mobile - AX PRODUCT OWNER Créatif Consultant UX
  37. 37. 37 La contribution Les outils de contribution, CMS, doivent s’adapter au responsive web design : Ces outils doivent permettre D’adresser des visuels adaptés à chacun des écrans De les redimensionner De gérer les vidéos provenant de plateformes externes De gérer les différences fonctionnelles D’adapter le contenu De visualiser sur les différents formats
  38. 38. 38 Les enjeux TECHNIQUES
  39. 39. 39 Un grand SITE sur un tout petit mobile
  40. 40. 40 La PERFORMANCE au coeur de l’expérience Les utilisateurs s’attendent un temps de chargement de 2 secondes. Au-delà de 3s, 40% vont abandonner votre site. Gomez.com “
  41. 41. 41 Les 3 piliers de la WebPerf Réseau Affichage Exécution
  42. 42. 42 Optimiser Le Réseau Diminuer les temps de réponse : Le bon média pour chaque device Concaténation et minification des ressources locales Bonne gestion du cache navigateur Utiliser les nouveautés HTML5 si possible Cache manifest Service Worker
  43. 43. 43 LES médias, un enjeu majeur Il faut adresser la bonne image pour chaque écran. Solution historique : utiliser le user-agent ? La liste de user-agents ou la base de donnée sera-t-elle toujours à jour ? Pouvons-nous être sûrs que un device = une taille d’écran ? • Seul le navigateur connaît sa résolution au moment de son usage
  44. 44. 44 LES IMAGES, LE VRAI CHALLENGE DU FLUIDE RÉSOLUTION ECRAN QUALITÉ DE L’IMAGE BANDE PASSANTE Netbook en wifi Galaxy Note 2 en 4g Iphone 5 en edge Windows surface en 3g Télévision 4k en bas débit Laptop en fibre
  45. 45. 45 Les images, le vrai challenge du fluide RÉSOLUTION ECRAN BANDE PASSANTE QUALITÉ DE L’IMAGE Galaxy Note 2 en 4g Netbook en wifi Iphone 5 en edge Windows surface en 3g Télévision 4k en bas débit Laptop en fibre • Résolutions d’écrans & capacité réseau ne sont désormais plus liés
  46. 46. 46 Les points d’action LE CHARGEMENT LA BONNE IMAGE PAR DEVICE Mise en place d’un polyfill de détection de bande passante Utilisation native de l’api W3C network information dès que possible Participation à la réflexion W3C sur l’implémentation de la balise picture et d’autres solutions Support du RETINA par le pattern 2x
  47. 47. 47 Sélection de la bonne image Le w3c et ses participants sont enfin d’accord sur un format HTML PICTURE ELEMENT SRC SET SIZES
  48. 48. 48 Les vidéos L’utilisation de la balise HTML5 vidéo induit un nombre conséquent de types de sources. Navigateur / Device Formats Vidéo Encodage Audio Chrome MP4*, WebM AAC, MP3, Vorbis Firefox MP4, WebM AAC, MP3, Vorbis Internet Explorer 9+ MP4 AAC, MP3 Safari MP4 AAC, MP3 iOS MP4 AAC, MP3 Android MP4 AAC, MP3 Opéra WebM Vorbis * Chrome a annoncé qu’ils allait arrêter le support du MP4 mais ne l’ont jamais fait
  49. 49. 49 Les vidéos DES PLATEFORMES existent et adressent déjà les différents écrans. C’est à ces plateformes d’adresser les problématiques de mobilité liées aux différences de formats et à la bande passante
  50. 50. 50 Optimiser l’affichage Il faut charger ce que l’utilisateur voit Un chargement des médias « on demand » La prise en compte des spécificités de chaque support accélération 3D animations en CSS3 / Javascript ou SVG selon le cas
  51. 51. 51 Viewport On affiche uniquement les images qui apparaissent à l’écran Un chargement sur mesure Sous le Viewport Les images et les fonctionnalités ne sont pas chargées Le lazyloading Va chercher les élements quand on en a besoin
  52. 52. 52 Maîtriser les zones à accélérer Zone accélérée GPU Il ne faut accélérer que les zones qui ont besoin d’être animées.
  53. 53. 53 Eviter les REFLOW
  54. 54. 54 Prendre en compte les contraintes d’éxecution Il faut adapter les fonctionnalités au contexte d’utilisation Il faut récupérer les bonnes pratiques des langages back au JS
  55. 55. Un tunnel d’achat sur smartphone ne doit pas avoir les mêmes champs et les mêmes étapes que sur ordinateur à part si l’utilisateur l’a choisit 55 Il s’agit donc d’adapter le parcours au support RESS / RESPONSIVE & SERVER-SIDE COMPONENTS DES PARCOURS Adaptés Les medias-queries et matchmedia permettent de distinguer les tailles d’écrans, pas les supports.
  56. 56. 56 RESS : FONCTIONNEMENT Une galerie média en layer La galerie sur mobile est dans une nouvelle page
  57. 57. 57 RESS : FONCTIONNEMENT SERVEUR DÉTECTION UA page.html composant_support2.html
  58. 58. 58 Un petit mot sur le seo Que pense Google du responsive web design ? https://developers.google.com/webmasters/smartphone-sites/
  59. 59. 59 Le seo reste un enjeux majeur pour les webapp Dans le cadre d’une application web, le contenu peut être généré en AJAX. Le SEO redevient donc un problème.
  60. 60. 60 Mettre en place une couverture de tests unitaires côté JS/CSS La RECETTE côté DEV Automatiser pour éviter les régressions Mettre des tests de navigation Automatiser les tests de rendu multi-device
  61. 61. Banc de test Ghostlab
  62. 62. 62 CONCLUSION
  63. 63. 63 Le RWD n’est pas une finalité
  64. 64. 64 Nouvelle méthodologie de production Expérience utilisateur Future Proof
  65. 65. 65 Questions ?
  66. 66. 66 Et c’est quoi l’Adaptive Web Design? Adapter le site aux capacités du navigateur.
  67. 67. 67 Ca coûte combien ? Si vous ne changez pas grand chose à vos habitudes, ca va vous coûter très cher L’agence créa va refaire ses maquettes 10 fois L’intégrateur prendra du retard en attendant les maquettes « faire et défaire, c’est toujours travailler », « tout travail mérite salaire » Si vous changez vos habitudes, que vous utilisez une méthodologie adaptée Une phase de conception différente (ateliers, proto) Entre + 20 et +30% vs un site desktop d’il y a 2 ans …finalement pas tant que ca puisque à la fin on a un site mobile, tablette, desktop et « future-proof » Si votre besoin « rentre » dans une solution du marché, beaucoup moins cher site éditorial avec un thème bootstrap / wordpress
  68. 68. 68 Un site responsive ou Dédié? RESPONSIVE WEB DESIGN Le contenu est fluide et réagit pour s’adapter à n’importe quelle taille d’écran et type de format.
  69. 69. 69 Un site responsive ou Dédié? SITE DÉDIÉ Le contenu va être modifié selon des formats et types d’écrans prédéfinis.
  70. 70. 70 Cost–Benefit Analysis : The benefits of platform-optimized user interfaces are clear : • Usability is increased. • Users are more likely to accomplish their goals. • Conversion rates increase. • You make more money. But, of course, optimization is more costly than repurposing. So, the real question is whether this cost is bigger or smaller than the additional money you make from increased usability. Nielsen Un site responsive ou Dédié?
  71. 71. 71 Un site responsive ou Dédié? Un site lourd présentant un fonctionnel très riche ne devrait pas se retrouver tel quel sur mobile : Facebook Gmail Flickr Youtube Un site dont le contenu doit être adapté au support ne se prête pas au RWD Ligne éditoriale spécifique au mobile
  72. 72. 72 Du Fluide pour le SMARTPHONE Ne pas faire de responsive ne signifie pas pour autant un layout fixe. Un site mobile doit être adapté à tous les mobiles et orientations et utilisera donc certains aspects du package « responsive » ≠
  73. 73. 73 Ekino 157, rue Anatole France 92300 Levallois-Perret @3k1n0 @NewsDuFront www.ekino.com

×