Mon site est-il responsive ?

Qu’est-ce qu’un site web responsive ?

Un site responsive est un site dont le design est adapté à tous les supports d’écrans, dont principalement les smartphones et les écrans d’ordinateurs.

site au design responsive

Pourquoi les sites doivent être responsives ?

Au début d’Internet, les sites web étaient lus, par le grand public, presque exclusivement sur ordinateur de bureau. Les développeurs ne se posaient pas la question, ils créaient des sites exclusivement adaptés au format bureau (souvent 1024X600) de vos vieux écrans cathodiques.

Puis nos téléphones ont évolués, tendant progressivement vers le smartphone dans les années 2000 et enfin, les tablettes sont apparues. Il s’est alors posé la question de créer des sites adaptés à la multitude d’écrans qui logent dans la chambre de votre adolescent.

Ces écrans ont des formats très variés. Vous vous doutez bien qu’il serait illisible de porter la largeur d’affichage PC sur un smartphone. Il faut donc créer des sites répondant à plusieurs formats. Dans le cas contraire, l’utilisateur mobile d’un site non adapté devra défiler toute la journée l’affichage de son écran pour espérer lire quelque chose.

Il existe alors deux solutions :

  • Créer un domaine spécifique pour le format mobile et un autre pour la lecture sur ordinateur
  • Adapter ses pages aux différents formats de lecture (autrement dit, créer un site « responsive »).

C’est la seconde solution que je vous recommande. Elle est beaucoup plus pratique et durable que la première.
Pratique parce que cela vous évite de devoir travailler sur deux sites différents, toute votre adaptation sera configurée sur le même code (CSS).
Durable parce qu’il y a une quantité monstrueuse de formats d’écrans aujourd’hui (PC, smartphones, tablettes, TV etc…) et vous ne pouvez pas deviner les formats des écrans grand public dans 5 ou 10 ans (Réalité Virtuel ? Réalité Augmenté ?)

L’intérêt du responsive dans le référencement : le Mobile First

Je vous pose une colle : êtes-vous en train de lire cet article sur votre smartphone ?

Eh bien une majorité d’entre vous êtes sur votre smartphone : 54 % du trafic internet mondial est consulté sur smartphone en 2019. Cette tendance va s’accélérer dans les prochaines années. Donc non seulement votre site doit être adapté au format mobile, mais il doit prioriser ce format.

Google s’en est rendu compte et passe progressivement depuis 2016 au « Mobile First« : les sites sont désormais indexés en priorité à partir du format mobile.

Ça ne veut pas dire à l’inverse que vous devez délaisser le format de bureau, ça veut simplement dire que les deux formats sont complémentaires et vos pages doivent s’y adapter.

Passer son site en design responsive

Il est possible que le site le soit déjà. La plupart des templates de sites le sont nativement. Vous pouvez faire l’expérience en réduisant votre fenêtre. Si votre site adapte sa navigation à la réduction de la taille de votre fenêtre, c’est que votre site est responsive. Vérifiez aussi la fonctionnalité de la navigation sur smartphone, un code fonctionnant sur PC peut parfois se montrer obsolète sur mobile.

Dans le cas contraire, si votre site n’est pas responsive, plusieurs solutions s’offrent à vous :

  • Certains plugins WordPress vous permettront d’adapter directement votre template à des fonctionnalités plus responsive. Ils se valent à peu près tous, je vous laisse les comparer et choisir celui qui sera le plus fonctionnel sur votre site.
  • Plus efficace, vous pouvez travailler le code CSS de votre site et rajouter une fonction « media queries ». Ainsi, certaines fonctionnalités de votre design seront spécifiques à des largeurs d’écrans. Pour Smartphone, vous allez devoir faire vos commandes CSS pour des médias ne dépassant pas 480 pixels. Pour cela, copier simplement le modèle de code suivant et adaptez-le à votre guise :
@media all and (max-device-width: 480px)
{
       /* Vous pouvez rajouter des commandes spécifiques au format mobile ici */

}
  • Si vous éprouvez des difficultés à rendre votre site plus responsive, vous pouvez me contacter par mail, ou faire une demande d’audit, si votre demande est plus spécifique.

Construisons ensemble votre visibilité

%d blogueurs aiment cette page :