Comment vérifier si mon site s’affiche bien sur mobile ?

verifier affichage mobile site web

À l’heure du mobile-first, vérifier l’affichage de son site Web sur mobile est l’une des grandes tendances / nécessité en termes de SEO Technique du moment. 

Le savais-tu ? 

Depuis décembre 2019, 43 % des recherches internet sont effectuées par mobile en France (source : https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/france). Et ce pourcentage ne va faire qu’augmenter au fil du temps.

Par ailleurs, Google l’a officiellement annoncé :

“L’ergonomie d’un site internet sur mobile fait désormais partie des critères d’indexation et de classement sur son moteur de recherche.” 

D’où l’urgence d’avoir un site mobile responsive dès aujourd’hui si ce n’est pas encore le cas. 

Dans cet article, je t’invite à découvrir comment afficher la version mobile de ton site Web sur mobile ou desktop, et à l’optimiser pour l’adapter à tous les différents supports : ordinateurs de bureau et portables, tablettes numériques, smartphones et même télévisions (pourquoi pas). 

Pourquoi créer un site mobile responsive ? 

À cette étape, tu te poses peut-être encore cette question : « en quoi est-ce important d’avoir une site adapté au format mobile ? »

Je l’ai dit un peu plus haut, d’après Google, le caractère responsive d’un site Web fait désormais partie des critères d’indexation et de positionnement sur le moteur de recherche

En clair, Google accorde une priorité plus importante aux sites optimisés pour les appareils mobiles ; donc, ceux qui ont un design adaptatif. 

