Les bases du responsive web design

Créer des sites qui répondent aux besoins et aux fonctionnalités de l'appareil sur lequel ils sont consultés

L'utilisation d'appareils mobiles pour naviguer sur le Web continue de croître à un rythme astronomique. Ces appareils sont souvent limités par la taille de l'écran et nécessitent une approche différente en termes de disposition du contenu à l'écran.

Le responsive web design, initialement défini par Ethan Marcotte dans A List Apart, répond aux besoins des utilisateurs et des appareils qu'ils utilisent. La mise en page change en fonction de la taille et des fonctionnalités de l'appareil. Par exemple, sur un téléphone, les utilisateurs verront le contenu affiché dans une vue à colonne unique, tandis qu'avec une tablette, le même contenu s'afficherait dans deux colonnes.

Dans cette vidéo, la conception passe d'une fenêtre d'affichage étroite à une fenêtre d'affichage large, en fonction de la surface d'écran disponible.

Il existe une multitude de tailles d'écran différentes pour les téléphones, les "phablettes", les tablettes, les ordinateurs de bureau, les consoles de jeu, les téléviseurs et même les accessoires connectés. Les tailles d'écran changent constamment. Il est donc important que votre site s'adapte à n'importe quelle taille d'écran, aujourd'hui ou à l'avenir. De plus, les appareils disposent de différentes fonctionnalités avec lesquelles nous interagissons. Certains de vos visiteurs, par exemple, utiliseront un écran tactile. Le responsive design moderne tient compte de tous ces éléments pour optimiser l'expérience pour tous.

Définir la fenêtre d'affichage

Les pages optimisées pour différents appareils doivent inclure une balise de fenêtre d'affichage Meta dans l'en-tête du document. Une balise de fenêtre d'affichage Meta indique au navigateur comment contrôler les dimensions et la mise à l'échelle de la page.

