La conception réactive (également connue sous le nom de conception `` adaptative ''), où la même page Web présente la meilleure version de deux ou plusieurs mises en page artisanales en fonction de la largeur du navigateur, est l'option la plus puissante pour la plupart des sites Web. Pour voir pourquoi, il est utile d'examiner toutes les options disponibles pour les concepteurs de sites Web:
Dispositions fixes
Une largeur de page fixe, où la largeur du contenu est la même quelle que soit la largeur du navigateur, offre une apparence uniforme sur tous les appareils et peut nécessiter moins de codage, de réflexion et de maintenance que des conceptions plus flexibles.
Certains estiment que les mises en page à largeur fixe sont des vestiges d'une époque révolue, où les gens recherchaient la perfection des pixels et une apparence uniforme dans tous les navigateurs. Andy Clarke, auteur de Hardboiled Web Design, estime que cette façon de penser est morte:
"Dans le passé, il était courant de lutter dur pour créer un site Web qui ressemblait et fonctionnait de la même manière sur tous les navigateurs, quelles que soient leurs capacités. Pour ce faire, il fallait faire des compromis et éviter d'utiliser des technologies non prises en charge par tous les navigateurs.
Est-ce dur?
Ne vous moquez pas, joues douces. Ce n'est pas la façon de faire évoluer notre métier ou de construire un meilleur Web. Ce genre de pensée à l'ancienne nous retient. Cela nous oblige à trouver des excuses pour ne pas faire ce que nous savons être la bonne chose. Le pire que nous, en tant que gardiens actuels du Web, pouvons faire, c'est de permettre à tout ce qui limite ce qui est possible. "
- Andy Clarke, Hardboiled Web Design, p6 [Édition PDF disponible ici ]
Alors que certains considèrent les mises en page fixes comme la hauteur de la paresse, les conceptions à largeur fixe sont toujours choisies par des équipes de conception très intelligentes plutôt que des mises en page fluides ou adaptatives. Apple, par exemple, sert actuellement la même disposition aux iMacs qu'aux iPads et iPhones. Pourquoi la société chargée d'amener la navigation Web mobile vers les masses n'optimise-t-elle pas son site Web pour les appareils mobiles?
Parce qu'il ne pense pas en avoir besoin.
Au lieu d'adapter son site Web pour les petits écrans, Apple a conçu du matériel et des logiciels pour gérer confortablement les sites Web larges sur ces écrans. Apple pense qu'une expérience «optimisée pour les mobiles» est mieux fournie dans une application native, pas dans une fenêtre de navigateur. C'est pourquoi il propose l' application Apple Store au lieu de servir une boutique Web optimisée pour les mobiles. Et c'est pourquoi il encourage les éditeurs à proposer des applications de magazine sur des sites Web personnalisés. La philosophie actuelle de conception Web d'Apple est claire: une seule disposition pour les gouverner fonctionne parfaitement. Pour tout le reste, il y a une application pour ça.
Pour cette seule raison, certains diraient que les mises en page fixes restent plus pertinentes que jamais; ils diraient que les mises en page fluides et adaptatives ne font que combler les lacunes pendant que nous attendons que le navigateur mobile s'améliore, et que HTML et JavaScript évoluent et tentent les développeurs de s'éloigner des magasins d'applications cloisonnés.
À mon avis, cependant, pincer-taper-glisser-faire défiler votre chemin sur le Web pendant n'importe quelle durée sur un appareil mobile n'est pas très amusant du tout, même sur un iPhone. Si vous croyez que la meilleure expérience Web est celle qui fait de la lecture, de la publication et de l'interaction avec des sites Web un plaisir plutôt qu'une corvée, quel que soit l'appareil que vous utilisez, vous devez concéder à un moment donné la diffusion de contenu adapté à chacun le visiteur vaut la peine d'être considéré.
Agencements fluides
Les mises en page fluides, où la largeur de la page s'écoule pour remplir l'écran (souvent jusqu'à une largeur maximale imposée), promettent une meilleure expérience sur différentes plates-formes en fournissant du contenu à une largeur plus adaptée à la fenêtre d'affichage.
En pratique, les dispositions fluides causent plus de problèmes qu'elles n'en résolvent, comme l'a noté Cameron Moll dans cette boutade:
"... les conceptions fluides résolvent tous les problèmes d'agencement de la même manière que les ordinateurs rendent les bureaux sans papier, c'est-à-dire qu'ils ne le font pas."
- Cameron Moll, «Faut-il que tous les sites soient fluides?», Septembre 2006
Lorsque vous adoptez une mise en page fluide, vous abandonnez le contrôle de votre conception et acceptez que le texte se rembobine, les images redistribuent, les longueurs de ligne varient de façon imprévisible, le texte, les images et les éléments de navigation peuvent s'écraser à de petites largeurs et les colonnes sautent et flottent juste pour te contrarier.
Une mise en page fluide, certains pourraient dire, est également une option paresseuse. C'est l'approche du fusil à pompe pour la conception Web adaptative. Au lieu de fournir une expérience sur mesure avec trois ou quatre conceptions de largeur fixe soigneusement étudiées, vous offrez une expérience imprévisible dans l'espoir que cela puisse fonctionner sur de grands et petits écrans, et espérons combler toutes les lacunes que vous n'avez pas entièrement prises en compte entre.
Cela ne rend pas les dispositions fluides inutiles. Il existe des moyens de les faire fonctionner. Le blog 456 Berea St , par exemple, adopte une mise en page fluide jusqu'à une largeur donnée, après quoi il en utilise une fixe pour quelque chose de plus grand. Et à de très petites largeurs, la barre latérale disparaît pour utiliser une seule colonne qui facilite la lecture sur les petits écrans. Mais ce n'est plus une mise en page fluide. C'est quelque chose de mieux. C'est un design réactif .
Mises en page réactives
Une mise en page `` réactive '' ou `` adaptative '' - où la même page Web présente une version de deux ou plusieurs mises en page conçues en fonction de la largeur du navigateur du visiteur - est un élément clé de l'amélioration progressive, qui vise à donner à un site Web le meilleur aspect il peut pour chaque visiteur.
Choisir d'adopter une mise en page adaptative est «un excellent service client», selon Aaron Gustafson, l'auteur d' Adaptive Web Design. Si nous concevons bien nos sites, dit-il, les visiteurs devraient avoir une expérience parfaitement conçue sans se rendre compte que nous en faisons tout un plat:
"En tant que concepteurs et développeurs Web, nous devons nous efforcer d'être aussi bons dans notre travail que ce serveur attentif et discret, mais ce n'est pas une tâche simple. Tout comme un serveur n'a aucune idée si un client qui passe par la porte aura besoin de fréquentes recharges ou peu, nous n'avons aucun moyen de connaître les besoins d'un utilisateur particulier lorsqu'ils arrivent sur notre site. Au lieu de cela, nous devons augmenter pour répondre à ces besoins. Si nous sommes vraiment bons, nous pouvons le faire sans que nos clients ne se rendent même compte que nous sommes ce qui leur est particulièrement utile. Heureusement, grâce à l'approche axée sur l'utilisateur et le contenu de l'amélioration progressive (par opposition à la nouvelle approche de navigateur de la dégradation gracieuse), cela est facilement réalisable. "
- Aaron Gustafson, Adaptive Web Design, p12 [édition PDF disponible ici ]
La prise de conscience que notre travail en tant que concepteurs Web consiste à s'adapter à nos visiteurs et non à les forcer à nous adapter - comme Apple pourrait nous le faire croire - est un développement assez récent dans la conception Web. C'est, à mon avis, une sorte de renaissance: nous avons fini de choisir les bonnes habitudes des années de conception d'impression. Il faut maintenant éliminer les entraves imposées par le travail dans un espace prédéfini sur la page imprimée.
Alors qu'autrefois nous traitions le navigateur comme un canevas fixe, nous acceptons maintenant qu'aucun canevas défini n'existe du tout, et cela devient de plus en plus clair à partir de l'énorme mélange de tailles d'écran que vous commencez sans aucun doute à voir dans vos statistiques de visiteur . Au lieu de traiter chaque nouvel appareil comme une `` taille de page '' unique à cibler (et de devoir ensuite rallier des troupes lorsqu'un nouvel appareil sort), nous pouvons suivre des conventions plus pérennes.
Nous pouvons penser en termes de bandes - «grandes», «moyennes» et «petites» - au lieu de penser à des téléphones et des tablettes spécifiques, puis concevoir des sites pour leur donner le meilleur d'eux-mêmes. Quels que soient les nouveaux appareils qui sortent, ils s'intégreront dans une bande ou une autre, et - même s'ils sont juste à la frontière entre deux bandes - nous avons toujours plus de contrôle sur l'expérience que si nous avions utilisé une solution fixe ou fluide disposition.
En Responsive Web Design, Ethan Marcotte propose cet appel aux armes:
"Nous devons lâcher prise.
Plutôt que de créer des conceptions déconnectées, chacune adaptée à un appareil ou un navigateur particulier, nous devrions plutôt les traiter comme des facettes de la même expérience. En d'autres termes, nous pouvons créer des sites qui sont non seulement plus flexibles, mais qui peuvent s'adapter aux médias qui les rendent.
En bref, nous devons pratiquer
la conception de sites Web réactifs. Nous pouvons adopter la flexibilité inhérente au Web, sans renoncer au contrôle dont nous avons besoin en tant que concepteurs. Tout cela en intégrant des technologies basées sur des normes dans notre travail et en apportant un léger changement à notre philosophie de conception en ligne. "
- Ethan Marcotte, Responsive Web Design, p8 [édition PDF disponible ici ]
Mais quels groupes utilisez-vous? Ethan Marcotte recommande les trois éléments suivants dans la conception de sites Web réactifs. (Pour savoir ce qu'ils font et comprendre les mises en garde, vous voudrez peut-être prendre le livre. )
@media screen and (max-width: 768px) {
...
} @media screen and (max-width: 520px) {
...
} @media screen and (min-width: 1200px) {
...
}
Il existe également une gamme de frameworks CSS conçus pour aider à créer des sites Web adaptatifs, y compris le framework Less de Joni Korpi .
Au lieu d'utiliser des points d'arrêt arbitraires, il est peut-être préférable de laisser la conception de votre site dicter les bandes. Réduisez la largeur de l'écran de votre navigateur et, chaque fois que votre conception se casse, cette largeur doit être l'un de vos «points d'arrêt». Continuez à réduire la largeur et à ajouter des points d'arrêt avec les requêtes multimédia CSS jusqu'à ce que votre conception soit bonne à toutes les largeurs. De cette façon, votre conception sera bonne sur tous les appareils au lieu de seulement la poignée de tailles d'écran dans lesquelles vous avez essayé de le classer. Si vous utilisez Chrome, activer les outils de développement (Affichage> Développeur> Outils de développeur) et réduire la largeur de votre navigateur vous donne une lecture utile de la largeur actuelle dans le coin supérieur droit que vous pouvez utiliser pour déterminer où vos points d'arrêt doivent être.
Une autre approche populaire à considérer est la conception réactive Mobile First , où votre feuille de style principale gère les styles pour les plus petits appareils, et les requêtes multimédias traitent de plus grandes largeurs d'écran, et non l'inverse. Cela peut entraîner des performances plus rapides sur les appareils mobiles, en particulier si vous utilisez beaucoup d'images d'arrière-plan CSS. (Vous construisez les points d'arrêt de la même manière - commencez simplement avec la largeur de votre navigateur au minimum et travaillez vers le haut. Et n'oubliez pas de tester sur autant d'appareils réels que possible, pensez à visiter un appareil ouvert Lab .)
En bref, quand il est bien fait, la conception adaptative est une joie à voir et à vivre à la fois en tant que concepteur Web et utilisateur Web de jardin commun. Prenez le site de la firme japonaise Information Architects , par exemple:
Sur un iPhone
Sur un iPad
Sur un iMac
Tout comme Aaron Gustafson l'avait prédit, vous ne savez même pas que vous êtes pris en charge jusqu'à ce que vous voyiez les dessins sur la même page.
L'expérience ne pouvait guère être plus agréable dans chaque cas; vous n'avez pas besoin de penser à la page ou d'interagir avec elle pour commencer à lire le contenu, passer du temps à vous demander pourquoi cela semble étrange sur votre écran, ou zoomer pour voir les éléments de navigation avant de pouvoir les toucher, car quelqu'un a déjà résolu ces problèmes pour vous. Et c'est pourquoi la conception réactive l'emporte presque toujours sur les autres options.