Créer des sites adaptés aux besoins et aux fonctionnalités de l'appareil sur lequel ils sont consultés
L'utilisation des appareils mobiles pour naviguer sur le Web continue de se développer à un rythme effréné. Ces appareils sont souvent limités par la taille d'affichage et nécessitent une approche différente en termes de disposition du contenu à l'écran.
Le responsive web design, défini à l'origine 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, les utilisateurs d'un téléphone verront le même contenu dans une seule colonne, tandis que sur une tablette, le même contenu s'afficherait dans deux colonnes.
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 puisse s'adapter à n'importe quelle taille d'écran, aujourd'hui ou à l'avenir. De plus, les appareils disposent de différentes fonctionnalités qui nous permettent d'interagir avec eux. 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 à une largeur d'écran d'ordinateur de bureau (généralement d'environ 980px, même si cela varie selon les appareils), puis tentent d'améliorer l'apparence du contenu en augmentant la taille de la police et en redimensionnant le contenu pour qu'il s'adapte à 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 le contenu et interagir avec celui-ci.
<!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 l'appareil. Pixel indépendant de l'appareil (ou de la densité) représentant un pixel unique pouvant être composé de nombreux pixels physiques sur un écran haute densité. Cela permet à la page de rediffuser le contenu pour l'adapter à différentes tailles d'écran, qu'il s'affiche sur un petit téléphone mobile ou sur un grand écran d'ordinateur.
Certains navigateurs gardent la largeur de la page constante lors d'une rotation en mode Paysage, et l'utilisateur effectue un zoom au lieu d'ajuster la mise en 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, ce qui permet à la page de s'afficher sur 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.
S'assurer que la fenêtre d'affichage est accessible
En plus de définir un élément initial-scale, vous pouvez définir les attributs suivants sur la fenêtre d'affichage:
minimum-scalemaximum-scaleuser-scalable
Lorsqu'elles sont définies, elles peuvent empêcher les utilisateurs de zoomer sur la fenêtre d'affichage, ce qui peut entraîner des problèmes d'accessibilité. C'est pourquoi nous vous déconseillons d'utiliser ces attributs.
Adapter la taille du contenu à la fenêtre d'affichage
Que ce soit sur ordinateur ou sur appareil mobile, 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 l'intégralité de la page nuit à l'expérience utilisateur.
Lors du développement d'un site mobile avec une balise de fenêtre d'affichage Meta, il est facile de créer accidentellement du contenu de page qui ne correspond 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 cette dernière. 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 faire défiler la page horizontalement.
L'audit 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 des images 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 à toutes les images une max-width de 100%.
Si la taille de la fenêtre d'affichage est inférieure à celle de l'image, la taille de l'image est alors réduite pour s'adapter à l'espace dont elle dispose.
Toutefois, étant donné que la valeur de max-width, et non de width, est de 100%, l'image ne s'étire pas au-delà de sa taille naturelle.
Il est généralement prudent d'ajouter les éléments suivants à votre feuille de style, afin d'éviter que les images provoquent 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, mais 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 pour l'image avant son chargement. Cela permet d'éviter les décalages 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 dépendre d'une largeur de fenêtre d'affichage particulière pour s'afficher correctement.
Auparavant, il fallait définir les éléments utilisés pour créer une mise en page en pourcentages. Dans l'exemple ci-dessous, vous pouvez voir une mise en page en deux colonnes avec des éléments flottants, dimensionnée en pixels. Une fois que la fenêtre d'affichage devient plus petite que la largeur totale des colonnes, nous devons faire défiler la page horizontalement pour voir le contenu.
En utilisant des pourcentages pour les largeurs, les colonnes conservent 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'adaptent confortablement à une ou plusieurs rangées, 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 une conception réactive, vous pouvez utiliser Flexbox pour afficher les éléments sur une seule ligne ou encapsuler plusieurs lignes lorsque l'espace disponible diminue.
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 considérons l'exemple flottant précédent, plutôt que de créer les colonnes avec des pourcentages, nous pouvons 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 standards, 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 à 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.
Utiliser des requêtes média CSS pour améliorer la réactivité
Vous devrez parfois apporter des modifications plus importantes à votre mise en page pour accepter 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. Elles permettent de modifier facilement les styles en fonction des types d'appareils affichant le contenu ou des caractéristiques de cet appareil (largeur, hauteur, orientation, possibilité de survoler l'écran, utilisation de l'appareil comme écran tactile, etc.).
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 multimédias 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 aux grands écrans, et à n'importe quel autre type d'écran. La fonctionnalité que nous détectons ici correspond à la taille de l'écran. Nous pouvons tester les éléments suivants.
width(min-width,max-width)height(min-height,max-height)orientationaspect-ratio
Toutes ces fonctionnalités sont parfaitement compatibles avec les navigateurs. Pour en savoir plus, y compris sur les navigateurs compatibles, consultez les sections width, height, orientation et aspect-ratio sur MDN.
Requêtes multimédias basées sur les capacités de l'appareil
Compte tenu de la gamme d'appareils disponibles, nous ne pouvons pas supposer 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. Grâce à de nouveaux ajouts à la spécification des requêtes multimédias, 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.
hoverpointerany-hoverany-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, le pointeur et le pointeur.
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 se sert de 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 fins, en plus de la possibilité de pointer sur un élément.
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 engendrer un cauchemar en termes de maintenance. C'est le contenu lui-même qui doit déterminer comment la mise en page s'adapte à son conteneur.
Choisissez les points d'arrêt majeurs en commençant petit, puis en travaillant
Concevez d'abord le contenu pour qu'il s'adapte à un écran de petite taille, 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 vu au début: les prévisions météorologiques. La première étape consiste à générer des prévisions correctes sur un petit écran.
Ensuite, redimensionnez le navigateur jusqu'à ce qu'il y ait trop d'espace blanc entre les éléments et que la prévision ne soit tout simplement pas aussi bonne.
La décision est quelque peu subjective, mais au-dessus de 600px est certes trop large.
Pour insérer un point d'arrêt à 600px, créez deux requêtes média à la fin du code CSS pour le composant, l'une à utiliser lorsque le navigateur est 600px ou inférieur, et l'autre lorsque sa largeur est supérieure à 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 réservé aux petits écrans. Dans la requête média pour une min-width de 601px, ajoutez du CSS pour les écrans plus grands.
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 la rendre plus naturelle dans la mise en page.
Commençons par optimiser la mise en page sur les petits écrans.
Dans ce cas, nous allons augmenter 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 plutôt que l'une au-dessus de l'autre.
Et agrandissons 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 limiter la largeur maximale du panneau des 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, vous pouvez ajouter un point d'arrêt chaque fois que la largeur d'un bloc de texte dépasse 10 mots.
Regardons de plus près l'exemple de l'article de blog ci-dessus.
Sur les petits écrans, la police Roboto à 1em fonctionne parfaitement en donnant 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;
}
}
Évitez de simplement cacher du contenu
Soyez prudent lorsque vous choisissez le contenu à masquer ou à afficher en fonction de la taille de l'écran. Ne vous contentez pas de masquer un contenu qui ne peut pas être affiché à 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 peut poser problème aux personnes allergiques au printemps, qui ont besoin d'informations pour déterminer si elles peuvent sortir ou non.
Afficher les points d'arrêt de requête média dans les outils pour les développeurs Chrome
Une fois que vous avez configuré vos points d'arrêt de requête média, vous pouvez voir à quoi ressemble votre site. Vous pouvez redimensionner la fenêtre du 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.
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 média, ouvrez le menu "Device Mode" (Mode de l'appareil), puis sélectionnez Show media query (Afficher les requêtes média) pour afficher vos points d'arrêt sous forme de barres colorées au-dessus de la page.
Cliquez sur l'une des barres pour afficher votre page lorsque la 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.