Conception Web réactive : Ce que c'est et comment l'utiliser
De nos jours, presque tous les nouveaux clients veulent une version mobile de leur site web. Après tout, c'est pratiquement indispensable : un design pour le BlackBerry, un autre pour l'iPhone, l'iPad, le netbook, le Kindle - et toutes les résolutions d'écran doivent également être compatibles. Cliquez ici pour plus d’informations sur le Responsive design.
Dans les cinq prochaines années, nous devrons probablement concevoir des designs pour un certain nombre d'autres inventions. Quand la folie s'arrêtera-t-elle ? Pas tout à fait, bien sûr. Dans le domaine de la conception et du développement de sites Web, nous arrivons rapidement à un point où nous ne pouvons plus suivre l'évolution des nouvelles résolutions et des nouveaux appareils.
Pour de nombreux sites Web, créer une version du site pour chaque résolution et chaque nouvel appareil serait impossible, ou du moins peu pratique. Devrions-nous subir les conséquences de la perte de visiteurs d'un appareil, au profit de l'obtention de visiteurs d'un autre appareil ? Ou existe-t-il une autre option ?
Qu'est-ce que le Responsive Web Design ?
Le Responsive Web design est une approche qui suggère que la conception et le développement doivent répondre au comportement et à l'environnement de l'utilisateur en fonction de la taille de l'écran, de la plate-forme et de l'orientation.
Cette pratique consiste en un mélange de grilles et de mises en page flexibles, d'images et d'une utilisation intelligente des media queries CSS. Lorsque l'utilisateur passe de son ordinateur portable à son iPad, le site Web doit automatiquement s'adapter à la résolution, à la taille de l'image et aux capacités de script.
Il faut également tenir compte des paramètres de l'appareil ; si l'iPad est équipé d'un VPN pour iOS, par exemple, le site web ne doit pas bloquer l'accès de l'utilisateur à la page. En d'autres termes, le site Web devrait disposer de la technologie nécessaire pour répondre automatiquement aux préférences de l'utilisateur.
Ainsi, il ne serait pas nécessaire de prévoir une phase de conception et de développement différente pour chaque nouveau gadget sur le marché.
Le concept du Responsive Web Design
Ethan Marcotte a écrit un article d'introduction à cette approche, Responsive Web Design, pour A List Apart. Elle découle de la notion de conception architecturale réactive, selon laquelle une pièce ou un espace s'adapte automatiquement au nombre et au flux de personnes qui s'y trouvent :
"Récemment, une discipline émergente appelée "architecture réactive" a commencé à se demander comment les espaces physiques peuvent répondre à la présence des personnes qui les traversent.
Grâce à une combinaison de robotique intégrée et de matériaux tendus, les architectes expérimentent des installations artistiques et des structures murales qui se plient, s'étirent et se dilatent à l'approche des foules.
Des capteurs de mouvement peuvent être associés à des systèmes de climatisation pour ajuster la température et l'éclairage ambiant d'une pièce à mesure qu'elle se remplit de monde.
Des entreprises ont déjà produit une "technologie de verre intelligent" qui peut s'opacifier automatiquement lorsque les occupants d'une pièce atteignent un certain seuil de densité, leur offrant ainsi une couche supplémentaire d'intimité."
Transplantez cette discipline sur la conception de sites web, et vous obtenez une idée similaire mais totalement nouvelle. Pourquoi devrions-nous créer un design Web personnalisé pour chaque groupe d'utilisateurs ; après tout, les architectes ne conçoivent pas un bâtiment pour chaque taille et type de groupe qui le traverse ?
Tout comme l'architecture réactive, le Web design devrait s'adapter automatiquement. Il ne devrait pas nécessiter d'innombrables solutions sur mesure pour chaque nouvelle catégorie d'utilisateurs.
De toute évidence, nous ne pouvons pas utiliser des capteurs de mouvement et la robotique pour accomplir cette tâche comme le ferait un bâtiment. La conception Web réactive exige un mode de pensée plus abstrait.
Toutefois, certaines idées sont déjà mises en pratique : mises en page fluides, requêtes média et scripts capables de reformater les pages Web et le balisage sans effort (ou automatiquement).
Mais le responsive Web design ne se limite pas à des résolutions d'écran ajustables et à des images redimensionnables automatiquement, il s'agit plutôt d'une toute nouvelle façon de penser la conception. Parlons de toutes ces fonctionnalités, ainsi que d'autres idées en cours d'élaboration.
Plus d'informations après le saut ! Continuer la lecture ci-dessous
Découvrez les ateliers Smashing Online sur le front-end et l'UX, avec des conseils pratiques, des sessions en direct, des enregistrements vidéo et des questions-réponses conviviales. Sur les systèmes de conception, l'UX, la performance web et CSS/JS. Avec Brad Frost, Stephanie Troeth et bien d'autres.
Accéder aux ateliers en ligne
Panneau de présentation
Ajuster la résolution d'écran
L'augmentation du nombre d'appareils s'accompagne d'une variation des résolutions d'écran, des définitions et des orientations. De nouveaux appareils avec de nouvelles tailles d'écran sont développés chaque jour, et chacun de ces appareils peut gérer des variations de taille, de fonctionnalité et même de couleur.
Certains sont en mode paysage, d'autres en mode portrait, d'autres encore complètement carrés. Comme le montre la popularité croissante de l'iPhone, de l'iPad et des smartphones avancés, de nombreux nouveaux appareils sont capables de passer du portrait au paysage au gré de l'utilisateur. Comment concevoir pour ces situations ?
Responsive web design - Portrait Paysage
Modes portrait et paysage.
Outre la conception pour les modes paysage et portrait (et la possibilité de changer ces orientations en un instant lors du chargement de la page), nous devons tenir compte des centaines de tailles d'écran différentes. Oui, il est possible de les regrouper en grandes catégories, de concevoir pour chacune d'entre elles et de rendre chaque conception aussi flexible que nécessaire.
Mais cela peut être écrasant, et qui sait ce que seront les chiffres d'utilisation dans cinq ans ? En outre, de nombreux utilisateurs n'optimisent pas leur navigateur, ce qui laisse beaucoup trop de place à la diversité des tailles d'écran.
Morten Hjerde et quelques-uns de ses collègues ont relevé des statistiques sur environ 400 appareils vendus entre 2005 et 2008. Voici quelques-uns des plus courants : responsive web design - Tailles. Quelques-unes des tailles d'écran les plus courantes entre 2005 et 2008.
Depuis lors, de nouveaux appareils sont apparus. Il est évident que nous ne pouvons pas continuer à créer des solutions personnalisées pour chacun d'entre eux. Alors, comment faire face à cette situation ?
Une partie de la solution : Tout est flexible
Il y a quelques années, lorsque les mises en page flexibles étaient presque un "luxe" pour les sites Web, les seules choses qui étaient flexibles dans une conception étaient les colonnes de mise en page (éléments structurels) et le texte.
Les images pouvaient facilement briser les mises en page, et même les éléments structurels flexibles brisaient la forme d'une mise en page lorsqu'ils étaient suffisamment poussés. Les conceptions flexibles ne l'étaient pas vraiment ; elles pouvaient varier de quelques centaines de pixels, mais elles ne pouvaient souvent pas s'adapter à un grand écran d'ordinateur ou à un netbook.
Aujourd'hui, nous pouvons rendre les choses plus flexibles. Les images peuvent être ajustées automatiquement et nous disposons de solutions de contournement pour que les mises en page ne se cassent jamais (bien qu'elles puissent être écrasées et illisibles dans le processus).
Bien qu'il ne s'agisse pas d'un correctif complet, cette solution nous offre beaucoup plus d'options. Elle est parfaite pour les appareils qui passent en un instant de l'orientation portrait à l'orientation paysage ou lorsque les utilisateurs passent d'un grand écran d'ordinateur à un iPad.
Dans son article, Ethan Marcotte a créé un exemple de conception Web qui présente cette mise en page plus flexible. L'ensemble de la conception est un joli mélange de grilles fluides, d'images fluides et de balisage intelligent lorsque cela est nécessaire. La création de grilles fluides est une pratique assez courante, et il existe un certain nombre de techniques pour créer des images fluides :
Cacher et révéler des parties d'images
Création d'images composites coulissantes
Pour plus d'informations sur la création de sites Web fluides, consultez le livre "Flexible Web Design : Creating Liquid and Elastic Layouts with CSS" de Zoe Mickley Gillenwater, et téléchargez l'exemple de chapitre "Creating Flexible Images".
En outre, Zoe fournit la liste exhaustive suivante de didacticiels, de ressources, d'inspiration et de meilleures pratiques sur la création de grilles et de mises en page flexibles : "Ressources essentielles pour la création de mises en page liquides et élastiques".
Si, d'un point de vue technique, tout cela est facilement réalisable, il ne s'agit pas seulement de brancher ces fonctionnalités et d'en finir. Regardez le logo dans cette conception, par exemple :
Recadrage du logo
Dans cet exemple de logo, l'image est divisée en deux : l'arrière-plan, défini pour être recadré et conserver sa taille, et l'autre image redimensionnée proportionnellement.
Si elle était trop petite, l'image aurait l'air d'être de mauvaise qualité, mais il était important de garder le nom du site Web visible et de ne pas le couper. L'image est donc divisée en deux : l'une (de l'illustration) est placée en arrière-plan, pour être recadrée et conserver sa taille, et l'autre (du nom) est redimensionnée proportionnellement.
<h1 id="logo"><a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer" /></a></h1>
Ci-dessus, l'élément h1 contient l'illustration comme arrière-plan, et l'image est alignée sur l'arrière-plan du conteneur (l'en-tête).
Ce n'est qu'un exemple du type de réflexion qui rend la conception Web réactive vraiment efficace. Mais même avec des corrections intelligentes comme celle-ci, une mise en page peut devenir trop étroite ou trop courte pour avoir l'air correcte. Dans l'exemple du logo ci-dessus (bien qu'il fonctionne), l'idéal serait de ne pas recadrer la moitié de l'illustration ou d'éviter que le logo soit si petit qu'il devienne illisible et "flotte" vers le haut.Images flexibles
L'un des principaux problèmes à résoudre dans le cadre de la conception Web réactive est le travail avec les images. Il existe un certain nombre de techniques pour redimensionner les images de manière proportionnelle, et beaucoup sont faciles à réaliser. L'option la plus populaire, mentionnée dans l'article d'Ethan Marcotte sur les images fluides mais expérimentée pour la première fois par Richard Rutter, consiste à utiliser la largeur maximale de CSS pour une correction facile.