Une conception affiché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 agrandie 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. Un design responsif efficace tire le meilleur parti de chaque facteur de forme.
Cela signifie que certains éléments d'interface peuvent être très différents selon le contexte dans lequel ils sont affichés. Vous devrez peut-être appliquer un code CSS très différent au même codebase HTML pour exploiter au mieux les différentes tailles d'écran. Cela peut représenter un véritable défi de conception !
Voici quelques difficultés courantes que vous pouvez rencontrer.
Navigation
Afficher une liste de liens de navigation est assez simple sur un grand écran. Vous avez largement la place pour ajouter ces liens.
Sur un petit écran, l'espace est limité. Lorsque vous concevez une application 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 arriver à leurs fins : 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 petit d'éléments, vous pouvez styliser la navigation pour qu'elle soit esthétique sur les petits écrans.
Ce modèle ne sera pas évolutif si votre navigation comporte de nombreux liens. La navigation sera encombrée si les liens s'affichent sur deux ou trois lignes sur un petit écran.
Une solution possible consiste à conserver les liens sur une seule ligne, mais à tronquer la liste au bord de l'écran. Les utilisateurs peuvent balayer l'écran horizontalement pour afficher les liens qui ne sont pas immédiatement visibles. Il s'agit du modèle de dépassement.
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 manquer des 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 indiquez visuellement qu'il y a d'autres é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 de fournir un mécanisme d'activation/désactivation permettant aux utilisateurs d'afficher et de masquer le contenu. C'est ce qu'on appelle la divulgation progressive.
Assurez-vous que le bouton qui permet d'afficher ou de masquer la navigation est libellé. Ne comptez pas sur une icône pour être compris.
Une icône sans libellé est une navigation "mystery meat" : les utilisateurs ne savent pas ce qu'elle contient tant qu'ils ne cliquent pas dessus. Fournissez un libellé textuel pour indiquer aux utilisateurs ce que le bouton va révéler.
Carrousels
Ce qui est vrai pour la navigation l'est aussi pour les autres contenus : essayez de ne rien masquer. Un carrousel est une méthode courante pour masquer du contenu. Cela peut sembler très propre, mais il y a de fortes chances que vos utilisateurs ne découvrent jamais le contenu masqué. Les carrousels sont plus efficaces pour résoudre les problèmes d'organisation (comme le contenu à afficher sur la page d'accueil) que pour servir les utilisateurs.
Cela dit, lorsque l'espace est limité, les carrousels peuvent empêcher une page de devenir trop longue et encombrée. Vous pouvez adopter une approche hybride : afficher le contenu dans un carrousel pour les petits écrans, mais le présenter dans une grille pour les grands écrans.
Pour les écrans étroits, affichez les éléments sur une ligne à l'aide de flexbox. La ligne d'éléments s'étend 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 permettent de faire glisser les éléments de manière fluide. Grâce à scroll-snap-type: inline mandatory, les éléments s'emboîtent.
Lorsque l'écran est suffisamment grand (plus large que 50em dans ce cas), passez à la grille et affichez les éléments sur plusieurs lignes et colonnes, sans rien masquer.
@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 dans la vue carrousel n'occupe pas toute la largeur. Sinon, rien n'indiquerait qu'il existe d'autres contenus au-delà des limites de la fenêtre d'affichage.
Les carrousels sont un autre exemple de l'utilisation du modèle de dépassement. Si vous avez de nombreux éléments que les utilisateurs peuvent parcourir, vous pouvez continuer à utiliser le modèle de dépassement, même sur les grands écrans, y compris les téléviseurs. Ce scroller média utilise plusieurs carrousels pour gérer un grand nombre d'options.
Là encore, les propriétés scroll-snap garantissent une interaction fluide. Notez également que l'attribut loading="lazy" est appliqué aux images du carrousel. Dans ce cas, les images ne sont pas en dessous de la ligne de flottaison, mais au-delà du bord. Toutefois, le même principe s'applique : si l'utilisateur ne fait jamais glisser l'écran jusqu'à cet élément, l'image ne sera pas téléchargée, ce qui économisera de la bande passante.
Avec l'ajout de JavaScript, vous pouvez ajouter des commandes interactives à un carrousel. Vous pouvez même faire en sorte qu'il parcoure automatiquement les éléments. Mais réfléchissez bien avant de le faire : la lecture automatique peut fonctionner si le carrousel est le seul contenu de la page, mais elle est incroyablement ennuyeuse 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 les carrousels.
Tables de données
L'élément table est idéal pour structurer les données tabulaires (lignes et colonnes d'informations associées). Toutefois, si le tableau devient trop grand, il peut casser la mise en page sur petit écran.
Vous pouvez appliquer le modèle de dépassement aux tableaux. Dans cet exemple, le tableau est encapsulé dans un div avec une classe 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 modèle 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 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. Elle est plus adaptée aux actions secondaires. Assurez-vous que l'élément d'interface qui déclenche la divulgation est clairement libellé. Ne vous fiez pas uniquement aux icônes.
Commencez par concevoir pour les petits écrans. Il est plus facile d'adapter des conceptions pour petits écrans à des écrans plus grands que l'inverse. Si vous concevez d'abord pour un grand écran, vous risquez de donner l'impression que la conception pour petit écran est une idée de dernière minute.
Pour découvrir d'autres modèles de mise en page et d'éléments d'interface utilisateur, consultez la section Patterns (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. Mais les fonctionnalités média telles que min-width et min-height ne sont qu'un début. Vous allez ensuite découvrir de nombreuses autres fonctionnalités multimédias.