Responsive web design new14

2 901 vues

Publié le

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

Publié dans : Technologie
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 901
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 608
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×