Comment concevoir un site web adapté aux mobiles

À moins que tu ne sois resté bloqué dans les années 2010, tu as dû entendre dire que Google prend au sérieux la vitesse du site et que ton site pourrait être pénalisé pour ça.

Quand il s’agit de navigation mobile, on est d’accord pour dire que la vitesse est importante.
Ensuite, la lisibilité et l’expérience utilisateur dans un second temps.
Enfin, l’engagement compte aussi. Le temps que tes visiteurs passent sur ton site et le nombre de pages qu’ils visitent sont importants aux yeux de Google. Le temps de visite et le taux de rebond ne sont pas des éléments essentiels du Web, mais ils contribuent à ton classement.

Plus d’engagement = meilleur contenu et meilleure autorité.

Dans cet article, je vais te donner quelques astuces pour une meilleure conception mobile et aider à améliorer ces trois éléments : la vitesse, l’expérience utilisateur et l’engagement.

Dimensionner les images pour la vitesse

Examinons la vitesse de ton site Web. Il y a de fortes chances que ton site Web soit riche en images, pour ton personal branding, ou encore si tu possèdes un e-shop (le nombre de photos peut être considérable !)
Lorsque certains me disent que leur site semble « lent », presque à chaque fois, c’est parce que les images ne sont pas correctement optimisées pour le Web. Elles sont souvent trop grandes à la fois en dimensions (taille en pixels) et en poids de fichier (ko et mo).

Si tu exportes des images à utiliser sur ton site Web ou sur ton blog, tu dois faire deux choses : les redimensionner ET les compresser.

Il existe de nombreux outils que tu peux utiliser pour le faire.

Par exemple, Lightroom permet de contrôler la taille et de définir un plafond sur la taille du fichier. Tu dois jouer avec les paramètres pour atteindre le bon équilibre. Il y a toujours un compromis entre vitesse et qualité d’image.

Si tu ne possèdes pas Lightroom ou Photoshop, un outil gratuit et utile est Bulk Resize Photos. Il te permet de compresser et de redimensionner par lots en même temps = un réel gain de temps.

J’utilise également l’outil en ligne TinyJpeg, sur ordinateur. Je l’utilise souvent comme outil de compression qui permet de gagner considérablement en poids, sans perdre en qualité d’image.

Deux outils à conseiller également sur ton site WordPress : Imagify ou ShortPixel. Ils te permettent de compresser les images que tu as déjà téléchargées, les images que tu vas télécharger à l’avenir et définir des dimensions maximales.

Plus important encore, tu peux convertir tes images au format WebP que Google adore.

Les deux plugins sont gratuits à télécharger mais tu devra ensuite acheter des blocs de crédit (très abordables et qui en valent la peine).

Remarque : le meilleur paramètre pour conserver la qualité et obtenir la meilleure compression est « Glossy ».

Planifier à l’avance pour une expérience mobile qui a du sens

Nous avons tous cliqué sur un mobile pour accéder à un site Web d’actualités et avons été bombardés de pop-up, de faux boutons et de vidéo à lecture automatique. C’est horrible, non ?
Je sais que ton site Web n’aura pas recours à ce genre de pratiques, mais en tant que propriétaire de site Web, tu dois t’assurer de proposer un parcours clair et agréable à tes visiteurs.

Lorsqu’il s’agit de concevoir de manière réactive, l’astuce consiste à anticiper ce qui va se passer physiquement lorsque ton site Web atteint un point de rupture et passe à une tablette ou à un mobile.
L’un des éléments clés à considérer est la façon dont tes colonnes vont s’empiler.
Si tu utilises deux colonnes ou plus, ton contenu apparaîtra-t-il dans un ordre logique ?
C’est pourquoi il est préférable de placer les titres et le texte d’introduction à gauche et une image à droite, de sorte que les informations écrites clés (texte) soient présentées en premier, puis suivies des informations visuelles (image).

Bien sûr, il existe des astuces CSS pour inverser l’ordre des colonnes sur mobile (et les constructeurs de pages comme DIVI te permettent de le faire simplement en cochant une case), mais il est préférable de planifier le résultat mobile que tu souhaites en premier lieu.

Besoin d’inverser l’ordre des colonnes sur mobile ? Regarde cette vidéo rapide, je te montre comment le faire avec Divi

Choisis des outils qui te permettent de contrôler l’expérience sur tablette et mobile

Si la plate-forme de ton site Web ne te permet pas de modifier ou de peaufiner la façon dont ton site est affiché sur la table et sur le mobile (par exemple, la taille de la police, les marges, le placement des images), tu seras sérieusement désavantagé.

Le meilleur outil de site Web est celui que tu peux utiliser, et qui met l’ accent en permanence sur les performances mobiles. N’oublions pas que plus de la moitié de tout le trafic Web se fait sur mobile, tu as donc vraiment besoin d’outils qui offre tous les avantages.

