Media Query pour les mobiles – Comment rendre les requêtes multimédias responsives pour tous les appareils

<img class=”attachment-large size-large lazyload” src=”https://weapzy.com/wp-content/uploads/2021/04/Media-Query-for-Mobile—How-to-Use-Responsive-Media.gif” alt=”Un homme disant “C’est une bonne idée”.” width=”480″ height=”270″ /><noscript><img width=”480″ height=”270″ src=”https://weapzy.com/wp-content/uploads/2021/04/Media-Query-for-Mobile—How-to-Use-Responsive-Media.gif” class=”attachment-large size-large” alt=”Un homme qui dit “C’est une bonne idée”.”>

 

Le responsive design et le media querying offrent des solutions pour que votre site Web s’adapte automatiquement à tous les appareils et à toutes les tailles d’écran. Il s’agit de sujets centraux et complexes qui, une fois que vous en aurez saisi le concept, rendront la création de sites réactifs beaucoup plus facile.

Dans ce guide, nous expliquerons ce qu’est le responsive design ou design réactif et comment il fonctionne. Nous verrons également comment mettre en œuvre et utiliser les media queries ou requêtes multimédias réactives pour tous les appareils et fournirons quelques conseils de dépannage. C’est parti !

• Qu’est-ce que le design réactif ?
• Comment fonctionne le design réactif ?
• Que sont les requêtes multimédias CSS dans le responsive design ?
• Comment utiliser les requêtes multimédia pour tous les appareils ?
• Quelles sont les tailles d’écran les plus courantes ?
• Dépannage des requêtes multimédia
• Questions fréquemment posées
• Conclusion

Lorsque Google a commencé à souligner l’importance des sites adaptés aux mobiles, la communauté des concepteurs de sites Web a réagi de plusieurs manières.

Nous avons par exemple vu des sites mobiles sur des domaines distincts avec une redirection automatique. Il existait également des plugins WordPress spécialisés dans les sites mobiles pour créer une version du site adaptée aux smartphones. Certains concepteurs ont simplement ignoré ce qui se passait et espéré que les gens s’habitueraient au zoom et au panoramique.

 

Toutefois, la solution privilégiée la plus populaire consiste désormais à utiliser le “responsive design” ou conception réactive. Ce terme a été inventé par Ethan Marcotte en 2010 et décrit une approche de la conception web visant à rendre les sites Web conformes à l’appareil utilisé pour y accéder.

En termes plus techniques, cela signifie que la taille et la position des éléments du site “répondent” à ce que l’on appelle le “viewport”. Il s’agit de la zone dans laquelle un site est visible, et elle est limitée à la fois par la taille de l’appareil et par la fenêtre du navigateur utilisée par l’appareil. L’objectif de la conception réactive est de rendre l’accès aux sites aussi confortable que possible pour les visiteurs, sans qu’ils aient besoin de zoomer, de défiler ou de redimensionner.

La meilleure façon d’en faire l’expérience est d’aller sur un site Web adapté aux mobiles sur un ordinateur de bureau et de réduire lentement la fenêtre du navigateur avec votre souris. Cela rendra les changements de conception graduels évidents (conseil : vous pouvez essayer ici même sur Weapzy).

📑 Le responsive design est une façon de construire des sites Web afin qu’ils se conforment automatiquement aux dimensions de l’appareil sur lequel ils apparaissent.

Le responsive design repose sur quelques grands principes. Le plus important d’entre eux est l’utilisation de tailles proportionnelles au lieu de mesures absolues. Cela signifie que les éléments du site Web sont déclarés en pourcentages et autres mesures réactives, plutôt qu’en unités statiques telles que les pixels.

Vous trouverez ci-dessous un exemple de la manière dont les tailles des éléments du site étaient déclarées auparavant :

.content {
width : 780px ;
}

