Avant, il était possible de développer une version desktop et une version mobile. Mais ça, c’était avant la multiplication des modèles de smartphones, tablettes, phablettes et ordinateurs portables.

Les différentes tailles d’écran ont amené le responsive design qui permet d’adapter votre site à toutes les résolutions d’écran. Comment est-ce possible ? Grâce aux media queries, des règles permettant d’adapter un design à différentes tailles d’écran et optimiser la disposition graphique de sa page.

Découvrez ce concept et des exemples concrets pour les utiliser.

Les media queries, ces règles qui facilitent l’affichage multi-écrans

Les media queries sont apparues avec CSS3. Dans la famille des règles et non des propriétés, elles permettent de définir une “fourchette” au-delà de laquelle l’affichage doit-être différent.

On juge qu’une résolution moyenne d’écran est :

En appliquant ces règles, le design d’un site s’adaptera automatiquement en fonction de l’écran de l’internaute. Pour les webdesigners et les développeurs front, cette technique simplifie énormément le travail d’adaptation du site au mobile. D’ailleurs, si vous avez besoin d’une adaptation ou si vous avez une création de site en version mobile en cours, trouvez des designers experts en responsive design sur Graphiste.com.

Les règles media queries énoncent clairement lorsque la propriété CSS doit être appliquée. Pour les mettre en place, il existe deux options :

Pour créer les media queries, vous devez respecter le formalisme suivant :

Cas pratiques : les principaux usages des media queries en responsive design

Les media queries sont devenues très courantes dans les dernières versions responsive des sites développés en HTML5 et CSS3. Les changements qu’elles peuvent engendrer sont nombreux et vont au-delà de la résolution d’écran :

Voici une liste des principaux usages que vous pourriez en faire.

Menu burger

Un classique de la version mobile, le menu d’un site web doit être réduit et optimisé sur mobile. Il peut changer de forme en utilisant les media queries.

Voici comment amener le menu en haut de la page et supprimer le style des éléments de la version desktop (bordures, marges, survol, etc…).

@media only screen and (min-width : 268px) {
a.to.nav {
display : none ;
}
.wrapper {
position : relative ;
width : 768px ;
margin : auto ;
}
#primery_nav {
position : absolute ;
top : 5px ;
right : 10px ;
background : none ;
}
#primery_nav li {
diplay : inline ;
}
#primery_nav li a {
float : left ;
border : none ;
padding : 0 10px ;
-webkit-border-radius : 2px ;
-moz-border-radius : 2px ;
border-raidus : 2px ;
}
}

La page et la fenêtre

Pour adapter l’affichage de votre page sur l’écran de votre visiteur, il est indispensable d’en contrôler sa taille grâce à la règle max-width. Nous parlons beaucoup de la largeur d’écran car c’est la variable la plus visible en responsive design, mais il est tout à fait possible de faire également varier la hauteur avec la règle max ou min-height.

Voici les exemples de media queries du Framework CSS Bootstrap :

Les polices

Elément indispensable de la lisibilité et l’accessibilité d’un site, les polices doivent constamment s’adapter à la taille de l’écran. Inutile d’imaginer votre visiteur lisant sur mobile en texte en taille 4 pixels (la taille moyenne d’un texte sur mobile est 16 pixels) !

Adoptez les media queries pour définir qu’en-dessous d’une certaine largeur d’écran, les polices devront être grossies. Voici l’exemple pour votre titre H1 :

h1 {
font-size : 5em ;
}
@media only screen and (max-width : 320px) {
h1 {
font-size : 3em ;
}
}

Épurer la version mobile

Lorsqu’un site n’est pas développé en mobile first, on constate souvent que la version web est beaucoup trop dense pour une lecture optimale sur smartphone.

Les media queries permettent alors de définir quels sont les éléments à “masquer” en dessous d’une certaine résolution d’écran. Il peut s’agir de :

Si vous souhaitez tout de même conserver les blocs latéraux de votre site web, utilisez les media queries pour les placer en-dessous de votre contenu et éviter le scroll latéral (à bannir en navigation mobile !).

Vous l’aurez compris, les media queries sont des règles essentielles à respecter pour tout web designer souhaitant travailler sa disposition graphique conformément aux exigences du responsive design.