Responsive web design new14
5 j'aime16,013 vues
Le document traite des défis et des stratégies liés au responsive web design (RWD) dans un environnement où la fragmentation des dispositifs est croissante. Il souligne l'importance d'adapter les sites à différents écrans et contextes d'utilisation tout en respectant les standards techniques pour optimiser l'expérience utilisateur. La conclusion aborde le coût et les bénéfices du RWD par rapport aux sites dédiés, tout en insistant sur la nécessité de méthodologies agiles dans le développement.
Responsive web design new14
- 1. RWD
- 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 Ethan Marcotte lance le terme de Responsive Web Design en mai 2010 dans un article de A List Appart
- 4. 4 1. Constat : La grande fragmentation
- 5. 5 Le Web est mort Le Digital est partout
- 6. Le “phablet”, même Apple y a succombé!
- 7. Des écrans encore plus grands!
- 8. Et d’autres plus petits….
- 10. Des écrans partout, tout le temps
- 11. Des écrans partout, tout le temps
- 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 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 Une chose est sûr. Ceci est un parcours frustrant, l’utilisateur ne l’a pas choisit
- 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 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 2. Quelles sont nos armes?
- 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 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 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 A chaque écran, ses spécifications
- 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 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. Définir des paliers peut servir le parcours 24
- 25. 25 3. Un projet responsive
- 26. 26 Des paliers responsives SMALL MEDIUM LARGE X-LARGE
- 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 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 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 De nouveaux outils créatifs … … en opposition avec le pixel perfect. Adobe Edge Reflow
- 31. 31 Un nouveau Processus de validation Processus itératif BRIEF PSD fluide Proto HTML Croquis
- 32. 32 Un nouveau Processus de validation Processus itératif Concept Créa PSD fluide Proto HTML Croquis
- 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 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 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 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 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 Les enjeux TECHNIQUES
- 39. 39 Un grand SITE sur un tout petit mobile
- 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 Les 3 piliers de la WebPerf Réseau Affichage Exécution
- 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 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 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 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 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 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 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 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 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 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 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 Eviter les REFLOW
- 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. 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 RESS : FONCTIONNEMENT Une galerie média en layer La galerie sur mobile est dans une nouvelle page
- 57. 57 RESS : FONCTIONNEMENT SERVEUR DÉTECTION UA page.html composant_support2.html
- 58. 58 Un petit mot sur le seo Que pense Google du responsive web design ? https://developers.google.com/webmasters/smartphone-sites/
- 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 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. Banc de test Ghostlab
- 62. 62 CONCLUSION
- 63. 63 Le RWD n’est pas une finalité
- 64. 64 Nouvelle méthodologie de production Expérience utilisateur Future Proof
- 65. 65 Questions ?
- 66. 66 Et c’est quoi l’Adaptive Web Design? Adapter le site aux capacités du navigateur.
- 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 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 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 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 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 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 Ekino 157, rue Anatole France 92300 Levallois-Perret @3k1n0 @NewsDuFront www.ekino.com