En déclarant les tailles de cette manière, on obtenait une grille rigide (une grille étant la structure principale d’un site Web, y compris l’en-tête, le pied de page, le contenu, les barres latérales, etc.). Par conséquent, quel que soit le périphérique utilisé pour afficher un site Web, celui-ci avait toujours la même apparence, et les utilisateurs de petits écrans devaient effectuer un panoramique et un zoom pour en voir toutes les parties.

Aujourd’hui, nous disposons de ce que l’on appelle une grille fluide. Elle utilise des mesures proportionnelles et est donc capable de se conformer à la taille de la fenêtre d’affichage plutôt que l’inverse. Voici un exemple de ce que cela donne en CSS :

.content {
largeur maximale : 68 % ;
}

En outre, le responsive design doit prendre en compte les différents modes d’utilisation des utilisateurs mobiles, notamment l’utilisation du toucher au lieu de la souris ou du trackpad. Il est donc nécessaire de tenir compte des effets de survol, de la forme, de la taille et du positionnement des boutons et d’autres éléments cliquables tels que les éléments de menu pour les rendre utilisables.

Au cœur du responsive design se trouve le CSS. Pour les non-initiés, cette partie est responsable du style d’un site Web. Alors que le HTML construit le squelette et que le JavaScript ajoute des fonctionnalités, tout ce qui est beau est généralement du CSS : types de polices, tailles, couleurs etc.

Le CSS est central car il détermine donc la taille des objets. C’est là que nous utilisons nos mesures proportionnelles. Cependant, il y a quelque chose d’encore plus important pour que les sites Web soient bien conçus sur les mobiles : les requêtes média CSS.

Les requêtes média existent depuis 2009. Il s’agit d’opérateurs qui vous permettent (ainsi qu’à d’autres concepteurs et développeurs) d’ajouter des conditions à votre style. Par exemple, vous pouvez demander à un navigateur d’appliquer une couleur à un élément uniquement pour une certaine résolution d’écran, orientation (paysage ou portrait) ou taille.

Un cas d’utilisation courant consiste à demander au navigateur de déplacer la barre latérale sous le contenu principal lorsque la taille de l’écran est inférieure à 600px, par exemple. Nous verrons plus loin comment trouver les bons points de rupture et définir les bonnes requêtes médias réactives pour tous les appareils.

Outre les requêtes média, il existe d’autres considérations CSS importantes. L’une des plus importantes concerne les images et, plus précisément, la nécessité de s’assurer qu’elles s’adaptent à l’espace dans lequel elles apparaissent. Pour ce faire, il suffit généralement de fixer leur largeur maximale à 100 % :

img {
height : auto ;
largeur maximale : 100 % ;
}

Pour un chargement rapide des images, les développeurs de WordPress ont trouvé une solution géniale. Depuis la version 4.4, ils ont fait en sorte que les navigateurs reçoivent automatiquement la plus petite taille d’image possible via l’attribut HTML srcset. Cela permet d’économiser de la bande passante, ce qui rend tout plus rapide.

Très bien, il est maintenant temps d’entrer dans le vif du sujet. Dans les sections suivantes, nous allons voir comment utiliser les requêtes médias CSS et fournir quelques cas d’utilisation pour démontrer ce qu’elles peuvent faire :

• À quoi ressemble une requête multimédia typique ?
• Où placer vos requêtes multimédia
• Requêtes multimédia pour les appareils mobiles
• Requêtes multimédias pour les tablettes
• Requêtes multimédias pour les iPads
• Requêtes multimédias pour les ordinateurs de bureau

Avant de détailler les requêtes média spécifiques que vous pouvez utiliser pour différents appareils, il est important de comprendre à quoi ressemble une requête typique. Si vous regardez dans le fichier style.css de n’importe quel thème WordPress réactif, vous verrez quelque chose comme ce qui suit :

@media only screen and (max-width : 480px) {
/* votre CSS ici */
}

Comme vous pouvez le constater, chaque requête commence par @media (d’où son nom). Elle permet de définir des styles conditionnels pour différents types de médias ou de périphériques. only screen signifie que les règles suivantes s’appliquent aux écrans d’ordinateur, aux tablettes, etc. Une alternative est la parole, qui viserait les lecteurs d’écran.