Ce n’est un secret pour personne, j’utilise le constructeur de pages le Divi Builder, car ça permet de combiner la conception visuelle en ayant la main sur les versions pour tablette et mobile. Les contrôles incluent l’ajustement de la taille de la police pour tablette et mobile, l’inversion des colonnes, l’affichage et le masquage des éléments pour chaque appareil et le contrôle du remplissage et de la marge. Sans avoir de contrôle sur ces paramètres de base par appareil, tu auras du mal à créer une expérience utilisateur transparente et attrayante sur mobile.

Comment tester sur plusieurs appareils

Souvent, la fenêtre d’affichage mobile que tu vois à l’écran lorsque tu modifies ton site Web ne ressemble pas exactement à ce que tu vois sur un vrai téléphone ou une vraie tablette.

Et nous ne pouvons pas posséder toutes sortes de téléphones portables et taille d’écran différentes.

Heureusement, il existe d’excellents simulateurs dont l’utilisation est totalement gratuite.
Tout d’abord, tu peux utiliser les outils de développement de ton navigateur. Chrome, Firefox et Safari offrent tous la possibilité de basculer entre les appareils et de définir et de vérifier des points de rupture. C’est très pratique lorsque tu écris du CSS ou que tu vérifies les mises en page pendant le processus de construction.
Mais ce n’est toujours pas aussi bon que de voir ton site se charger sur un vrai téléphone.

Mon outil préféré pour les simulations du monde réel est Responsive Design Checker, que j’utilise comme vérification finale de l’intégration avant de lancer un site ou de le montrer à un client.
Ce que j’aime, c’est que tu peux choisir des appareils spécifiques et je le trouve assez précis.

L’avenir est mobile

Tous les outils que la plupart d’entre nous utilisons pour créer des sites Web sont sur une courbe d’amélioration montante et nous donnent de plus en plus de contrôle sur l’apparence de nos sites Web sur tablette et mobile.

Avec l’indexation Google mobile-first et les nouveaux Core Web Vitals sur le point de disparaître, assure-toi de ne pas négliger l’expérience mobile de ton site Web.

L’impact du responsive design dans le référencement naturel

J’ai eu la chance d’interviewer Anaïs, spécialiste SEO, elle a pu répondre à mes questions concernant la responsivité et le référencement naturel.

Bonjour Anaïs, est-ce que tu peux te présenter ?

Je suis Anaïs Foppoli, avec plusieurs années d’étude et d’expérience dans le marketing digital, j’ai décidé de tenter l’aventure de l’entrepreneuriat. Je suis donc consultante en référencement naturel et stratégie digitale et j’aide les petites entreprises à être plus visible sur Google pour accroître leur notoriété ainsi que leur chiffre d ‘affaires.

Est ce qu’il y a réellement un lien entre la responsivité du site internet et un meilleur positionnement sur les moteurs de recherche ?

Alors oui et non … Depuis 2016, Google déploie progressivement un nouveau type d’indexation (l’indexation est la façon dont les algorithmes parcourent les sites internet). Les sites internet mobile-first sont maintenant parcourus en priorité. Google ne donne malheureusement pas trop d’informations à ce sujet mais ce que l’on sait c’est que l’expérience utilisateur est vraiment une priorité pour le moteur de recherche. Un site internet non-responsive aura plus de mal à séduire les internautes. Il y aura donc un taux de rebond élevé, un taux de conversion bas … La notoriété du site internet sera donc impactée et son positionnement également.

Depuis combien d’année Google favorise les sites internet responsive ?

Depuis 2016 Google a commencé à prendre en compte les versions mobiles des sites internet mais c’est vraiment depuis peu que les sites responsive sont “favorisés” dans le positionnement sur les pages de résultats de recherche.

Pourquoi est-ce dans l’intérêt de Google de favoriser ce type de site internet ?

L’objectif même d’un moteur de recherche est de répondre au mieux aux requêtes (mots-clés) des utilisateurs. L’expérience utilisateur est très importante pour Google c’est pour cela qu’ avec l’utilisation croissante des smartphones et autres terminaux plus petits, la création d’un algorithme qui indexe les versions mobiles des sites internet était une évidence.

Est ce qu’un site internet responsive t’impacte différemment dans ton travail de consultante SEO ?

J’ai eu la “chance” de me lancer dans l’entrepreneuriat au moment où l’algorithme mobile first de Google était déjà en train d’indexer les sites en version mobile. Cela ne m’a pas vraiment perturbé. Cependant, pour les sites internet de mes clients, c’est vraiment une priorité pour moi de les informer sur l’importance d’avoir un site responsive. Grâce à différents outils pour le référencement naturel, je peux examiner les potentiels problèmes qui pourraient intervenir sur un site internet avec une utilisation mobile.

⟶  A lire aussi : Référencement naturel : les bases pour un site web efficace