Le nombre d'utilisateurs de téléphones mobiles sur Internet augmentant, il est devenu de plus en plus important pour les concepteurs Web de présenter le contenu de manière à ce qu'il fonctionne bien pour différentes tailles d'écran. Le responsive web design, initialement défini par Ethan Marcotte dans A List Apart, est une stratégie de conception qui répond aux besoins des utilisateurs et aux capacités de leurs appareils en modifiant la mise en page d'un site pour l'adapter à l'appareil utilisé. Par exemple, un site réactif peut afficher le contenu dans une vue à une seule colonne sur un téléphone, deux colonnes sur une tablette et trois ou quatre colonnes sur un ordinateur de bureau.
Étant donné que les appareils connectés à Internet peuvent avoir de nombreuses tailles d'écran, il est important que votre site s'adapte à toutes les tailles d'écran existantes ou futures. La conception réactive moderne tient également compte des modes d'interaction tels que les écrans tactiles. L'objectif est d'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 Meta viewport dans l'en-tête du document. Cette balise indique au navigateur comment contrôler les dimensions et l'échelle de la page.
Pour essayer de fournir la meilleure expérience possible, les navigateurs mobiles affichent la page à la largeur d'un écran d'ordinateur (environ 980px, mais cela varie d'un appareil à l'autre), puis essaient d'améliorer l'affichage du contenu en augmentant la taille de la police et en ajustant le contenu à la taille de l'écran. Cela peut rendre les polices incohérentes et obliger les utilisateurs à faire un zoom avant pour voir le contenu et interagir avec lui.
<!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 correspondre à la largeur de l'écran en pixels indépendants de la densité (DIP), une unité de pixel visuel standard (qui peut être constituée de nombreux pixels physiques sur un écran haute densité). Cela permet à la page de réorganiser le contenu pour l'adapter à différentes tailles d'écran.
Certains navigateurs conservent la largeur de la page constante lorsqu'elle est mise en mode paysage et font un zoom pour remplir l'écran au lieu de réorganiser le contenu. L'ajout de la valeur initial-scale=1 indique aux navigateurs d'établir une relation un-à-un entre les pixels CSS et les pixels indépendants de l'appareil, quelle que soit l'orientation de l'appareil, ce qui permet à la page de profiter de toute la largeur du paysage.
L'audit Lighthouse Ne comporte pas de balise <meta name="viewport"> avec width ou initial-scale peut vous aider à automatiser le processus de vérification de l'utilisation correcte de la balise Meta "viewport" dans vos documents HTML.
Adapter la taille du contenu à la fenêtre d'affichage
Sur ordinateur comme sur mobile, les utilisateurs sont habitués à faire défiler les sites Web verticalement, mais pas horizontalement. Forcer l'utilisateur à faire défiler la page horizontalement ou à effectuer un zoom arrière pour la voir en entier nuit à son expérience.
Lorsque vous développez un site mobile avec une balise viewport Meta, il est fréquent de créer accidentellement du contenu de page qui ne s'intègre pas tout à fait dans la fenêtre d'affichage spécifiée. Par exemple, une image affichée plus large que la fenêtre d'affichage peut entraîner un défilement horizontal. Pour éviter cela, ajustez votre contenu afin qu'il tienne dans la fenêtre d'affichage.
L'audit Lighthouse Le contenu n'est pas correctement dimensionné pour la fenêtre d'affichage peut vous aider à automatiser le processus de détection du contenu qui dépasse la taille de la fenêtre d'affichage.
Images
Une image aux dimensions fixes entraîne le défilement de la page si elle est plus grande que la fenêtre d'affichage. Nous vous recommandons d'attribuer à toutes les images une valeur max-width de 100%. Cela permet de réduire les images pour qu'elles s'adaptent à l'espace disponible, tout en les empêchant de s'étirer au-delà de leur taille initiale.
Dans la plupart des cas, vous pouvez le faire en ajoutant les éléments suivants à votre feuille de style :
img {
max-width: 100%;
display: block;
}
Ajoutez les dimensions de l'image à l'élément img.
Même lorsque vous définissez max-width: 100%, nous vous recommandons d'ajouter les attributs width et height à vos balises <img> afin que le navigateur puisse réserver de l'espace pour les images avant qu'elles ne soient chargées. Cela permet d'éviter les décalages de mise en page.
Disposition
É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 dépendre d'une largeur de fenêtre d'affichage particulière pour s'afficher correctement.
Auparavant, cela nécessitait de définir la mise en page des éléments en pourcentage. L'utilisation de mesures en pixels oblige l'utilisateur à faire défiler l'écran horizontalement sur les petits écrans :
L'utilisation de pourcentages permet de réduire la largeur des colonnes sur les petits écrans, car chaque colonne occupe toujours le même pourcentage de la largeur de l'écran :
Les techniques de mise en page CSS modernes, telles que flexbox, la mise en page en grille et multicol, facilitent grandement la création de ces grilles flexibles.
Flexbox
Utilisez Flexbox lorsque vous avez un ensemble d'éléments de tailles différentes et que vous souhaitez qu'ils tiennent confortablement sur une ou plusieurs lignes, les éléments plus petits prenant moins de place et les plus grands prenant plus de place.
.items {
display: flex;
justify-content: space-between;
}
Vous pouvez utiliser Flexbox pour afficher les éléments sur une seule ligne ou sur plusieurs lignes à mesure que l'espace disponible diminue.
Disposition en grille CSS
La mise en page en grille CSS permet de créer des grilles flexibles. Vous pouvez améliorer l'exemple flottant précédent en utilisant 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 régulières avec autant d'éléments que possible. Le nombre de pistes disponibles diminue à mesure que la taille de l'écran diminue. La démo suivante montre une grille contenant autant de cartes que possible sur chaque ligne, avec une taille minimale de 200px.
En savoir plus sur la mise en page en grille CSS
Mise en page à plusieurs colonnes
Pour certains types de mise en page, vous pouvez utiliser la mise en page multicolonne (Multicol), qui crée un nombre de colonnes responsives avec la propriété column-width.
Dans la démo suivante, la page ajoute des colonnes lorsqu'il y a de la place pour une autre colonne 200px.
Utiliser des requêtes média CSS pour la réactivité
Il peut arriver que vous deviez apporter des modifications plus importantes à votre mise en page pour prendre en charge certaines tailles d'écran, au-delà de ce que permettent les techniques décrites précédemment. C'est là que les requêtes média deviennent utiles.
Les requêtes média sont des filtres simples que vous pouvez appliquer aux styles CSS pour les modifier en fonction des types d'appareils affichant le contenu. Ils peuvent également modifier le style en fonction des caractéristiques de l'appareil, y compris la largeur, la hauteur, l'orientation et le fait que l'appareil soit utilisé comme écran tactile.
Pour fournir différents styles d'impression, vous pouvez cibler un type de sortie et inclure une feuille de style pour les styles d'impression :
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…
Vous pouvez également utiliser une requête média pour inclure des styles d'impression dans votre feuille de style principale :
@media print {
/* print styles go here */
}
Pour le responsive web design, les requêtes les plus courantes concernent les fonctionnalités des appareils. Vous pouvez ainsi personnaliser votre mise en page pour les écrans tactiles ou les petits écrans.
Requêtes média basées sur la taille de la fenêtre d'affichage
Les requêtes média vous permettent de créer une expérience responsive qui applique des styles spécifiques à des tailles d'écran spécifiques. Les requêtes concernant la taille de l'écran peuvent tester les éléments suivants :
width(min-width,max-width)height(min-height,max-height)orientationaspect-ratio
Requêtes média basées sur les capacités de l'appareil
Compte tenu de la gamme d'appareils disponibles, les développeurs ne peuvent pas supposer que chaque grand appareil est un ordinateur de bureau ou un ordinateur portable classique, ni que chaque petit appareil utilise un écran tactile. Certaines nouveautés de la spécification des requêtes média vous permettent de tester des fonctionnalités telles que le type de pointeur utilisé pour interagir avec l'appareil et si l'utilisateur peut maintenir un pointeur sur des éléments.
hoverpointerany-hoverany-pointer
Essayez de regarder cette démonstration sur différents appareils, comme un ordinateur de bureau classique, un téléphone ou une tablette.
Ces nouvelles fonctionnalités sont bien prises en charge dans tous les navigateurs modernes. Pour en savoir plus, consultez les pages MDN sur hover, any-hover, pointer et any-pointer.
Utiliser any-hover et any-pointer
Les fonctionnalités any-hover et any-pointer testent si l'utilisateur peut pointer des éléments (souvent appelé survol) ou utiliser un pointeur, même si ce n'est pas la principale façon dont il interagit avec son appareil. Soyez très prudent lorsque vous les utilisez, par exemple pour éviter de forcer un utilisateur d'écran tactile à passer à une souris.
Toutefois, any-hover et any-pointer peuvent être utiles s'il est important de déterminer le type d'appareil utilisé par 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 pointer.
Choisir des points d'arrêt
Ne définissez pas de points d'arrêt en fonction des classes d'appareils, ni d'un produit, d'une marque ou d'un système d'exploitation. Cela rend votre code difficile à gérer. Laissez plutôt le contenu déterminer comment sa mise en page change pour s'adapter au conteneur.
Choisissez des points d'arrêt majeurs en commençant par les plus petits, puis en augmentant progressivement leur taille.
Concevez le contenu pour qu'il s'adapte d'abord à une petite taille d'écran, puis agrandissez l'écran jusqu'à ce qu'un point d'arrêt devienne nécessaire. Cela vous permet de réduire au minimum le nombre de points d'arrêt sur votre page et de les optimiser en fonction du contenu.
L'exemple suivant présente le widget de prévisions météo au début de cette page. La première étape consiste à faire en sorte que la prévision s'affiche correctement sur un petit écran :
Ensuite, redimensionnez le navigateur jusqu'à ce qu'il y ait trop d'espaces blancs entre les éléments pour que le widget ait l'air bien. La décision est subjective, mais une largeur supérieure à 600px est certainement trop importante.
Pour insérer un point d'arrêt à 600px, créez deux requêtes média à la fin de votre CSS pour le composant : une à utiliser lorsque le navigateur est à 600px ou moins, et une 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 code CSS qui ne s'applique qu'aux petits écrans. Dans la requête média pour un min-width de 601px, ajoutez le code CSS pour les écrans plus grands.
Choisir 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 changements mineurs. Par exemple, entre les principaux points d'arrêt, 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 l'élément s'intègre plus naturellement à la mise en page.
Cet exemple suit le même modèle que le précédent, en commençant par l'optimisation des mises en page pour les petits écrans. Commencez par augmenter la taille de la police lorsque la largeur de la fenêtre d'affichage est supérieure à 360px. Ensuite, lorsqu'il y a suffisamment d'espace, vous pouvez séparer les températures haute et basse pour qu'elles soient sur la même ligne, et agrandir 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;
}
}
Pour les grands écrans, nous vous recommandons de limiter la largeur maximale du panneau de prévisions afin qu'il n'utilise pas toute la largeur de l'écran.
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
Optimiser le texte pour la lecture
La théorie classique de la lisibilité suggère qu'une colonne idéale doit contenir entre 70 et 80 caractères par ligne (environ 8 à 10 mots en anglais). Envisagez d'ajouter un point d'arrêt chaque fois que la largeur d'un bloc de texte dépasse environ 10 mots.
Dans cet exemple, la police Roboto à 1em produit 10 mots par ligne sur le petit écran, mais les écrans plus grands ont besoin d'un point d'arrêt. Dans ce cas, si la largeur du navigateur est supérieure à 575px, la largeur de contenu idéale est 550px.
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
Éviter de masquer du contenu (:#avoid-hiding-content)
Faites attention lorsque vous choisissez le contenu à masquer ou à afficher en fonction de la taille de l'écran. Ne masquez pas de contenu simplement parce qu'il ne tient pas sur l'écran. La taille de l'écran ne permet pas de prédire ce qu'un utilisateur pourrait vouloir voir. Par exemple, supprimer le taux de pollen des prévisions météo pourrait être un problème grave pour les personnes souffrant d'allergies printanières, qui ont besoin de cette information pour décider si elles peuvent sortir.
Afficher les points d'arrêt des requêtes média dans les outils pour les développeurs Chrome
Après avoir configuré les points d'arrêt de votre requête média, vérifiez leur impact sur l'apparence de votre site. Vous pouvez redimensionner la fenêtre de votre navigateur pour déclencher les points d'arrêt, mais les outils de développement Chrome disposent d'une fonctionnalité intégrée qui montre à quoi ressemble une page sous différents points d'arrêt.
Pour afficher votre page sous différents points d'arrêt :
- Ouvrez les outils pour les développeurs.
- Activez le mode Appareil. Il s'ouvre par défaut en mode responsif.
- Pour afficher vos requêtes média, ouvrez le menu "Mode Appareil" et sélectionnez Afficher les requêtes média. Vos points d'arrêt s'affichent 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 cette requête média.