Tout ce qui suit est la condition dans laquelle le CSS est appliqué. Les autres options sont not et only. Ces conditionnels vous permettent également d’enchaîner plusieurs conditions.

Dans notre exemple ci-dessus, la requête fixe une condition pour appliquer le CSS suivant uniquement aux écrans et lorsque la taille de l’écran passe en dessous de 480px. Il s’agit là d’une requête média typique pour tous les appareils mobiles.

Dans l’ensemble, ce format est à peu près la requête média la plus courante que vous trouverez dans la conception réactive. C’est également notre méthode préférée.

Remarque : dans les requêtes de médias CSS pour tous les appareils, min et max peuvent également être utilisés de manière interchangeable. Cependant, certaines personnes préfèrent définir des plages entre les tailles d’écran avec min-width et max-width.

Il existe un certain nombre d’autres opérateurs que vous pouvez saisir. Si vous êtes intéressé, vous pouvez tout apprendre à leur sujet ici. Pour l’instant, passons à l’emplacement de vos requêtes média.

Comme nous l’avons mentionné, vous pouvez généralement trouver des requêtes média dans le fichier style.css des thèmes WordPress populaires et réactifs. Si vous les avez vues, vous avez peut-être remarqué qu’elles sont généralement situées à la fin du fichier.

Cela s’explique par le fait que les navigateurs lisent les feuilles de style de haut en bas. Tout ce qui se trouve en bas de la page écrase les règles situées en haut de la page (sauf si vous déclarez explicitement que cela ne doit pas se produire avec !important).

Ainsi, si votre taille de police standard est de 18px (telle que définie au début de style.css), vous pouvez modifier la taille de la police pour les écrans plus petits en ajoutant une requête média en dessous, telle que :

@media only screen and (max-width : 480px) {
corps {
font-size : 20px ;
}
}

Il est également possible de déclarer des feuilles de style différentes pour des tailles d’écran différentes afin que les requêtes média ne soient pas toutes dans le même fichier. Toutefois, cela dépasse le cadre de cet article.

Jusqu’ici tout va bien ? Pour bien comprendre comment utiliser les requêtes média, examinons d’autres cas d’utilisation pour différents appareils.

La requête média que nous avons incluse dans la section précédente peut être utilisée pour créer une version mobile de votre site. Vous pouvez également ajuster les conditions mobiles de la requête média pour cibler des appareils spécifiques et, plus précisément, des tailles d’écran.

Par exemple, pour un iPhone 5, vous pouvez utiliser le CSS suivant pour les modes paysage et portrait :

