11. Responsive Design¶

Le "responsive design" consiste à adapter le design d’une page web à de nombreuses résolutions. Cette tendance est apparue sur le web avec la démocratisation des smartphones et plus globalement des supports électroniques reliés à internet (tablettes, smart TV…).

Aujourd’hui, il est essentiel pour un site web de pouvoir être consulté depuis de nombreux types d’appareils.

Media-queries¶

Les media-queries sont à la base du Responsive Design.

Les media queries sont un mécanisme en CSS qui permet d’appliquer des styles différents en fonction des caractéristiques du périphérique ou de l’environnement d’affichage.

Elles sont utilisées pour créer des mises en page réactives et adaptatives, offrant ainsi une expérience utilisateur optimale sur différents appareils (écrans d’ordinateur, les tablettes, les smartphones, les imprimantes, les télévisions, les projecteurs…).

Concrètement, les media queries permettent de définir des règles CSS spécifiques qui s’appliquent uniquement lorsque certaines conditions sont remplies, telles que :

• La largeur de l’écran
• La résolution
• L’orientation (portrait / paysage)
• Les fonctionnalités du navigateur (thème clair / sombre, contraste élevé)
• Etc.

S’il est possible de cibler tout un tas de caractéristiques via les media-queries, elles sont aujourd’hui la plupart du temps utilisées pour adapter le design d’une page web à la largeur de l’écran du visiteur en appliquant des règles CSS de manière conditionnelle.

Voici quelques exemples d’usages usuels des media-queries :

• Un menu burger
• Les colonnes d’un site web (sur mobile on place majoritairement les éléments les uns en dessous des autres et sur PC on a tendance à placer les contenus au sein de colonnes).
• Des images purement cosmétiques vont parfois être invisibles sur mobile afin de ne pas surcharger l’affichage
• La taille des textes peut varier pour une meilleure lisibilité
• Etc…

Règle @media¶

Les media queries sont définies à l’intérieur d’une règle @media dans une feuille de style CSS.

Pour baser une media-query sur la largeur de la zone d’affichage (aussi désignée par le terme viewport), alors on ajoute le terme screen :

@media screen...

Ensuite, il faut définir un point de rupture et indiquer un type de borne.

Points de rupture (breakpoints)¶

Un point de rupture, aussi appelé breakpoint, désigne une largeur d’écran limite, qui une fois franchie, déclenchera une media-query.

Concrètement on pourrait créer des breakpoints pour n’importe quelle dimension, en revanche, on s’accorde généralement à travailler avec des valeurs standards qui correspondent aux formats d’appareil les plus courants.

Voici un référentiel sur lequel vous pouvez vous baser à titre d’exemple.

Bornes¶

Une fois le point de rupture défini il va falloir indiquer si nos media-queries doivent s’appliquer lorsque l’on passe au-dessus ou en dessous de ce seuil.

On distingue aujourd’hui deux syntaxes pour écrire des media queries :

• L’approche traditionnelle par combinaison avec le mot-clé and, largement supportée par l’ensemble des navigateurs web.
• L’approche plus actuelle, basée sur les opérateurs de comparaison, dont la compatibilité est croissante mais pas encore générale.

Borne minimale¶

Syntaxe par combinaison

Si une media-query est définie avec min-width, alors on indique qu’elle doit être déclenchée lorsqu’on passe au-dessus du point de rupture (valeur du point de rupture incluse).

/* >= 768px */
@media screen and (min-width: 768px) {
    /* Code CSS... */
}

Syntaxe avec opérateur de comparaison

Alternativement, la syntaxe par opérateur de comparaison, est plus explicite :

@media (width >= 768px) {
    /* Code CSS... */
}

Borne maximale¶

Syntaxe par combinaison

Si une media-query est définie avec max-width, alors on indique qu’elle doit être déclenchée lorsqu’on passe en-dessous du point de rupture (valeur du point de rupture incluse).

/* <= 1024px */
@media screen and (max-width: 1024px) {
    /* Code CSS... */
}

Syntaxe avec opérateur de comparaison

Alternativement, la syntaxe par opérateur de comparaison, est plus explicite :

@media (width <= 1024px) {
    /* Code CSS... */
}

Intervalle¶

Syntaxe par combinaison

Si on utilise min-width et max-width conjointement avec un opérateur logique and, on peut créer des conditions plus complexes comme par exemple tester l’appartenance d’une valeur à un intervalle.

/* Entre 768px et 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* Code CSS... */
}

Syntaxe avec opérateur de comparaison

Alternativement, la syntaxe par opérateur de comparaison, est plus explicite :

@media (768px <= width <= 1024px) {
    /* Code CSS... */
}

Mobile First¶

Dans le monde du webdesign et de l’intégration, nous parlons aujourd’hui de Mobile First ; cela signifie que plus de 50% de la navigation sur le web se fait via des terminaux mobiles. Il est indispensable d’adapter les sites web aux smartphones, tout en continuant de considérer les autres supports comme la tablette ou le desktop (ordinateur).

Si à l’origine on développait le site en version desktop puis on le déclinait pour les tablettes et mobiles, on effectue aujourd’hui le processus inverse.

Le code CSS initial va donc styliser notre page pour le mobile et nos media-queries vont venir le décliner pour des appareils plus larges (tablettes, desktop…). Concrètement, cela ne change rien au design final. Le Mobile First est surtout une affaire de considération, de point de vue.

Côté règles CSS, on écrira alors la plupart du temps nos media-queries avec min-width ou l’opérateur >=, en pensant écran qui s’élargit.

/* MOBILE (+ TABLET PORTRAIT) */
.demo {
    width: 100%;
}

/* TABLET LANDSCAPE */
@media screen and (min-width: 768px) {
    .demo {
        width: 80%;
    }
}

/* LAPTOP */
@media screen and (min-width: 1024px) {
    .demo {
        width: 50%;
    }
}

/* DESKTOP */
@media screen and (min-width: 1280px) {
    .demo {
        width: 25%;
    }
}

Ici, notre image identifiée par la classe .demo sera en pleine largeur (100%) sur mobile et verra peu à peu la proportion d’espace qu’elle occupe diminuer sur des résolutions supérieures (768px, 1024px et 1280px).

Tester avec la Developer Tool cette age de démonstration pour mieux comprendre comment cela fonctionne.

Le Mobile First n'est pas une règle absolue !¶

Un Desktop First fera par exemple parfaitement l’affaire si :

• Vous développez un tableau de bord à destination des équipes commerciales d’une entreprise travaillant exclusivement sur ordinateur.
• Vous développez un écran affichant les arrivés / départs de vol pour les TV d’un aéroport.
• Etc.

Ou même encore un Tablet First si vous développez une application de contrôle qualité spécialement conçue pour l’industrie automobile, offrant une interface intuitive sur tablette pour les opérateurs.

Bien utiliser les media query en CSS¶

Lors de l’utilisation des media queries, il est important de suivre certaines bonnes pratiques pour assurer une expérience utilisateur optimale :

• Pensez d’abord au mobile : Concevez d’abord votre site pour les appareils mobiles, puis étendez-le aux écrans plus larges à l’aide de media queries.
• Utilisez des valeurs flexibles : Privilégiez les unités relatives comme les pourcentages et les em pour garantir une mise en page flexible et adaptative.
• Testez sur différents appareils : Assurez-vous de tester votre site sur une variété d’appareils et de tailles d’écran pour vous assurer qu’il s’affiche correctement partout.
• Restez organisé : Gardez vos media queries organisées et faciles à comprendre en les regroupant par caractéristique ou en utilisant des commentaires descriptifs.