skip to Main Content

Design WordPress Responsive avec la règle @media de CSS3

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Constatant l’utilisation de plus en plus importante des terminaux mobiles, depuis la fin du mois d’Avril 2015, Google pénalise les sites web dont les pages ne sont pas prêtes pour le mobile. Conséquence, pour votre référencement, vous devez vous assurer que votre site web s’affichent décemment sur les grands écrans comme sur les plus petits.

Dans cet article, je vous montrerais comment vous pouvez mettre votre site web à la page en utilisant la règle @media de CSS3.

Il est important noter que les termes « responsive » et « compatible-mobile » sont souvent utilisés indifféremment malgré la différence de leur sens réel. Il est important de comprendre ce que chacun signifie pour pouvoir être capable de vous assurer que votre site web respecte les critères nécessaires pour s’accommoder à toutes les tailles d’écrans.

Mais avant, si vous n’avez jamais installé WordPress découvrez Comment installer un blog WordPress en 7 étapes et Comment rechercher, installer et activer un thème WordPress sur votre blog 

Ensuite, revenons sur ce pourquoi nous sommes là.

Responsive et compatible-mobile

Les sites web qui ne sont ni responsive ni compatibles-mobiles, s’affichent de façon identique sur tous les écrans, c’est à dire que c’est la version pour grands écrans qui s’affiche partout. Sur les écrans plus petits, il faut dérouler la page horizontalement pour voir tout leur contenu. Ils sont difficiles de navigation sur ces écrans. 

Découvrez aussi ces 8 plugins WordPress pour personnaliser le look de votre site web

Un site web est compatible-mobile lorsqu’il ne respecte que le stricte minimum pour être vu sur mobile, ce qui n’en fait pas un site web responsive. Par exemple, on peut considérer qu’un site web est compatible-mobile si vous n’avez pas à naviguer horizontalement. Ceci entraîne que ses éléments deviennent petits et indiscernables. Vous devez alors zoomer pour lire son contenu.

De leurs côtés les sites web responsive s’adaptent parfaitement aux différentes dimensions d’écrans. Ils redéfinissent leurs éléments de telle sorte qu’ils puissent facilement être vus et utilisés sur les plus petits écrans. C’est ce type de design que vous voulez pour votre site web.

Consultez aussi nos 10 plugins WordPress pour créer un formulaire de réservation sur votre site web

Vous savez maintenant la différence entre responsive et compatible-mobile. Nous allons à présent voir la règle @media de CSS3 qui permet de mettre votre site web d’être à jour pour le responsive ou de créer assez facilement des thèmes WordPress avec du contenu responsive.

La règle @media de CSS3

Pour rendre votre thème responsive, vous aurez besoin de la règle @media de CSS3. En gros, elle vous permet de définir les styles que vous voulez employer pour un type (dimensions) particulier d’écran. Vous l’utiliserez comme une autre règle de CSS (avec des accolades) à la seule différence qu’elle imbrique d’autres règles CSS.

@media type-de-media (expression) {
    selecteur-css-test {
        propriété1: valeur1;
        propriété2: valeur2;
    }
}

Dans cette structure les éléments à l’intérieur de la règle @média ne fonctionnent que lorsque le type-de-média spécifié à été détecter avec succès. Le type de média choisi, vous pouvez en spécifier les caractéristiques en termes de dimensions.

Découvrez Comment s’appliquent Interface et expérience utilisateur à WordPress

La règle @media détecte pour vous le type d’écran avec lequel votre site web est visité et choisi les règles qui conviennent le mieux à ce type d’écran. Tous les navigateurs majeurs ont déjà intégré la règle @media.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

En voici pour votre information la liste : Chrome , Safari, Firefox, IE, Opera et Edge.

Définir les écrans cible

Si vous voulez modifier un thème WordPress existant, veuillez faire une copie de sauvegarde du CSS de ce dernier afin de pouvoir revenir en arrière si nécessaire.

Lire aussi notre article sur Comment charger progressivement les commentaires Facebook et Disqus

Comme nous l’avons vu dans sa structure, pour définir le type d’écran, vous devez faire suivre @media du type d’écran ciblé. Voilà la liste des différents types d’écran :

all : pour tous les types d’écrans ou pour les dimensions spécifiées dans expression
screen : pour tous les écrans, que ce soit mobile, tablette, laptop ou desktop
print : pour les imprimantes, si vous voulez des styles particuliers pour les pages qu’on peut imprimer
speech : pour les lecteurs d’écrans, si vous voulez voulez des styles pour les malvoyants.

Il existe aussi des opérateurs que vous pouvez mettre avant le type d’écran; comme not pour afficher des styles pour les écrans qui sont d’un autre type que celui spécifié ou only pour n’appliquer les styles qu’aux écrans spécifiés. Vous pourrez donc avoir :

@media only screen

Définir les styles pour les dimensions d’écrans

Vous pouvez utiliser expression pour apporter des précisions sur les caractéristiques de l’écran. Après @media saisissez and suivi de l’expression. Si vous utilisez plusieurs expressions, elles devront toutes être séparées par des and. Voilà un exemple de la structure :