@media only screen 
et (largeur min. de l'appareil : 375px) 
et (max-device-width : 812px) 
et (-webkit-min-device-pixel-ratio : 3) {

}

Remarque : vous pouvez vous référer à cette ressource pour trouver la taille d’écran exacte d’un smartphone particulier. CSS-Tricks propose également une liste utile de requêtes média standard pour chaque appareil.

En outre, il existe une poignée de cas d’utilisation des requêtes média qui peuvent s’avérer utiles. Par exemple, une requête média CSS courante pour les appareils mobiles consiste à modifier le style du menu, car ces appareils ont souvent des exigences complètement différentes en matière de menus. Le menu horizontal typique utilisé sur les écrans de bureau ne fonctionne pas sur un téléphone, car les boutons sont trop petits pour être touchés avec le doigt.

C’est pourquoi de nombreux thèmes contiennent des balises permettant de passer à un menu réactif (avec l’icône du hamburger) en dessous d’une certaine taille. Par exemple, si vous réduisez la taille de votre navigateur sur notre site Weapzy, vous pouvez voir cela en action.

Sur un écran de bureau standard, le menu de navigation de notre page d’accueil ressemble à ceci :

Cependant, dès que vous réduisez la fenêtre du navigateur, il se transforme en ceci :

Une autre façon populaire d’utiliser une requête média consiste à déplacer la barre latérale sous la section de contenu principal. Il s’agit d’une manœuvre courante dans le cadre d’une conception Web réactive.

Il n’est pas logique d’encombrer l’écran d’un appareil mobile avec du contenu, surtout lorsque le téléphone est en mode portrait. Un exemple courant de requête média CSS dans les feuilles de style modernes ressemble à ceci :

@media only screen and (max-width : 600px) {
.sidebar {
float : none ;
largeur : 100% ;
}
}

Plutôt que de déplacer le contenu, vous pouvez le masquer complètement. C’est généralement le cas si le contenu n’apporte pas de valeur ajoutée aux utilisateurs mobiles ou si son chargement peut prendre trop de temps. Dans ce cas, vous pouvez utiliser ce qui suit pour le désactiver :

@media only screen and (max-width : 480px) {
.large-image {
display : none ;
}
}

Vous pouvez également appliquer ces requêtes média à d’autres appareils, tels que les tablettes. Bien entendu, vous devrez tenir compte des largeurs minimale et maximale appropriées pour ces appareils.

Un peu plus loin dans cet article, nous examinerons les tailles d’écran et les points de rupture les plus courants. Mais tout d’abord, examinons rapidement quelques exemples de requêtes média pour d’autres appareils, notamment les tablettes, les iPads, ainsi que pour les ordinateurs de bureau.

Comme pour les smartphones, il existe une grande variété de tailles d’écran pour les tablettes. En général, vous pouvez utiliser la requête média CSS suivante pour les tablettes :

@media only screen et (min-width : 768px) et (max-width : 1024px)

En outre, vous pouvez utiliser des pseudo-éléments dans vos requêtes média pour modifier le design de vos boutons. Encore une fois, cela n’est pas spécifique aux tablettes, mais nous l’incluons ici parce que la taille de l’écran des tablettes par rapport aux smartphones offre un peu plus d’espace et de flexibilité.

Les pseudo-éléments sont relativement nouveaux dans le monde de la conception Web. Ils peuvent appliquer des styles spécifiques à différentes parties d’un élément HTML. Voici comment vous pouvez les utiliser pour appliquer différentes dispositions à un bouton de connexion en fonction de la taille de l’écran :

.username:after {
content : "Insérez votre nom d'utilisateur" ;
}
@media screen and (max-width : 1024px) {
.username:before {
content : "Nom d'utilisateur" ;
}
}
@media screen and (man-width : 480px) {
.username:before {
content :"" ;
}
}

(Merci à Tomislav Krnic pour cet exemple !)

De nombreuses personnes considèrent les iPads comme des tablettes. Cependant, étant donné qu’ils ne sont techniquement pas classés comme tels par Apple, nous leur consacrons leur propre section.

L’un des avantages de l’utilisation des media queries pour cibler les iPad est que vous pouvez utiliser la même pour presque toutes les générations d’iPad, de l’iPad 1 à l’iPad Mini. Pour créer un design réactif qui se traduit bien sur ces appareils, vous pouvez utiliser les lignes de CSS suivantes :

@media only screen 
et (min-device-width : 768px) 
et (max-device-width : 1024px)

Cette méthode peut également être utilisée pour les orientations paysage et portrait. Si vous souhaitez cibler les iPad Pros, vous pouvez envisager d’ajuster la largeur maximale de l'appareil à 1366px.

À moins que vous n’adoptiez une approche de la conception Web axée sur le mobile, vous créez probablement votre site pour les ordinateurs de bureau. Cependant, l’utilisation de requêtes multimédias réactives est une bonne idée car vous voulez vous assurer que vous offrez une expérience utilisateur (UX) solide même si un visiteur utilise une minuscule fenêtre de navigateur.

Comme vous vous en souvenez peut-être, la modification de la taille du navigateur peut avoir une influence majeure sur la présentation et la convivialité du site. L’incorporation d’une requête média CSS pour le bureau peut éviter que le site ne paraisse déformé.

Dans la plupart des cas, il est plus judicieux de définir une requête média basée sur les tailles d’écran les plus courantes plutôt que sur des appareils spécifiques. Cette dernière option peut poser certains problèmes, que nous aborderons sous peu.

À ce stade, nous espérons que vous comprenez les bases de l’utilisation des media queries et pourquoi elles sont si importantes dans le responsive design. Toutefois, nous souhaitons encore aborder les tailles d’écran les plus courantes et la définition des points de rupture, ce qui peut s’avérer délicat.

Comme nous l’avons mentionné précédemment, il existe de nombreux appareils différents, dont la taille, la résolution et l’orientation varient. Alors, à quel moment devez-vous modifier le design? Pour répondre à ces questions, regardons d’abord quelques statistiques.

Afin de déterminer les bonnes requêtes média responsives pour tous les appareils, voici quelques statistiques sur les tailles d’écran les plus populaires sur Internet (septembre 2020, Statcounter) :

En chiffres :

• 360×640 — 11.93%
• 1366×768 — 8.95%
• 1920×1080 — 8.28%
• 375×667 — 4.28%
• 414×896 — 3.24%
• Autres – 39,33

À partir de là, nous pouvons facilement conclure qu’il est préférable d’opter pour trois tailles : ordinateur de bureau, tablette et téléphone. Il est maintenant temps de déterminer notre point d’arrêt. Pour faire simple, un point d’arrêt est un élément que vous pouvez ajouter à votre requête média et qui permet aux éléments de conception situés de part et d’autre de celui-ci de se comporter différemment.

📌 En responsive design, les requêtes CSS sont utilisées pour définir ce que l’on appelle des points d’arrêt. Il s’agit de points de coupure pour les tailles d’écran à partir desquels le design change.

 

Si vous utilisez trois tailles d’écran, vous pouvez ajouter deux points de rupture : un à 768px et un à 360px. Cependant, cela ne tient pas compte du fait que les appareils mobiles fonctionnent également en mode paysage, ce qui nécessite deux autres points de rupture, un à 640px et un à 1080px.

Si l’on examine les données de StatCounter, on constate que le groupe le plus important est en fait constitué de tailles non définies (plus de 39 %). Comment pouvez-vous les optimiser ?

Comme vous pouvez le constater, essayer de définir des requêtes multimédias réactives pour tous les appareils devient vite déroutant, surtout si vous avez l’habitude de définir des requêtes multimédias CSS min et max. Cela ne veut pas dire qu’il n’y a pas de mérite à regarder les statistiques. C’est en fait une bonne idée d’avoir une idée générale de vos points de rupture.

Cependant, en fin de compte, la meilleure idée est de définir vos points d’arrêt en fonction de votre conception. Plutôt que de définir les points d’arrêt pour des gadgets spécifiques, il est plus prudent de regarder où ils sont nécessaires. De cette façon, vous n’aurez pas à optimiser pour des centaines de téléphones et de tablettes existants. Vous pouvez faire en sorte que le design parle de lui-même.

La meilleure approche consiste à toujours commencer par le mobile. Prenez votre conception et réduisez votre écran à la plus petite taille possible. Si vous n’avez pas mis en place de media queries, le résultat sera probablement horrible. Par exemple, voici notre site Web après avoir désactivé certaines requêtes multimédia :

C’est donc votre première tâche à accomplir. Vous n’aurez peut-être pas à modifier toute la mise en page, mais plutôt un ou deux éléments. Remarque : vous pouvez utiliser les outils de développement de Chrome et de Firefox pour créer différentes tailles d’affichage, y compris des tailles supérieures à l’écran que vous utilisez actuellement.

L’objectif est de faire en sorte que l’apparence soit acceptable. Développez lentement l’écran et observez le comportement de la mise en page :

Lorsque vous arrivez à un point où l’apparence n’est plus bonne, vous avez trouvé un point de rupture. Introduisez la modification dans votre feuille de style, puis procédez de la même manière jusqu’à ce que vous atteigniez le plein écran. Bien que cela puisse être fastidieux, le résultat final est bien meilleur.

Si vous êtes totalement novice en matière de media queries, vous risquez de rencontrer quelques problèmes lorsque vous commencerez à les utiliser. Jetons un coup d’œil à quelques-uns des problèmes les plus courants que vous pouvez rencontrer lorsque vous travaillez avec des requêtes média pour tous les appareils, ainsi que la façon de les résoudre :

• Les requêtes multimédias ne fonctionnent généralement pas
• Les requêtes multimédias pour ordinateurs de bureau ne fonctionnent pas
• Les requêtes multimédia pour mobiles ne fonctionnent pas

Si vos requêtes multimédias ne prennent pas effet, la première chose à vérifier est qu’elles se trouvent au bon endroit. Comme nous l’avons mentionné, elles doivent se trouver à la fin de la feuille de style afin d’écraser les déclarations antérieures. Lorsqu’elles ne sont pas dans le bon ordre (les requêtes pour les petits écrans avant celles pour les grands écrans), cela peut être une source d’erreur.

Si tout est dans l’ordre mais que vos styles ne sont toujours pas écrasés, assurez-vous d’utiliser les mêmes sélecteurs CSS dans la requête média que vous essayez d’écraser. Si les sélecteurs précédents sont plus spécifiques, ils peuvent continuer à écraser le nouveau sélecteur.

Il est également possible que votre CSS soit déclaré en ligne (c’est-à-dire directement dans un document HTML, par opposition à la feuille de style). Dans ce cas, voyez si vous pouvez supprimer le CSS en ligne ou forcer une écrasement avec !important. De même, si une déclaration antérieure est déjà associée à !important, cela peut être la raison pour laquelle vos écrasements ne fonctionnent pas.

Vous pouvez remarquer que, bien que vos requêtes fonctionnent sur les appareils mobiles, elles ne fonctionnent pas sur un ordinateur de bureau avec une fenêtre de navigateur réduite. Si c’est le cas, vous avez peut-être défini une requête média spécifique à un appareil.

Il est important de noter que max-device-width et max-width ne sont pas les mêmes ordres CSS. Pour la première requête média, la taille de l’écran (et non la taille de la fenêtre d’affichage) est le facteur décisif.

Supposons que la largeur maximale de l'appareil soit définie à 480px. Cela signifie que la conception ne changera pas dans un navigateur de bureau, car l’écran du périphérique de bureau est plus grand, même si sa fenêtre d’affichage est de 480px. En revanche, elle sera modifiée sur un iPhone.

L’utilisation de la largeur maximale permet de résoudre ce problème. En fait, l’utilisation de max-width est suffisante dans la plupart des cas.

Vous êtes peut-être confronté au scénario inverse. Si vos requêtes fonctionnent dans un navigateur mais pas sur mobile, il se peut que vous ayez oublié de définir le viewport et le zoom par défaut.

Pour cela, vous devez ajouter la ligne suivante à votre en-tête :

<meta name="viewport" content="width=device-width, initial-scale=1" />

Ce paramètre indique au navigateur qu’il faut afficher les pages en fonction de la largeur de l’appareil. Son ajout permet souvent de faire fonctionner les points d’arrêt mobiles.

L’ère des téléphones mobiles et des tablettes a bouleversé l’ensemble du paysage en ligne. De nos jours, aucun site Web ne peut se passer du responsive design et de l’optimisation mobile. Pour maximiser la réactivité de votre site pour tous les appareils, nous vous recommandons d’utiliser les requêtes média CSS.

Comme nous l’avons expliqué dans cet article, vous pouvez utiliser les requêtes média pour les appareils mobiles et autres tablettes en ajoutant quelques lignes de CSS au fichier style.css de votre thème. Vous pouvez définir ces requêtes en fonction des tailles d’écran courantes, ainsi qu’appliquer des conditions pour masquer et déplacer certains éléments trop lourds pour les petits écrans.