C’est quoi le responsive ?
C’est le fait d’avoir un site lisible sur un téléphone mobile.
Pourquoi c’est important ?
Parce que plus de la moitié de tes visiteurs sont sur mobile quand ils arrivent sur ton site.
Comment faire pour avoir un site responsive ?
Normalement, il n’y a pas grand chose à faire pour que ton site soit responsive.
Si tu es sur Prestashop, Systeme.io, Wix ou Shopify, ton site sera automatiquement responsive (si tu n’as pas trop bidouillé la feuille de style).
Sur WordPress, ça va dépendre de ton thème. Par défaut, si tu prends un bon thème, il sera responsive, mais si tu le personnalises, ça peut casser la mise en page sur mobile.
Ce que tu dois comprendre pour avoir un site responsive
Pour avoir un site responsive, le contenu de ton site doit simplement être lisible sur un écran d’ordinateur, sur un écran de smartphone, sur un écran de télé, ou sur une tablette.
Le contenu doit donc s’adapter, s’étaler sur toute la largeur de tous ces écrans, qu’il soit tout petit (smartphone) ou très grand (télé). Ton contenu doit rester lisible.
IMPORTANT : c’est le même contenu qui se déforme/s’adapte pour s’adapter à la largeur d’un écran de mobile ou d’une télé, ou d’un ordinateur de bureau.
Ta mise en page doit être fluide.
Ne cale pas les éléments au pixel près. Aligne au mieux et laisse les textes et les images se positionner différemment sur mobile.
Comment tester ton site pour savoir s’il est responsive ?
Plusieurs méthodes possibles, de la plus simple à la plus complexe :
- Utilise un smartphone pour visiter ton site
- Va sur le site proposé par Google et entre l’adresse de ton site
- Avec ton PC de bureau, avec Chrome ou Firefox, va sur ton site, puis appuie sur F12, clique ensuite sur l’icone ci-dessous (à gauche sur Chrome, à droite sur Firefox) et ton site s’affichera comme s’il était sur mobile
Voici un exemple du même site vu sur un écran d’ordinateur de bureau et sur un écran de smartphone :
FP Conseil SEO
version Bureau
FP Conseil SEO
sur mobile
On voit que c’est le même contenu qui est restreint dans la largeur sur mobile. D’ailleurs on peut remarque qu’il y a quelques adaptations à faire avec la taille des titres et des images.
Comment rendre son site responsive ?
Pour adapter son site sur mobile et bureau, il faut modifier l’aspect des éléments sur le site.
Généralement, ça se fait avec la feuille de styles CSS. Elle va détecter la largeur de l’écran et afficher les éléments en fonction.
Par exemple, des colonnes qui s’affichent les unes à côté des autres sur bureau, seront les unes en-dessous des autres sur mobile.
Autre exemple, une image qui s’affiche à côté du texte, s’affichera au-dessus du texte (ou en-dessous) sur mobile en prenant toute la largeur de l’écran.
Si tu n’es pas à l’aise avec les feuilles de style, fais appel à un développeur en lui signalant les problèmes d’affichage que tu as remarqué. ça lui fera gagner du temps de savoir sur quoi il doit faire des adaptations.
Voila tu sais tout sur le responsive. Dans le principe ce n’est pas compliqué, c’est juste la capacité de ton site à s’afficher lisiblement sur mobile.Mais techniquement c’est un peu plus complexe car il faut souvent rentrer dans le code pour adapter les éléments en fonction de la taille de l’écran.
N’oublie pas : la majorité de tes visiteurs sont sur smartphone !! Optimise ton site pour les smartphones en priorité !!