@media only screen and (max-width:640px) {
  selecteur-css-exemple {
    /* Votre CSS d'habitude ici */
  }
}

Dans cet exemple j’utilise max-width avec une valeur de 640px. Ceci pour définir une largeur maximale d’écran de la taille de celle d’un IPhone ou d’un petit smartphone Android. Avec ce genre de structure, vous avez le contrôle sur comment s’affiche votre site web sur différents terminaux. Voici une liste de propriétés liés aux dimensions que vous pouvez employer dans expression :

Découvrez aussi nos 8 plugins WordPress de SEO pour optimiser le référencement de votre site web

min-width et max-width : respectivement la largeur minimale et maximale requise pour l’affichage de styles contenus dans la règle @media. Un pixel de plus et les styles ne sont pas affichés.

min-height et max-height : respectivement la hauteur minimale et maximale requise pour l’affichage des styles contenus dans la règle @media. Parce que la plupart des écrans sont conçus pour dérouler les pages verticalement, les propriétés min-height et max-height sont peu utilisées.

Voici une liste des dimensions d’écrans de quelques terminaux :

IPhone : 640px
– IPad : 1024px
– Tablettes : 1366px
– Smartphone Android : 640px, 720px, 854px, 960px
– Android extra large : 1024px, 1066px
– Windows phone : 480
– Windows phone large : 768px
– petits et anciens : 320px
– Ultrabook/Laptops : 1366px
– Desktops et TVs : 1920px

Il existe bien d’autres propriétés que vous pouvez utiliser dans expression. Par exemple, si vous ciblez  les écrans de desktops ou de télévision capables d’afficher des images au format 16:9 vous pourriez utiliser une structure comme celle-ci :

@media only screen and (min-width: 1920px) and (device-aspect-ratio: 16/9) {
  selecteur-css-exemple {
    /* Votre CSS d'habitude ici */
  }
}

 Pour des listes et des exemples plus complets, consultez w3schools et Mozilla Developpers.

Tester la fonctionnalité responsive de votre site web

Au fur et à mesure que vous modifiez ou construisez votre thème WordPress ou à la fin si vous aimez les surprises, vous devez en tester le résultat afin de voir s’il est finalement responsive. Rappelez vous, Google guette les sites web qui ne sont pas responsive.

Consultez aussi ces 10 plugins WordPress pour créer des onglets sur votre blog

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

A défaut d’avoir tous les terminaux mobiles que vous ciblez, il existe (heureusement pour nos bourses) bon nombre d’outils pour voir comment s’adapte votre site web aux différents écrans.

Directement dans le navigateur de votre ordinateur vous pouvez utiliser Window Resizer Chrome Browser Extension, ResponsiveResize, ResizeMe ou Firesizer. Ci dessous une image de BlogPasCher dans le Responsive Design View qui vient par défaut avec Firefox.

css3-media-firefox-responsive-design-view

Il existe aussi des sites web dédiés à la tâche :

Responsivepx

css3-media-responsivepx

Ce site web à la particularité de vous laisser choisir vous même les dimensions de l’écran. Sachez que ce site web charge le votre dans un frame. Donc si votre thème WordPress à été conçu pour ne pas s’afficher dans un frame, alors il est fort possible que ce dernier ne s’affiche pas ici.

IPad Peek

https://blogpascher.com/wp-admin/post.php?post=60969&action=editcss3-media-ipad-peek

Ce site web est intéressant pour tester votre site internet sur les derniers terminaux Apple, IPad et IPhone. Entrez juste votre URL. Notez qu’il est soumis au même problème de frame que responsivepx.

Mobile Phone Emulator

css3-media-mobile-phone-emulator

Dans ce site web, vous pouvez tester le votre sur les petits écrans et sur des anciens modèles de téléphones que vous sélectionnez sur le côté droit de l’écran. Vous pouvez aussi configurer quelques propriétés de l’écran.

Google Mobile Friendly test

css3-media-google-mobile-friendly-test

Voici l’un des tests les plus importants, si ce n’est le plus important. Entrez juste votre adresse dans la barre et cliquez sur Analyze pour commencer le test. Après le test, l’outil vous affiche un rapport et une note. Si le test est positif, alors tant  mieux, vous ne serez pas pénalisé par Google.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

Si vous n’êtes pas un développeur je vous conseille une liste de thèmes WordPress responsive pour commencer.

Ressources recommandées

Découvrez aussi d’autres ressources recommandées qui vous aideront à mieux séduire vos partenaires et abonnés, mais aussi à améliorer la sécurité de votre site web.

Conclusion

Voilà ! vous savez tout ce qu’il y a à savoir sur comment rendre votre site web ou votre thème WordPress responsive à l’aide de la règle @media de CSS3. Si nous avons manqué un thème WordPress qui vous est cher ou que vous préférez, s’il vous plaît laissez un lien dans la section commentaires ci-dessous.

Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.

Nous vous invitons aussi à le partager sur vos différents réseaux sociaux.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
6 Partages
Partagez6
Tweetez
Enregistrer