Pour offrir une expérience optimale, les navigateurs mobiles affichent la page sur une largeur d'écran d'ordinateur de bureau (généralement d'environ 980px, bien que cela varie d'un appareil à l'autre), puis tentent d'améliorer l'apparence du contenu en augmentant les tailles de police et en redimensionnant le contenu pour l'adapter à l'écran. Cela signifie que les tailles de police peuvent sembler incohérentes pour les utilisateurs, qui devront peut-être appuyer deux fois sur l'écran ou pincer pour zoomer afin de voir et d'interagir avec le contenu.

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1">
    …
  </head>
  …

L'utilisation de la valeur de la fenêtre d'affichage Meta width=device-width indique à la page de respecter la largeur de l'écran en pixels indépendants de l'appareil. Un pixel indépendant de l'appareil (ou de la densité) est la représentation d'un seul pixel. Sur un écran haute densité, ce pixel peut être constitué de nombreux pixels physiques. Cela permet à la page d'ajuster la mise en page du contenu pour l'adapter à différentes tailles d'écran, qu'il soit affiché sur un petit téléphone mobile ou sur un grand écran d'ordinateur.

Capture d&#39;écran d&#39;une page avec le texte difficile à lire, car il fait l&#39;objet d&#39;un zoom arrière important.
Exemple de chargement de la page sur un appareil sans la balise Meta de fenêtre d'affichage. Consultez cet exemple sur Glitch.
Capture d&#39;écran de la même page avec le texte dans une taille lisible.
Exemple de chargement de la page sur un appareil avec la balise Meta de la fenêtre d'affichage. Consultez cet exemple sur Glitch.

Certains navigateurs gardent la largeur de la page constante lors de la rotation en mode Paysage et font un zoom au lieu de procéder à l'ajustement de la page pour remplir l'écran. L'ajout de la valeur initial-scale=1 indique aux navigateurs d'établir une relation 1:1 entre les pixels CSS et les pixels indépendants de l'appareil, quelle que soit l'orientation de l'appareil, et permet à la page de bénéficier de toute la largeur du mode paysage.

L'audit Lighthouse Ne comporte pas de balise <meta name="viewport"> avec width ou initial-scale peut vous aider à automatiser le processus permettant de vérifier que vos documents HTML utilisent correctement la balise Meta de la fenêtre d'affichage.

Assurez-vous que la fenêtre d'affichage est accessible

En plus de définir un initial-scale, vous pouvez également définir les attributs suivants sur la fenêtre d'affichage:

  • minimum-scale
  • maximum-scale
  • user-scalable

Lorsqu'elles sont définies, elles peuvent empêcher l'utilisateur de zoomer dans la fenêtre d'affichage, ce qui peut entraîner des problèmes d'accessibilité. Par conséquent, nous vous déconseillons d'utiliser ces attributs.

Adapter la taille du contenu à la fenêtre d'affichage

Sur les ordinateurs et les appareils mobiles, les utilisateurs ont l'habitude de faire défiler les sites Web verticalement, mais pas horizontalement. Forcer l'utilisateur à faire défiler l'écran horizontalement ou à faire un zoom arrière pour voir la page entière nuit à l'expérience utilisateur.

Lorsque vous développez un site pour mobile avec une balise de fenêtre d'affichage Meta, il est facile de créer accidentellement du contenu de page qui ne s'adapte pas tout à fait à la fenêtre d'affichage spécifiée. Par exemple, une image affichée avec une largeur plus large que la fenêtre d'affichage peut entraîner un défilement horizontal de la fenêtre d'affichage. Vous devez ajuster ce contenu pour qu'il s'adapte à la largeur de la fenêtre d'affichage, afin que l'utilisateur n'ait pas besoin de le faire défiler horizontalement.

Le contenu n'est pas correctement dimensionné pour la fenêtre d'affichage. L'audit Lighthouse peut vous aider à automatiser le processus de détection du contenu qui dépasse.

Images

Les dimensions de l'image sont fixes. Si elle est plus grande que la fenêtre d'affichage, une barre de défilement s'affiche. Une façon courante de résoudre ce problème consiste à attribuer l'max-width de 100% à toutes les images. L'image sera ainsi réduite pour s'adapter à l'espace dont elle dispose, si la taille de la fenêtre d'affichage est inférieure à celle de l'image. Toutefois, comme max-width, et non width, est 100%, l'image ne s'étire pas plus que sa taille naturelle. Il est généralement prudent d'ajouter les éléments suivants à votre feuille de style afin de ne jamais rencontrer de problème lié aux images qui génèrent une barre de défilement.

img {
  max-width: 100%;
  display: block;
}

Ajouter les dimensions de l'image à l'élément img

Lorsque vous utilisez max-width: 100%, vous remplacez les dimensions naturelles de l'image. Toutefois, vous devez toujours utiliser les attributs width et height dans votre balise <img>. En effet, les navigateurs récents utilisent ces informations pour réserver de l'espace à l'image avant son chargement. Cela permet d'éviter les changements de mise en page lors du chargement du contenu.

Mise en page

Étant donné que les dimensions et la largeur de l'écran en pixels CSS varient considérablement d'un appareil à l'autre (par exemple, entre les téléphones et les tablettes, et même entre différents téléphones), le contenu ne doit pas se baser sur une largeur de fenêtre d'affichage particulière pour s'afficher correctement.

Auparavant, il était nécessaire d'utiliser des éléments de réglage pour créer une mise en page en pourcentage. Dans l'exemple ci-dessous, vous pouvez voir une mise en page en deux colonnes avec des éléments flottants, dimensionnés en pixels. Une fois que la fenêtre d'affichage devient plus petite que la largeur totale des colonnes, nous devons faire défiler l'écran horizontalement pour voir le contenu.

Capture d&#39;écran d&#39;une mise en page à deux colonnes avec la plupart de la deuxième colonne en dehors de la fenêtre d&#39;affichage
Mise en page flottante utilisant des pixels. Consultez cet exemple sur Glitch.

En utilisant des pourcentages pour les largeurs, les colonnes restent toujours un certain pourcentage du conteneur. Cela signifie que les colonnes deviennent plus étroites, au lieu de créer une barre de défilement.

Les techniques de mise en page CSS modernes telles que Flexbox, Grid Layout et Multicol facilitent grandement la création de ces grilles flexibles.

Flexbox

Cette méthode de mise en page est idéale lorsque vous disposez d'un ensemble d'éléments de différentes tailles et que vous souhaitez qu'ils s'intègrent confortablement dans une ou plusieurs lignes, les éléments plus petits prenant moins d'espace et les plus grands obtenant plus d'espace.

.items {
  display: flex;
  justify-content: space-between;
}

Dans le responsive design, vous pouvez utiliser Flexbox pour afficher les éléments sur une seule ligne ou les encapsuler sur plusieurs lignes à mesure que l'espace disponible diminue.

En savoir plus sur Flexbox

Mise en page sous forme de grille CSS

La mise en page sous forme de grille CSS permet de créer facilement des grilles flexibles. Si nous prenons l'exemple de création flottante précédent, plutôt que de créer nos colonnes avec des pourcentages, nous pourrions utiliser la mise en page en grille et l'unité fr, qui représente une partie de l'espace disponible dans le conteneur.

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

Vous pouvez également utiliser la grille pour créer des mises en page en grille régulières, avec autant d'éléments que possible. Le nombre de pistes disponibles diminue à mesure que la taille de l'écran diminue. Dans la démonstration ci-dessous, nous avons autant de fiches que possible par ligne, avec une taille minimale de 200px.

En savoir plus sur la mise en page sous forme de grille CSS

Mise en page sur plusieurs colonnes

Pour certains types de mise en page, vous pouvez utiliser la mise en page à plusieurs colonnes (Multicol), qui permet de créer un nombre responsif de colonnes avec la propriété column-width. Dans la démonstration ci-dessous, vous pouvez voir que des colonnes sont ajoutées s'il y a de la place pour une autre colonne 200px.

En savoir plus sur Multicol

Utiliser des requêtes média CSS pour la réactivité

Parfois, vous devrez apporter des modifications plus importantes à votre mise en page pour qu'elle accepte une certaine taille d'écran que ne le permettent les techniques présentées ci-dessus. C'est là que les requêtes média deviennent utiles.

Les requêtes média sont des filtres simples qui peuvent être appliqués aux styles CSS. Ils permettent de modifier facilement les styles en fonction des types d'appareils qui affichent le contenu ou des caractéristiques de cet appareil (par exemple, largeur, hauteur, orientation, possibilité de survoler l'écran et utilisation de l'appareil comme écran tactile).

Pour fournir différents styles d'impression, vous devez cibler un type de sortie afin d'inclure une feuille de style avec des styles d'impression comme suit:

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="stylesheet" href="print.css" media="print">
    …
  </head>
  …

Vous pouvez également inclure des styles d'impression dans votre feuille de style principale à l'aide d'une requête média:

@media print {
  /* print styles go here */
}

Pour le Responsive Web Design, nous interrogeons généralement les fonctionnalités de l'appareil afin de proposer une mise en page différente pour les petits écrans ou lorsque nous détectons que le visiteur utilise un écran tactile.

Requêtes média basées sur la taille de la fenêtre d'affichage

Les requêtes média nous permettent de créer une expérience responsive où des styles spécifiques sont appliqués aux petits et grands écrans, entre autres. La caractéristique que nous détectons ici est donc la taille de l'écran. Nous pouvons tester les éléments suivants.

  • width (min-width, max-width)
  • height (min-height, max-height)
  • orientation
  • aspect-ratio

Toutes ces fonctionnalités sont parfaitement compatibles avec les navigateurs. Pour en savoir plus, y compris sur les navigateurs compatibles, consultez les attributs width (largeur), height (hauteur), orientation et aspect-ratio sur MDN.

Requêtes multimédias basées sur la capacité de l'appareil

Compte tenu de la gamme d'appareils disponible, nous ne pouvons pas partir du principe que chaque grand appareil est un ordinateur de bureau ou portable standard, ni que les utilisateurs n'utilisent un écran tactile que sur un petit appareil. Avec des ajouts plus récents à la spécification des requêtes média, nous pouvons tester des fonctionnalités telles que le type de pointeur utilisé pour interagir avec l'appareil et si l'utilisateur peut pointer sur les éléments.

  • hover
  • pointer
  • any-hover
  • any-pointer

Essayez de regarder cette démonstration sur différents appareils, par exemple un ordinateur de bureau standard, un téléphone ou une tablette.

Ces nouvelles fonctionnalités sont compatibles avec tous les navigateurs récents. Pour en savoir plus, consultez les pages MDN sur le hover, le pointage rapide, le pointeur et le pointeur quelconque.

Utiliser any-hover et any-pointer

Les fonctionnalités any-hover et any-pointer testent si l'utilisateur peut pointer ou utiliser ce type de pointeur, même s'il ne s'agit pas de sa principale façon d'interagir avec son appareil. Soyez très prudent lorsque vous les utilisez. Forcer un utilisateur à passer à la souris lorsqu'il utilise son écran tactile n'est pas très convivial ! Toutefois, any-hover et any-pointer peuvent être utiles s'il est important de déterminer le type d'appareil d'un utilisateur. Par exemple, un ordinateur portable doté d'un écran tactile et d'un pavé tactile doit correspondre aux pointeurs grossiers et précis, en plus de la possibilité de survoler l'écran.

Choisir des points d'arrêt

Ne définissez pas de points d'arrêt basés sur les classes d'appareils. Définir des points d'arrêt en fonction d'appareils, de produits, de marques ou de systèmes d'exploitation spécifiques utilisés aujourd'hui peut entraîner un cauchemar pour la maintenance. C'est le contenu lui-même qui doit déterminer la façon dont la mise en page s'adapte à son conteneur.

Choisissez les points d'arrêt majeurs en commençant petit, puis en calculant

Concevez d'abord le contenu pour qu'il s'adapte à une petite taille d'écran, puis développez l'écran jusqu'à ce qu'un point d'arrêt devienne nécessaire. Cela vous permet d'optimiser les points d'arrêt en fonction du contenu et de maintenir le moins de points d'arrêt possible.

Reprenons l'exemple que nous avons vu au début: les prévisions météo. La première étape consiste à faire en sorte que les prévisions s'affichent correctement sur un petit écran.

Capture d&#39;écran d&#39;une application météo à la largeur d&#39;un appareil mobile
L'application sur une largeur étroite.

Ensuite, redimensionnez le navigateur jusqu'à ce qu'il y ait trop d'espace vide entre les éléments et que les prévisions soient tout simplement moins bonnes. La décision est quelque peu subjective, mais une valeur supérieure à 600px est certainement trop large.

Capture d&#39;écran d&#39;une application météo avec de grands écarts entre les éléments
À un stade où nous estimons que nous devrions modifier la conception de l'application.

Pour insérer un point d'arrêt au niveau de 600px, créez deux requêtes multimédias à la fin de votre code CSS pour le composant, l'une à utiliser lorsque le navigateur est 600px ou inférieur, et l'autre lorsqu'il est plus large que 600px.

@media (max-width: 600px) {

}

@media (min-width: 601px) {

}

Enfin, refactorisez le CSS. Dans la requête média pour une max-width de 600px, ajoutez le CSS destiné uniquement aux petits écrans. Dans la requête média pour une min-width de 601px, ajoutez du CSS pour les grands écrans.

Choisissez des points d'arrêt mineurs si nécessaire.

En plus de choisir des points d'arrêt majeurs lorsque la mise en page change de manière significative, il est également utile de s'adapter aux modifications mineures. Par exemple, entre les points d'arrêt majeurs, il peut être utile d'ajuster les marges ou la marge intérieure d'un élément, ou d'augmenter la taille de la police pour que la mise en page semble plus naturelle.

Commençons par optimiser la mise en page sur petit écran. Dans ce cas, nous allons améliorer la police lorsque la largeur de la fenêtre d'affichage est supérieure à 360px. Deuxièmement, lorsque l'espace est suffisant, nous pouvons séparer les températures haute et basse afin qu'elles soient sur la même ligne au lieu de se superposer. Et nous allons également agrandir un peu les icônes météo.

@media (min-width: 360px) {
  body {
    font-size: 1.0em;
  }
}

@media (min-width: 500px) {
  .seven-day-fc .temp-low,
  .seven-day-fc .temp-high {
    display: inline-block;
    width: 45%;
  }

  .seven-day-fc .seven-day-temp {
    margin-left: 5%;
  }

  .seven-day-fc .icon {
    width: 64px;
    height: 64px;
  }
}

De même, pour les grands écrans, il est préférable de se limiter à la largeur maximale du panneau de prévisions afin qu'il ne consomme pas toute la largeur de l'écran.

@media (min-width: 700px) {
  .weather-forecast {
    width: 700px;
  }
}

Optimiser le texte pour la lecture

Selon la théorie classique de la lisibilité, une colonne idéale doit contenir entre 70 et 80 caractères par ligne (environ 8 à 10 mots en anglais). Ainsi, chaque fois que la largeur d'un bloc de texte dépasse 10 mots, pensez à ajouter un point d'arrêt.

Capture d&#39;écran d&#39;une page de texte sur un appareil mobile
Texte lu sur un appareil mobile.
Capture d&#39;écran d&#39;une page de texte dans un navigateur pour ordinateur
Texte lu sur un navigateur pour ordinateur, avec un point d'arrêt ajouté pour limiter la longueur de la ligne.

Examinons de plus près l'exemple d'article de blog ci-dessus. Sur les petits écrans, la police Roboto de 1em fonctionne parfaitement avec 10 mots par ligne, mais les écrans plus grands nécessitent un point d'arrêt. Dans ce cas, si la largeur du navigateur est supérieure à 575px, la largeur idéale du contenu est 550px.

@media (min-width: 575px) {
  article {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
}

Éviter simplement de masquer du contenu

Soyez prudent lorsque vous choisissez le contenu à masquer ou à afficher en fonction de la taille de l'écran. Ne masquez pas simplement le contenu juste parce que vous ne pouvez pas l’adapter à l’écran. La taille de l'écran n'est pas un indicateur définitif de ce qu'un utilisateur peut vouloir. Par exemple, l'élimination du taux de pollen dans les prévisions météorologiques pourrait être un problème sérieux pour les personnes souffrant d'allergies au printemps, qui ont besoin de ces informations pour déterminer si elles peuvent sortir ou non.

Afficher les points d'arrêt des requêtes multimédias dans les outils pour les développeurs Chrome

Une fois que vos points d'arrêt de requête média sont configurés, vous pourrez voir à quoi ils ressemblent pour votre site. Vous pouvez redimensionner la fenêtre de votre navigateur pour déclencher les points d'arrêt, mais les outils pour les développeurs Chrome disposent d'une fonctionnalité intégrée qui permet de voir facilement à quoi ressemble une page sous différents points d'arrêt.

Capture d&#39;écran des outils de développement avec notre application météo ouverte et une largeur de 822 pixels sélectionnée.
Les outils de développement affichent l'application météo dans une fenêtre d'affichage plus grande.
Capture d&#39;écran des outils de développement avec notre application météo ouverte et une largeur de 436 pixels sélectionnée.
Les outils de développement affichent l'application météo dans une fenêtre d'affichage plus étroite.

Pour afficher votre page sous différents points d'arrêt:

Ouvrez les outils de développement, puis activez le mode Appareil. Par défaut, elle s'ouvre en mode responsif.

Pour afficher vos requêtes multimédias, ouvrez le menu "Device Mode" (Mode de l'appareil), puis sélectionnez Show media query (Afficher les requêtes multimédias) pour afficher vos points d'arrêt sous forme de barres colorées au-dessus de votre page.

Cliquez sur l'une des barres pour afficher votre page lorsque cette requête média est active. Effectuez un clic droit sur une barre pour accéder à la définition de la requête média.