Une conception visualisée sur un petit écran ne doit pas ressembler à une version réduite d'une mise en page pour grand écran. De même, une conception affichée sur un grand écran ne doit pas ressembler à une version gonflée d'une mise en page pour petit écran. Au lieu de cela, la conception doit être suffisamment flexible pour s'adapter à toutes les tailles d'écran. Une conception réactive réussie tire le meilleur parti de chaque facteur de forme.
Cela signifie que certains éléments de l'interface peuvent avoir besoin d'être très différents selon le contexte d'affichage. Vous devrez peut-être appliquer des CSS très différents à la même base de code HTML pour tirer le meilleur parti des différentes tailles d'écran. Cela peut être un véritable défi de conception !
Voici quelques problèmes courants que vous pouvez rencontrer.
Navigation
L'affichage d'une liste de liens de navigation est assez simple sur un grand écran. Il y a beaucoup d'espace pour accueillir ces liens.
Sur un petit écran, l'espace est limité. Lorsque vous concevez pour cette situation, il est tentant de masquer la navigation derrière un bouton. Le problème avec cette solution est que les utilisateurs doivent ensuite effectuer deux étapes pour accéder à n'importe où: ouvrir le menu, puis choisir une option. Tant que le menu n'est pas ouvert, l'utilisateur se demande "où puis-je aller ?".
Essayez de trouver une stratégie qui évite de masquer votre navigation. Si vous disposez d'un nombre relativement faible d'éléments, vous pouvez styliser la navigation pour qu'elle s'affiche correctement sur les petits écrans.
Ce modèle ne sera pas à l'échelle si votre navigation contient de nombreux liens. La navigation semblera encombrée si les liens encapsulent sur deux ou trois lignes sur un petit écran.
Une solution possible consiste à garder les liens sur une ligne, mais à tronquer la liste au bord de l’écran. Les utilisateurs peuvent balayer l'écran horizontalement pour faire apparaître les liens qui ne sont pas immédiatement visibles. Il s'agit du modèle de dépassement de capacité.
L'avantage de cette technique est qu'elle s'adapte à n'importe quelle largeur d'appareil et n'importe quel nombre de maillons. L'inconvénient est que les utilisateurs peuvent passer à côté de liens qui ne sont pas visibles au départ. Si vous utilisez cette technique pour votre navigation principale, assurez-vous que les premiers liens sont les plus importants et qu'ils indiquent visuellement que la liste contient davantage d'éléments. L'exemple précédent utilise un dégradé pour cet indicateur.
En dernier recours, vous pouvez choisir de masquer par défaut votre navigation et de fournir aux utilisateurs un mécanisme d'activation/de désactivation permettant d'afficher et de masquer le contenu. C'est ce qu'on appelle la divulgation progressive.
Assurez-vous que le bouton permettant d'afficher ou de masquer la navigation porte un libellé. Ne vous fiez pas à l'icône pour être comprise.
Une icône sans libellé indique la navigation "viande mystère" : les utilisateurs ne sauront pas ce qu'il y a tant qu'ils n'y auront pas mordu. Fournissez une étiquette de texte pour indiquer aux utilisateurs ce que le bouton révélera.
Carrousels
Ce qui s'applique à la navigation est également vrai pour les autres contenus: essayez de ne rien cacher. Un carrousel est une méthode courante pour cacher du contenu. Cela peut paraître intéressant, mais il y a de fortes chances que vos utilisateurs ne découvrent jamais le contenu caché. Les carrousels sont plus efficaces pour résoudre les problèmes d'organisation (par exemple, quel contenu doit figurer sur la page d'accueil) que pour servir les utilisateurs.
Cela dit, lorsque l'espace est limité, les carrousels peuvent éviter qu'une page ne devienne trop longue et surchargée. Vous pouvez utiliser une approche hybride: afficher le contenu dans un carrousel pour les petits écrans, mais afficher le même contenu dans une grille pour les écrans plus grands.
Pour les écrans étroits, affichez les éléments les uns à la suite des autres à l'aide de Flexbox. La ligne d'éléments s'étend au-delà du bord de l'écran. Utilisez overflow-x: auto pour permettre le balayage horizontal.
@media (max-width: 50em) {
.cards {
display: flex;
flex-direction: row;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.cards .card {
flex-shrink: 0;
flex-basis: 15em;
scroll-snap-align: start;
}
}
Les propriétés scroll-snap garantissent que les éléments peuvent être balayés de manière fluide. Grâce à scroll-snap-type: inline mandatory, les éléments se mettent en place.
Lorsque l'écran est suffisamment grand (plus large que 50em dans ce cas), passez en mode Grille et affichez les éléments en lignes et en colonnes, sans masquer quoi que ce soit.
@media (min-width: 50em) {
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}
}
Il est important de noter qu'un élément du carrousel n'occupe pas toute la largeur. Si c'était le cas, rien n'indiquerait que du contenu supplémentaire est disponible au-delà du bord de la fenêtre d'affichage.
Les carrousels sont un autre exemple de modèle de débordement en action. Si les utilisateurs peuvent parcourir de nombreux éléments, vous pouvez continuer à utiliser le modèle de dépassement, même sur les grands écrans, y compris les téléviseurs. Ce défileur de contenus multimédias utilise plusieurs carrousels pour gérer un grand nombre d'options.
Là encore, les propriétés scroll-snap garantissent que l'interaction est fluide. Notez également que loading="lazy" est appliqué aux images du carrousel. Dans ce cas, les images ne sont pas en dessous de la ligne de flottaison, elles sont au-delà du bord, mais le même principe s'applique: si l'utilisateur ne balaie jamais l'écran jusqu'à cet élément, l'image n'est pas téléchargée, ce qui permet d'économiser de la bande passante.
Avec l'ajout de JavaScript, vous pouvez ajouter des commandes interactives à un carrousel. Vous pouvez même faire défiler automatiquement les éléments. Réfléchissez bien avant de le faire : la lecture automatique peut fonctionner si le carrousel est le seul contenu de la page, tandis qu'un carrousel à lecture automatique est très ennuyeux si quelqu'un essaie d'interagir avec d'autres contenus (comme lire du texte). Découvrez d'autres bonnes pratiques concernant les carrousels.
Tables de données
L'élément table est idéal pour structurer des données tabulaires, c'est-à-dire des lignes et des colonnes d'informations associées. Mais si le tableau devient trop grand, cela pourrait endommager votre mise en page sur petit écran.
Vous pouvez appliquer le modèle de dépassement de capacité aux tables. Dans cet exemple, la table est encapsulée dans une div avec une classe de table-container.
.table-container {
max-inline-size: 100%;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.table-container th,
.table-container td {
scroll-snap-align: start;
padding: var(--metric-box-spacing);
}
Consignes
Le schéma de dépassement est un bon compromis pour les petits écrans, mais assurez-vous qu'il est clair que le contenu hors écran est accessible. Envisagez de placer une ombre ou un dégradé sur le bord aux endroits où le contenu est tronqué.
La divulgation progressive est un moyen utile d'économiser de l'espace, mais veillez à ne pas l'utiliser pour des contenus très importants. Il est mieux adapté aux actions secondaires. Assurez-vous que l'élément d'interface qui déclenche le communiqué est clairement libellé et ne vous fiez pas uniquement à l'iconographie.
Concevoir d'abord pour les petits écrans. Il est plus facile d’adapter des conceptions de petit écran à des écrans plus grands que l’inverse. Si vous concevez d'abord pour un grand écran, il y a un risque que votre conception d'écran de petite taille vous donne l'impression qu'elle a été pensée après coup.
Pour découvrir d'autres modèles de mise en page et d'élément d'interface utilisateur, consultez la section Modèles de web.dev.
Lorsque vous adaptez les éléments d'interface à différentes tailles d'écran, les requêtes média sont très utiles pour déterminer les dimensions de l'appareil. Mais les fonctionnalités multimédias comme min-width et min-height ne sont qu'un début. Vous allez maintenant découvrir de nombreuses autres fonctionnalités multimédias.