Responsive Web Design

Transcript

1. Responsive Web Design
2. Introduction Responsive Web Design et Adaptive Web Design RWD, Device Experiences, et RESS RESS Avantages et inconvénients des trois approches
3. Responsive Web Design et Adaptive Web Design Responsive Web Design (RWD) Créé en 2011 par Ethan Marcotte sur A List Apart et dans son livre Responsive Web Design. Selon ce concept, le développement et le design doivent répondre au comportement de l’utilisateur et à son environnement, quel qu’il soit.
4. Responsive Web Design et Adaptive Web Design Le RWD consiste à un mix de grilles et structures flexibles, médias, et CSS Media Queries. Le site web doit posséder une technologie qui répond automatiquement aux préférences de l’ utilisateur. Cela élimine donc le besoin de nouveaux développements pour d’éventuels futurs devices.
5. Responsive Web Design et Adaptive Web Design Le RWD est un terme générique, souvent marketing, qui représente le concept. En termes techniques, on parle également de l’ Adaptive Web Design (AWD). Le RWD et l’AWD ont le même but mais diffèrent par la méthode employée pour l’atteindre.
6. Responsive Web Design et Adaptive Web Design Responsive Web Design “Ensemble de structures liquides ou fluides, qui redimensionnement la largeur des éléments relativement à la largeur de la fenêtre.”
7. Responsive Web Design et Adaptive Web Design Adaptive Web Design “Ensemble de structures statiques. Ces structures ne sont pas relatives à la largeur de la fenêtre; elles se redimensionnent selon des Break Points prédéfinis.”
8. RWD, Device Experiences, et RESS Le RWD et AWD adaptent la structure selon la résolution, mais n’utilise aucune détection par device. Le concept de détection par device se nomme Device Experiences. Cette approche, utilisée jusqu’alors, n’envoie au client que ce dont il a besoin.
9. RWD, Device Experiences, et RESS Le Device Experiences permet d’optimiser finement le site web pour un device spécifique. Tout est cependant basé sur les redirections grâce aux à la détection par user agents. Enfin, pour chaque device, le site web a besoin d’ un code différent, potentiellement parsemé de code dupliqué.
10. RWD, Device Experiences, et RESS Les approches RWD et Device Experiences ont tous deux des avantages et des limitations. Pouvons-nous obtenir le meilleur des deux mondes avec une troisième approche ?
11. RESS RESS Pour Responsive Web Design + Server Side Components Luke Wroblewski en est l’auteur. http://bit.ly/1mVxAiG
12. RESS Le RESS combine des structures adaptatives avec des composants serveurs. Un seul set de templates défini un site entier pour tous devices. Les composants clés, qui peuvent varier selon le device, sont gérés par le serveur.
13. RESS Aucune redirection, aucun code dupliqué ni template spécifique à un device, aucun chargement de code inutile pour les besoins courants. L’utilisateur a pourtant la meilleure expérience disponible.
14. RESS Le RWD, lui, est complexe. Mais le RESS est encore expérimental. Il est sujet à de nombreux travaux de recherche et d’optimisation, notamment de la part de personnes comme Brad Frost ou Luke Wroblewski. http://bit.ly/UA6yH4
15. Avantages et inconvénients des trois approches Avantages et inconvénients des trois approches
16. Avantages et inconvénients des trois approches Responsive Web Design Un seul code base Un seul déploiement Une seule URL Permet l’utilisation d’un site pour tout device Gestion des médias Gestion de composants tiers Nécessite une remise en question organisationnelle
17. Avantages et inconvénients des trois approches Device Experiences Optimisation absolue pour un type de device On n’envoie que le strict minimum au client Peu de perturbations niveau organisationnel Un set de code par device Détection par user agent Le multi-devices nécessite beaucoup de maintenance
18. Avantages et inconvénients des trois approches RESS Optimisation absolue pour un type de device Un seul code base Un seul déploiement Une seule URL On n’envoie que le strict minimum au client Expérimental Nécessite un gros changement côté workflow et système
19. RESS Aucune redirection, aucun code dupliqué ni template spécifique à un device, aucun chargement de code inutile pour les besoins courants. L’utilisateur a pourtant la meilleure expérience disponible.
20. Stratégies RWD Responsive Retrofitting Responsive Mobile Site Mobile-first Responsive Design Piecemeal
21. Responsive Retrofitting Responsive Retrofitting Cette stratégie prend un site web desktop-only existant, et le “rend responsive”.
22. Responsive Retrofitting Parfois, re-design un projet from scratch est hors de question. Pour cela, le Responsive Retrofitting est une approche populaire pour créer une meilleure expérience utilisateur pour les devices non- desktop.
23. Responsive Retrofitting Avantages et inconvénients Relativement rapide à mettre en place L’interface reste familière aux utilisateurs Simple à gérer niveau organisationnel On gratte seulement la surface du problème Beaucoup de déchets de code Problèmes de performance Le concept du fix “pansement”
24. Responsive Mobile Site Responsive Mobile Site Cette stratégie consiste à séparer un site qui utilise le RWD dans un sous domaine m-dot.
25. Responsive Mobile Site Avantages et inconvénients Mise en place avec peu de risques Apprendre à être flexible Permet de repérer des éléments non nécessaires Un futur Mobile-first Cela reste un site m-dot Fix “pansement” Le projet a des chances d’être tué dans l’oeuf
26. Mobile-first Responsive Design Mobile-first Responsive Design Cette approche consiste à créer une interface qui s’accorde avec les contraintes du mobile, et ensuite améliore peu à peu l’expérience selon l’ espace disponible.
27. Responsive Mobile Site Avantages et inconvénients Un projet Mobile-first est un nouveau départ La question de la performance est centrale Considération multi-devices Future-friendly Consommateur de temps Nécessite un “shift” mental Difficultés niveau organisationnels
28. Piecemeal Piecemeal Cette stratégie consiste à découper un re-design en petites parties. Comme le retrofitting, il est impossible d’effectuer un re-design massif. C’est pourquoi certaines compagnies préfèrent y aller par étape. Il existe plusieurs types de Piecemeal.
29. Piecemeal Page par page Le re-design page par page prend une sous-liste de pages. Des compagnies comme Microsoft ont adapté des homepages en RWD, tout en laissant la majorité des pages intérieures en desktop uniquement.
30. Piecemeal Avantages et inconvénients Donne une grande visibilité Permet d’apprendre à être flexible Chances accrues de lancement du projet Aucune continuité de l’expérience utilisateur Re-design de court terme L’étape suivante a des chances d’être mise de côté
31. Piecemeal Composant par composant Certaines compagnies préfèrent cibler le re- design sur des éléments plus précis, au niveau composant. Quand l’ensemble de l’UI est responsive, il suffit de changer le viewport.
32. Piecemeal Avantages et inconvénients Permet l’introduction graduelle des utilisateurs Permet le découpage de l’UI en composant Meilleure vision de l’effort nécessaire Les utilisateurs peuvent être destabilisés par une UI “Frankestein” Peut être arrêté au milieu du processus Problèmes de co-existence technique
33. Quelques projets responsives
34. Smashing Magazine http://bit.ly/1coLfNA Clearleft http://bit.ly/1oa8ME3 Montage http://bit.ly/1s0FI7G Metronic http://bit.ly/1AwxyYL A List Apart http://bit.ly/OVDW8y Simon Collison http://bit.ly/1zsMRjN Quelques projets responsive
35. Techniques RWD
36. CSS Media Queries CSS Media Queries Les CSS Media Queries permettent de définir des conditions par rapport aux capacités d’un device. Largeur et hauteur de la fenêtre du navigateur, largeur et hauteur de l’écran du device, orientation, résolution, etc.
37. CSS Media Queries // Between 640px and 1136px @media only screen and (min-device-width: 640px) and (max- device-width: 1136px) {} // More or equal than 2 pixel ratio @media only screen and (-webkit-min-device-pixel-ratio: 2) {} // Landscape device orientation @media only screen and (orientation: landscape) {}
38. CSS Media Queries // Default background image div { background: url(/images/img@440x220.jpg); } // Small devices background image @media only screen and (min-device-width: 320px) and (max- device-width: 768px) { div { background: url(/images/img@240x100.jpg); } }
39. CSS Media Queries // Less script div { background: url(/images/img@440x220.jpg); @media only screen and (min-device-width: 320px) and (max- device-width: 768px) { background: url(/images/img@240x100.jpg); } }
40. Ecran HD Ecran HD Il est nécessaire de configurer des media queries pour charger le bon set d’images selon le DPI de l’écran. Sans cela, dans le cas d’un écran low DPI, l’ image pourrait être trop lourde, et dans l’autre cas, l’image pourrait être pixelisée.
41. Médias adaptés Médias adaptés L’une des difficultés les plus grandes du RWD, c’ est de fournir des médias adaptés au client. Il est très important de toujours maintenir le scope d’un développement mobile. Il est donc essentiel d’éviter de charger des médias plus lourds que nécessaires.
42. Valeurs relatives Valeurs relatives En RWD, savoir quand utiliser une valeur relative peut simplifier le CSS et maximiser le meilleur résultat niveau structure. Marges extérieures, marges intérieures, taille de police, etc.
43. JavaScript Media Queries JavaScript Media Queries De base, l’API HTML5 permet l’utilisation de la méthode window.matchMedia(). var mq = window.matchMedia(‘(min-width: 500px)’); if (mq.matches) {} else {} Attention au support de cette méthode pour les navigateurs (IE10+, Android Browser 4+).
44. JavaScript Media Queries Sinon, il est possible de configurer les media queries en CSS, pour éviter de dupliquer la définition des conditions entre le CSS et le JavaScript. Cependant, cet avantage a aussi un inconvénient : un resize de l’interface n’appliquera pas les changements au JavaScript.
45. JavaScript Media Queries Des libraries existent pour améliorer l’utilisation des media queries en JavaScript. enquire.js http://bit.ly/1tYyrVz respond.js http://bit.ly/1hrOxm9 matchMedia.js http://bit.ly/1mVFriq
46. Merci !