En plus, 34 % du trafic internet est généré par les téléphones mobiles, d’après une étude (source : https://www.slideshare.net/wearesocial/le-digital-en-france-en-2018/18) menée en janvier 2018 sur le digital en France. 

Et, ce n’est pas tout.

Selon une enquête révélée par Google, en février 2012, 51 % des clients sur mobile achètent au moins un article tous les mois (source :  https://services.google.com/fh/files/blogs/final_global_smartphone_user_study_2012.pdf).

Un chiffre qui a sans doute grimpé depuis le temps, n’est-ce-pas ?  

Avoir un site qui procure une bonne expérience de navigation à tes visiteurs, c’est également l’une des meilleures façons de booster ta crédibilité et ta réputation, certes, mais aussi et surtout ton taux de conversion, déjà souvent largement plus bas en mobile qu’en desktop (jusqu’à 64 selon une étude menée par le Business Intelligence de COntent Saquare) …

L’expérience utilisateur étant ainsi améliorée, les mobinautes sont plus enclins à poursuivre leur navigation et ont moins de difficultés à mener leurs actions, dont l’achat de tes produits ou services !

Okay, ça, c’est compris ! Voyons à présent comment tester la version mobile de ton site Web.  

Outils gratuits pour tester l’affichage d’un site Web sur mobile 

Comme mentionné plus haut, vérifier l’affichage de ton site Web sur mobile fait partie de la to do list pour optimiser ton contenu et doper ton CTR (Click Through Rate ou taux de clic en FR). 

Pour le faire, voici quelques outils ou méthodes pratiques. 

Naviguer sur ton site depuis un support mobile 

Tu l’auras deviné : pour tester l’affichage de ton site Web sur mobile, la première solution (et la plus simple, d’ailleurs) consiste à se mettre dans la peau d’un visiteur (ou d’une visiteuse) lambda. 

Aussi, depuis un smartphone ou une tablette numérique, rends-toi simplement sur ton site internet. 

Puis, teste les différents menus et liens, afin de t’assurer que tout fonctionne et s’affiche bien. Sans problèmes de textes déplacés ni de liens trop serrés. Car, même sur les petits écrans, les liens et les boutons doivent être facilement cliquables avec les doigts.   

Si tu ne détectes aucun problème, c’est top : ton template est responsive. C’est-à-dire, adapté pour être vu à la fois sur périphériques de bureau et terminaux mobiles.    

Soumettre ton site au test d’optimisation mobile de Google 

Après avoir copié-collé l’URL de l’une de tes pages dans le test d’optimisation mobile (dispo ici : https://search.google.com/test/mobile-friendly?hl=fr), tu reçois une réponse dans les secondes qui suivent. 

Google détermine si ta page répond (ou pas) aux normes actuelles de visualisation sur mobile. C’est assez simple. Pas besoin de créer un compte. 

En plus, si Google considère que ton site n’est pas compatible avec les petits écrans, il te soumet les raisons de cette incompatibilité ainsi que les problèmes non critiques MAIS détectés de chargement ; question de t’orienter dans ton processus d’ajustement. 

Test chargemet page mobile google
Test du chargement de la Home de mon site sur Google Mobile Friendly.

Dans le cas présent, ma page s’affiche parfaitement, mais Google a détecté que mon module de chat n’était pas 100% compatible avec leur robot exploreur puisqu’ils n’ont pas réussi à l’analyser.

Idéalement, pense à tester plusieurs pages types pour vérifier que TOUT soit compatible : page d’accueil, page contenu, page commerciale, page de checkout, etc… Chacune d’elle peut avoir une structure différente et donc des résultats variables.

Utiliser les outils intégrés à certains navigateurs 

Sur certains navigateurs, il est en effet possible de visualiser la version mobile de son site Web depuis un ordinateur portable ou de bureau. Dans ce mémo, je vais t’illustrer la démarche avec deux navigateurs : Google Chrome et Mozilla Firefox. 

  •  Comment voir la version mobile d’un site Web avec Chrome ? 

C’est tout simple. Après t’être rendu.e sur ton domaine par le biais de ce navigateur, appuie sur la fonction F12 de ton clavier (si tu es sur PC)

Puis, dans la boite de dialogue qui apparait – à droite ou en bas de ton écran – identifie les 2 petites icônes qui se trouvant  en haut à gauche de celle-ci.   

Clique ensuite sur la seconde icône ; celle qui représente un smartphone et une tablette. 

Ainsi, sur la barre horizontale du haut, tu pourras choisir la taille de l’écran et tester l’affichage de ton site sur diverses résolutions, comme, par exemple, sur BlackBerry Z30, Galaxy Note 3, iPhone X, iPad, etc. 

Sur Mac, je fais en général un clic droit > Inspecter qui me permet d’ouvrir un aperçu de ma page avec la possibilité de choisir différents formats d’affichage pour tester un maximum d’options.

Test affichage mobile sur Google Chrome
  • Comment voir la version mobile d’un site Web avec Mozilla Firefox ? 

Pour apprécier le rendu de ton domaine sur le format mobile avec Mozilla Firefox, la démarche est tout aussi simple qu’avec Google Chrome. 

Via ce navigateur, rends-toi sur ton site et appuie sur la fonction F12 de ton clavier. 

Dans la fenêtre qui apparait au bas de ton écran, repère les 6 icônes qui se trouvent en haut et à droite de celle-ci. 

Puis, clique sur la 3ème icône ; oui, celle qui représente un smartphone ou une tablette.

De la même façon, tu pourras choisir la taille de l’écran sur la barre horizontale du haut.

Seul différence avec le navigateur fourni par Google, Mozilla Firefox ne permet pas de tester le caractère responsive de son site Web directement sur l’interface graphique de certaines marques de smartphones ou de tablettes numériques. Toutefois, il propose des résolutions équivalentes.

Simples d’utilisation, efficaces, légères, ces deux outils intégrés offrent des fonctionnalités particulièrement sympas ; entre autre utiles pour vérifier si son site est bien adapté aux interfaces mobiles. 

  • Utiliser une extension Google Chrome 

Contrairement à Mozilla Firefox, sur Google Chrome, il est possible d’installer des modules spécialisés dans la visualisation des sites Web en format mobile. C’est le cas par exemple de l’extension Responsive Web Design Tester

Pour l’installer, rien de plus simple. Rends-toi dans le Store des extensions de ce navigateur, repère le module en question et clique sur « Ajouter à Chrome ». Après quoi, une petite icône apparaitra en haut à droite de ton navigateur. Une fois sur ton site, clique sur celle-ci. 

Une liste de supports mobiles sous Android et iOS (Apple) te sera alors proposée, en portrait ou paysage (landscape)

Il ne te reste plus qu’à simuler l’affichage de ton domaine sur l’interface graphique des terminaux mobiles qui t’intéressent. Ainsi, tu sauras si ton domaine est doté d’une conception responsive ou pas. 

Voilà. Le diagnostic est posé. Qu’est-ce qu’on fait, après ? Relaxe, je t’explique tout. 

7 astuces pour adapter ton site au format mobile 

Pour adapter ton site au format mobile, l’une des solutions les plus simples consiste à opter pour un thème responsive ou mobile-friendly. 

Sur WordPress, par exemple, la majeure partie des thèmes proposés intègrent déjà cette fonctionnalité. En voici une liste disponible sur Theme Forst : https://themeforest.net/category/wordpress/mobile.

Néanmoins, si ton site internet est plus mobile-hateful que mobile-friendly, je te donne, tout de suite, la check-list des 7 actions à mettre en œuvre pour améliorer l’affichage de ton site Web sur mobile. 

  • Optimiser la taille de tes images 

Trop grandes et trop lourdes, les visuels peuvent ralentir le temps de chargement d’une page Web sur mobile notamment. 

Si tu utilises un CMS (Content Management System) de type WordPress, tu peux installer des plugins comme « Imagify » pour réduire automatiquement la taille des visuels de ton site. 

Ou alors, à l’aide des outils gratuits comme « Photo Réducteur » ou « Tinyjpg », réduire la taille de tes images avant de les télécharger dans ta banque d’images.

  • Travailler ton « Page Speed » (avec ou sans AMP)

Accélérer la vitesse de téléchargement de tes pages est en une solution à implémenter si tu veux faciliter la navigation ton site, quel que soit le device utilisé (mobile ou desktop).

Pour cela, vérifie la vitesse de chargement de ton site ; et, le cas échéant, procède aux ajustements qui s’imposent, – sachant que le temps de chargement optimal d’une page Web se situe entre 0 et 3 secondes.

Pendant plusieurs mois, j’ai utilisé le plugin AMP for WP pour rendre toutes mes pages compatibles AMP et obtenir un temps de chargement ET un affichage mobile optimaux.

Malheureusement, à part en passant un peu (trop à mon goût) de temps à retravailler le template AMP, les résultats étaient vraiment médiocres en termes de conversion et cela créait trop de conflits avec l’affichage de certains formulaires affiliés non compatibles AMP.

J’ai donc décidé de travailler à l’optimisation technique de mon site plutôt que de le forcer à passer en AMP.

A toi de voir ce qui est le plus intéressant, le format AMP offrant une vraie opportunité d’atteindre 100% ou presque de compatibilité mobile et un énorme gain en termes de vitesse de chargement, mais comme dit, souvent au détriment d’autres aspects potentiellement cruciaux sur ton site…

  • Supprimer tes fenêtres pop-up et les publicités ? 

À ce niveau, il est important de rester bien lucide.

Sur mobile en effet, les fenêtres pop-up et les publicités sont particulièrement contraignantes.

Moi-même, je n’aime pas devoir fermer (souvent avec pénibilité) une fenêtre pop-up juste après avoir atterri sur un site Web. Toi non plus, n’est-ce-pas ? 

Néanmoins, à ce sujet, les opinions semblent converger :

  • la pop-up et inopinée, eh bien, ça reste un bon moyen de collecter les adresses mails des internautes ; 
  • et/ou de les faire rester plus longtemps sur son site Web ;
  • en proposant une « carotte » (un e-book gratuit ou un article similaire, par exemple). 

Mon conseil : propose des fenêtres pop-up si et seulement si elles sont pertinentes et apportent un vrai + à ton business !

Idéalement, elle ne doit pas recouvrir tout l’écran. Et encore, et toujours, veille à ce que le mécanisme de fermeture soit immédiatement disponible. 

Quant à la publicité, oui, c’est un bon moyen de monétiser son site Web. Seulement, quand elle devient abusive et intrusive, elle peut aussi devenir contreproductive.

C’est donc une question de dosage et de ciblage. Car, en effet, il est préférable de proposer des publicités qui ont un lien avec les thématiques développées sur sa plateforme et de veiller à ne pas laisser un format publicitaire devenir trop invasif.

Evite par exemple le format header qui peut devenir vraiment abusif, ou le format footer qui peut avoir tendance à couvrir la barre de validation des cookies par exemple !

Format Header invasif et format footer bloquant la barre de cookies…
  • Optimiser ton menu principal 

Idéalement, réduis ton menu principal à 4 ou 5 entrées. Car, s’ils présentent bien sur desktop, les méga-menus ou les menus à plusieurs niveaux imbriqués sont parfois difficiles à utiliser sur interface mobile. 

Dans la majeure partie des thèmes adaptatifs, les menus gigantesques sont réduits sous la forme d’un « burger » (ensemble de barres horizontales empilées) qui se déroulent lorsqu’on les touche. Et, aux yeux des webinautes, ça fait beaucoup, beaucoup trop de section à visiter. 

Donc, il est préférable que toutes les entrées du burger apparaissent d’un coup sur l’écran mobile. Sans que les webinautes ne soient obligés de  scroller. 

Évidemment, cette solution peut impliquer une réorganisation des pages de ton site web.

  • Utiliser un module d’adaptation automatique 

Il existe des extensions qui permettent d’adapter automatiquement son site Web au format mobile. C’est le cas, par exemple, du module « Mobiledition » http://www.mobiledition.com/

Tous mes thèmes étant responsive, je n’ai pas testé moi-même cette solution.

  • Rendre tes cordonnées de contact cliquables 

C’est une fonctionnalité ultra pratique. Aussi bien pour le numéro de téléphone que pour l’adresse mail. Plus besoin de copier et de coller ces informations. E

n un seul clic, le visiteur est dirigé vers son écran de numérotation ou vers sa boite mail, prêt à prendre contact avec toi. 

Alors, comment faire pour rendre un numéro de téléphone cliquable ?

Cela requiert un codage particulier mais pas très compliqué à installer.

Voici le code en html : <a href= »tel:+33 X XX XX XX XX »>+33 X XX XX XX XX</a> pour que ton numéro s’affiche ainsi : +33 X XX XX XX XX. La plupart des sites souhaitant être contactés par téléphone disposent désormais de cette option !

  • Intégrer une carte Google Map

Pourquoi faire ? C’est simple : pour permettre aux webinautes de trouver ton adresse de bureau facilement ; enfin, si tu en as une, évidemment. 

Pour ajouter une carte Google sur ton site, tape ton adresse dans Google Maps. 

Ensuite, appuie sur « Partager ». Ensuite, appuie sur « Intégrer la carte ». Ensuite, personnalise la taille de la fenêtre pour obtenir le code html à copier-coller dans le html de ton site.

Conclusion 

Une seule conclusion possible : si tu n’as pas encore attaqué le chantier du responsive, je ne peux que t’inciter à le lancer dès maintenant !

Que ce soit en passant par des thèmes ou plugins te permettant d’optimiser ton affichage, ou en confiant ce projet à une agence (pour les plus gros sites / budgets), il est juste « impossible » aujourd’hui d’espérer faire du business avec un site non compatible, et non optimisé pour le mobile !

About the author

Kévin JOURDAN

Editeur de site internet, blogger (sur Kjourdan.com), consultant SEO, conférencier & co-fondateur de l'agence de RP Digitale & Netlinking OnAcceleration, Kévin a développé La Markerplace pour réunir investisseurs et vendeurs de business en ligne de qualité. Un endroit de rencontre créé à la hauteur de ses standards et à l'image de la façon dont il aime travailler : efficace, fiable et humain !