Comment optimiser son site pour mobile ?
Les erreurs les plus courantes
Parmi les pièges classiques de la conception web, l’un des plus répandus est de privilégier la version desktop au détriment de l’expérience sur mobile lors du codage, ce qui cause des dysfonctionnements visuels sur les appareils portables.
Conserver certains templates de pages sans réaliser une adaptation responsive peut rompre la fluidité de l’expérience utilisateur.
À plus forte raison sur mobile, où les visiteurs sont souvent pressés, sous-estimer le temps de chargement de vos pages peut s’avérer préjudiciable : une attente excessive décourage les visiteurs et augmente le taux d’abandon.
Une conception soignée et réfléchie, prenant en compte ces écueils, est essentielle pour bien accueillir vos utilisateurs, sur tous les supports.
Qu’est-ce qu’un site web responsive ?
Un site optimisé pour mobile, offre une expérience de navigation optimale sur l’ensemble des appareils : ordinateurs, tablettes et smartphones. Cette approche utilise des techniques de conception flexibles, pour s’assurer que le contenu s’affiche de manière élégante et fonctionnelle, quelles que soient les dimensions de l’écran.
Comment ça marche ? Le site détecte automatiquement la résolution de l’écran de l’utilisateur et adapte l’affichage en conséquence. Les textes restent ainsi lisibles, les images conservent leur définition et les éléments interactifs restent accessibles. Le contenu peut ainsi apparaître sur 3 colonnes sur un écran d’ordinateur puis sur une seule colonne sur un mobile, tout en restant lisible.
De nombreux gestionnaires de contenus (ou CMS), gratuits ou payants, sont capables d’adapter directement leurs pages à tous les supports. Si ce n’est pas le cas de votre CMS, vous pouvez créer une version mobile de votre site, c’est-à-dire un site spécialement pour le mobile, séparé de votre site web classique
Toutefois, sachez que le responsive design est la solution à privilégier pour avoir un bon référencement naturel (SEO) sur mobile.
Étape 1 : Vérifiez que votre site est accessible sur mobile
Pour garantir l’accessibilité de votre site sur mobile, voici une checklist des points à vérifier :
- Prudence avec le chargement différé : Limitez l’usage du « lazy loading » ou chargement différé pour le contenu essentiel. Les moteurs de recherche doivent voir tout ce qui est pertinent dès le chargement de la page pour mieux le référencer, surtout si ce contenu en question est crucial pour le SEO.
- Accès aux ressources : Confirmez que les fichiers CSS, JavaScript et les images sont entièrement accessibles par les robots des moteurs de recherche. Un accès restreint peut empêcher le bon rendu des pages sur les appareils mobiles.
- Test d’accessibilité : Utilisez des outils en ligne, comme le « Test d’optimisation mobile de Google », pour vérifier que votre site est bien configuré pour les appareils mobiles et qu’aucun problème d’accessibilité ne persiste.
- Uniformité des balises meta robots : Assurez-vous que les balises meta robots, c’est-à-dire les balises qui permettent aux administrateurs de sites internet de définir leurs mots-clés pour un programme de recherche, sont bien identiques sur les versions mobile et desktop, pour bénéficier d’une indexation homogène par les moteurs de recherche et éviter des problèmes courants, comme du contenu non indexé sur l’une ou l’autre version.
Étape 2 : Facilitez la lecture de vos contenus
Le « responsive design » est la capacité d’un site à s’adapter au terminal de lecture. Le contenu peut ainsi apparaître sur 3 colonnes sur un écran large puis sur une colonne, sur un mobile tenu verticalement. Le conteneur principal de la page est revu en premier. Simplifiez le niveau de profondeur de vos menus, et décidez des contenus prioritaires à afficher en version mobile. Ne craignez pas de repenser votre façon de communiquer sur le web. Et pensez à vérifier régulièrement comment votre site mobile se situe par rapport à ses concurrents.
Les bonnes pratiques pour un site optimisé pour mobile
- Une mise en page aérée : favorisez un design qui respire, avec des marges généreuses et des espacements entre les éléments, pour faciliter la navigation tactile.
- La taille des éléments : assurez-vous que le contenu, les boutons et les polices soient assez grands pour être lus et utilisés confortablement sur des écrans plus petits.
- Une police adaptée : choisissez une police de caractère lisible et épurée, et qui offre l’avantage de rester claire même à petite taille. Par exemple : Roboto.
- Un menu simplifié : préférez un menu de type « burger », également appelé un « menu latéral » ou « à tiroir ». C’est un mode de présentation du menu ramassé, souvent sous la forme de trois barres latérales. Il permet d’offrir un accès rapide aux différentes sections de votre site sans encombrer l’écran.
- Formulaires concis : simplifiez les formulaires en ne demandant que les informations indispensables (nom, prénom et adresse e-mail par exemple). Vous rendez ainsi la saisie plus rapide et moins laborieuse pour l’utilisateur.
- Pas de pop-ups : évitez les fenêtres pop-up sur mobile, qui peuvent être très intrusives et nuire à l’expérience utilisateur. Sur la version de bureau, elles peuvent être utilisées avec parcimonie pour capter l’attention avant le départ du visiteur ou à son arrivée.
- Priorisation du contenu : sur les sites e-commerce, placez les offres de produits et les boutons d’action en haut de la page pour qu’ils soient immédiatement visibles, sans nécessité de faire défiler l’écran pour les visiteurs.
Étape 3 : Optimisez la vitesse de chargement des pages
Améliorer la vitesse de chargement des pages est déterminant pour l’optimisation de votre site web pour le mobile, et la construction d’une présence en ligne efficace. Ce facteur clé de la webperformance a un double avantage : il améliore l’expérience utilisateur et renforce le référencement naturel. En effet, les moteurs de recherche valorisent les pages qui chargent vite.
Voici quelques techniques pour améliorer la vitesse de chargement de vos pages :
- Minimisez le poids de vos images.
- Compressez vos fichiers.
- Réduisez les requêtes HTTP. Pour consulter une page d’un site web, votre navigateur télécharge toutes les ressources nécessaires à cette page à partir de son serveur. Pour ce faire, des requêtes HTTP sont adressées au serveur pour chaque ressource individuelle. Si possible, supprimez les requêtes inutiles ou combinez des requêtes entre elles.
- Exploitez le « caching », appelé aussi « mise en cache ». Cette technique consiste à stocker les éléments d’une page web sur le serveur du visiteur. Ainsi lors de sa deuxième visite, les objets chargés ne sont pas chargés à nouveau et l’affichage de la page est plus rapide.
Étape 4 : Misez sur le SEO mobile
Assurez-vous que toutes les ressources nécessaires à l’indexation des pages sont accessibles par les moteurs de recherche (Google, Qwant, Ecosia, etc.). Cela inclut les fichiers JavaScript, CSS et les images, qui doivent être chargés sans restriction pour permettre à Google de comprendre et classer correctement votre site.
Ensuite, adaptez les balises titre et les métadescriptions de vos contenus pour le mobile est essentiel. Elles doivent être concises et informatives, en raison des tailles d’écran réduites, tout en incluant les mots-clés pertinents pour améliorer le référencement.
Enfin, utilisez des données structurées. Ajoutez des balises de schémas dans votre code pour aider les moteurs de recherche à interpréter le contexte de vos informations, ce qui améliore la visibilité et la présentation de vos pages dans les résultats de recherche, notamment pour les recherches effectuées sur les smartphones. !
Pour garantir une expérience utilisateur de qualité et une visibilité optimale sur internet, testez régulièrement votre site web sur l’ensemble de vos appareils, mobiles, tablettes, et sur différents navigateurs. Pour vous faire accompagner, consultez nos offres « Je passe au numérique ».
Sources : Étude Médiamétrie 2022