Une conception visualisée sur un petit écran ne doit pas ressembler à une version réduite d'une mise en page sur grand écran. De même, une conception visualisée sur un grand écran ne doit pas ressembler à la version gonflée d'une mise en page sur 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 en fonction du contexte dans lequel ils sont affichés. Vous devrez peut-être appliquer des styles CSS très différents au même codebase 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 pourriez rencontrer.
Navigation
L'affichage d'une liste de liens de navigation est assez simple sur un grand écran. Vous disposez de beaucoup d'espace pour ces liens.
Sur un petit écran, l'espace est limité. Lorsque vous concevez pour cette situation, il est tentant de cacher la navigation derrière un bouton. Le problème avec cette solution est que les utilisateurs doivent ensuite faire deux étapes pour se rendre 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 avez 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 s’adaptera pas si votre navigation comporte de nombreux liens. La navigation semblera encombrée si les liens s'affichent sur deux ou trois lignes sur un petit écran.
Une solution possible consiste à garder les liens sur une seule ligne, mais à tronquer la liste au bord de l'écran. Les utilisateurs peuvent balayer l'écran horizontalement pour révéler les liens qui ne sont pas immédiatement visibles. Il s'agit du schéma de débordement.
L'avantage de cette technique est qu'elle s'adapte à n'importe quelle largeur d'appareil et à n'importe quel nombre de liens. 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 indiquent visuellement qu'il y a plus d'éléments dans la liste. L'exemple précédent utilise un dégradé pour cet indicateur.
En dernier recours, vous pouvez choisir de masquer votre navigation par défaut et fournir aux utilisateurs un mécanisme d'activation/désactivation permettant d'afficher et de masquer le contenu. C'est ce qu'on appelle la divulgation progressive.
Assurez-vous que le bouton qui active l'affichage de la navigation porte un libellé. Ne vous fiez pas à une icône pour être compris.
Une icône sans libellé correspond à la navigation "viande mystère" : les utilisateurs ne sauront pas ce qu'il y a à l'intérieur avant de mordre. Fournissez une étiquette de texte pour indiquer aux utilisateurs ce que le bouton révélera.
Carrousels
Ce qui est vrai pour la navigation s'applique également aux autres contenus: essayez de ne rien cacher de toute façon. Un carrousel est une méthode courante pour dissimuler du contenu. L'apparence est soignée, 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 organisationnels, tels que le contenu à présenter 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 soit trop longue et encombrée. Vous pouvez utiliser une approche hybride: afficher le contenu dans un carrousel pour les petits écrans, mais afficher le même contenu sous forme de grille pour les écrans plus grands.
Pour les écrans étroits, affichez les éléments les uns à la suite à l'autre à l'aide de Flexbox. La ligne d'éléments s'étendra au-delà du bord de l'écran. Utilisez overflow-x: auto pour autoriser 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 le cas présent), passez en mode Grille et affichez les éléments en lignes et en colonnes, sans masquer rien.
@media (min-width: 50em) {
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}
}
Surtout, un élément de la vue carrousel n'occupe pas toute la largeur. Si c'est le cas, il n'y a aucune indication que davantage de contenu soit 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 vous avez de nombreux éléments que les utilisateurs peuvent parcourir, vous pouvez continuer à utiliser le motif de débordement même sur les grands écrans, y compris les téléviseurs. Ce défileur multimédia 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 se trouvent pas en dessous de la ligne de flottaison, mais sont au-delà du bord, mais le même principe s'applique: si l'utilisateur ne balaie jamais l'écran jusqu'à la ligne de flottaison, l'image n'est pas téléchargée, ce qui permet d'économiser de la bande passante.
En ajoutant JavaScript, vous pouvez ajouter des commandes interactives à un carrousel. Vous pouvez même faire en sorte qu'elle passe automatiquement d'un élément à l'autre. Réfléchissez bien avant de commencer : la lecture automatique peut fonctionner si le carrousel est le seul contenu de la page, mais un carrousel à lecture automatique est incroyablement agaçant si quelqu'un essaie d'interagir avec d'autres contenus (comme lire du texte, par exemple). Pour en savoir plus, consultez les bonnes pratiques concernant le carrousel.
Tables de données
L'élément table est idéal pour structurer des données tabulaires. des lignes et des colonnes
d'informations connexes. Mais si le tableau devient trop grand, la mise en page sur petit écran pourrait endommager.
Vous pouvez appliquer le modèle de débordement aux tables. Dans cet exemple, la table est encapsulée dans un 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, là où le contenu est tronqué.
Le communiqué progressif est un moyen utile d'économiser de l'espace, mais évitez de 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 la divulgation est clairement identifié (ne vous appuyez pas uniquement sur l'iconographie).
Concevez d'abord pour les écrans plus petits. Il est plus facile d'adapter les conceptions de petits écrans aux écrans plus grands que l'inverse. Si vous concevez d'abord pour un grand écran, il y a un risque que la conception de votre petit écran semble reléguée au second plan.
Pour découvrir d'autres modèles de mise en page et d'éléments d'interface utilisateur, consultez la section Modèles de web.dev.
Lorsque vous adaptez des é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. Toutefois, des 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.