Qu'est-ce que la conception réactive ?

Il n'y a pas si longtemps, les concepteurs n'avaient pas vraiment besoin de s'inquiéter de l'apparence des sites Web sur les téléphones mobiles et les tablettes. Les téléphones n'étaient pas encore vraiment pratiques pour la visualisation sur le Web, et avant l'iPad, les tablettes étaient plus une nouveauté qu'un élément essentiel.

De toute évidence, tout cela a changé, et la plupart des experts en technologie prédisent que dans les prochaines années, probablement plus tôt que tard, la navigation mobile dépassera la navigation sur ordinateur en tant que moyen dominant de visualiser le Web.

Avec une gamme de tailles d'écran et d'appareils en constante évolution, y compris les consoles de jeux vidéo et les téléviseurs Internet, les anciennes méthodes de conception Web ne sont tout simplement plus à la hauteur de la tâche. Et avec les entreprises réalisant la nécessité d'optimiser leur expérience en ligne pour les utilisateurs mobiles, les concepteurs qui ne s'adaptent pas seront laissés pour compte.

Note de l'éditeur : ce qui suit est une introduction à la conception réactive pour débutants, qui n'est pas destinée aux concepteurs Web plus expérimentés.

Les principales composantes de la conception réactive

C'est là qu'intervient le Responsive Web Design, un contenu et/ou une mise en page qui s'adapte automatiquement à la taille de l'écran sur lequel il est visualisé. À la base, les trois éléments principaux de Responsive Design sont une grille flexible, des images flexibles et des Media Queries, ces dernières introduites dans le cadre des CSS3. Plus d'informations sur ceux-ci dans un instant.

Grilles flexibles

Les grilles flexibles sont essentiellement des thèmes et des modèles dans lesquels les éléments de conception sont définis en pourcentages plutôt qu'en pixels. Avec des pourcentages comme unité de mesure, cela signifie qu'un élément conçu à 50 % occupera toujours la moitié de l'écran, quelle que soit sa taille.

Images flexibles

Dans leur forme la plus basique, les images flexibles ne pourraient pas être plus faciles à créer en écrivant une règle simple qui stipule :

 img { max-width: 100%; }

Essentiellement, cela signifie que si un élément est plus grand que son conteneur, la règle l'oblige à correspondre à la largeur de ce conteneur. Et puisque les navigateurs modernes redimensionnent les images proportionnellement, le rapport d'aspect de l'image est également préservé. De plus, la règle des 100 % peut également être utilisée pour presque tous les autres éléments, comme les vidéos intégrées.

La requête média

Depuis l'introduction des types de médias dans CSS 2.1, les feuilles de style incluent beaucoup plus les appareils mobiles et autres. Les types de médias permettent essentiellement au style de cibler des classes spécifiques d'appareils Web, ces types comprenant les ordinateurs de poche, les écrans et les téléviseurs. Mais avec peu de normalisation entre les appareils et peu de soutien de la part des fabricants d'appareils, les types de médias n'ont jamais été à la hauteur de leur potentiel.

Les Media Queries sont à la hauteur de ce potentiel et plus encore. Mais plutôt que de se préoccuper du type d'appareil comme le font les types de médias, Media Queries examine plutôt les capacités de l'appareil.

Une requête multimédia simple pourrait ressembler à ceci :

Les deux composants de la requête sont le type de média, défini comme écran, puis la requête réelle - (max-device-width: 480px) - qui demande essentiellement si la largeur de l'appareil est de 480px ou moins. Si tel est le cas, l'appareil charge generic.css. Si ce n'est pas le cas, le lien est ignoré, comme les autres, jusqu'à ce que la résolution correcte soit identifiée et que la feuille de style appropriée soit chargée.

Plus qu'une simple résolution

Mais la résolution n'est en aucun cas le seul élément de conception qui peut être contrôlé par l'utilisation de Media Queries. La largeur et la hauteur de la fenêtre du navigateur, l'orientation paysage et portrait, voire la mise en page, sont quelques-uns des autres paramètres pouvant être définis.

Par exemple, si une requête multimédia détecte qu'un appareil est un smartphone, une conception qui peut se charger en affichant trois colonnes avec une zone de texte et deux barres latérales verticales sur un écran d'ordinateur peut se charger sur l'écran du smartphone sous la forme d'une zone de texte pleine largeur avec le deux barres latérales comme éléments horizontaux en dessous.

Un état d'esprit flexible

Bien sûr, une exigence clé pour une conception flexible est que les concepteurs aient un état d'esprit de conception flexible. Malheureusement, la plupart des pages Web ne sont toujours pas très conviviales sur les appareils mobiles, principalement parce que la plupart des concepteurs conçoivent encore généralement uniquement pour le bureau avec les smartphones et les tablettes après coup. Peu de designers abordent la conception en pensant à plusieurs plates-formes.

Bien qu'il y ait une courbe d'apprentissage dans l'intégration des Media Queries dans les feuilles de style, c'est la transition de la conception avec des pixels à la conception avec des pourcentages qui arrête certains concepteurs de sites Web. En réalité, cependant, il n'y a vraiment pas beaucoup de différence dans la conception avec des pourcentages, et c'est aussi plus facile.

Considérez, par exemple, la différence entre l'attribution de largeurs de 100 % et de 100 pixels à deux éléments identiques. Dans l'un, vous pouvez être assuré que l'élément remplira l'écran, qu'il s'agisse de l'écran d'un ordinateur de bureau, d'un ordinateur portable ou d'un iPhone. Mais un élément de 100 pixels de large serait grand sur un écran d'iPhone de 480 pixels mais relativement petit sur un écran de bureau avec une résolution de 1600 × 900.

La conception réactive est synonyme d'affaires

Pour les entreprises, la principale raison de mettre en œuvre un design réactif est évidente. Plus il est facile pour les clients potentiels de naviguer et de trouver ce qu'ils recherchent, plus le taux de conversion est élevé. Mais pour de nombreux concepteurs, la conception réactive d'un site Web d'entreprise signifiait généralement simplement réduire la taille du contenu pour s'adapter à un écran plus petit. Quiconque a passé du temps à faire défiler et à zoomer pour trouver les informations qu'il recherche sait qu'une version miniature d'un site Web n'est pas la solution.

Une autre façon dont les entreprises et les concepteurs ont traité le problème de la conception pour un appareil mobile a été de créer un site distinct pour différents appareils avec des redirections automatiques en fonction de l'appareil. Cela permet de fournir la meilleure interface et d'éviter les chargements lents causés par JavaScript et les images volumineuses.

Mais il y a plusieurs inconvénients à cette approche. Certes, l'un d'entre eux étant les frais de création et de maintenance de plusieurs sites et de coordination du contenu sur ces sites. Et, bien sûr, il y a encore un autre nouveau site à construire lorsqu'un nouvel appareil sort. Heureusement, le Responsive Design, s'il est fait correctement, peut résoudre presque tous les problèmes de conception pour les appareils mobiles.