Le mobile, je n’oublierai pas

Plusieurs décennies après l’avènement du web survient l’ère des mobiles. Les smartphones et tablettes sont devenus des outils de prédilection pour naviguer sur Internet. Chez soi, en vacances, dans les transports ou ailleurs, jeunes et moins jeunes sont de plus en plus nombreux à effectuer des requêtes à l’aide de leur appareil mobile. L’essor de la recherche vocale ne fait que renforcer le phénomène du mobile SEO.

Face à cette situation, les développeurs et administrateurs n’ont pas le choix : il faut passer au site mobile. Il est possible de créer un nouveau site, mais au cas où vous avez déjà un site actif avec un historique intéressant, il vaut mieux la garder et l’adapter. Dans cet article, nous allons vous exposer les avantages d’un site mobile, au cas où vous n’êtes pas encore convaincu (ou pas conscient ?) de son importance. Vous aurez ensuite droit à un petit tutoriel pour adapter votre site et enfin profiter des retombées de cette modification au niveau SEO et à terme, sur vos ventes.

Définition d’un site mobile

Il s’agit d’un site que l’on peut explorer confortablement à partir d’un appareil mobile, plus particulièrement un smartphone. Les fenêtres du site et son contenu respectent un design spécifique qui optimise leur affichage sur mobile. Il est possible de concevoir un site compatible mobile dès le départ, ou d’adapter un site existant.

Il existe trois méthodes pour créer un site mobile. D’abord, la configuration responsive, recommandée par Google, qui consiste à créer des pages avec un seul HTML et une seule URL pour tous les destinataires (desktop, tablette ou smartphone). Cette méthode a pour objectif de mettre en place un site dit responsive qui soit accessible à partir de tous types de supports. Elle facilite la maintenance du site, mais alourdit les pages, qui deviennent plus lourdes à charger.

La diffusion dynamique permet quant à elle de proposer des versions différentes d’une page (version desktop et mobile) à partir d’une seul URL, l’affichage s’effectue en fonction du type d’appareil détecté. Cette technique permet aussi d’optimiser les pages pour chaque support, mais suppose une maintenance relativement complexe.

Enfin, il est également possible de créer un site mobile via un sous-domaine de votre site web, en mettant en place des URLs distinctes pour ces pages dédiées aux mobiles. Spécifiquement appliqué pour la création de sites mobiles, ce dernier procédé offre une expérience utilisateur optimisée pour ce type d’appareil, mais il multiplie les liens croisés et redirections. En effet, vous êtes obligé de gérer en même temps le site web et le site mobile. C’est également assez préjudiciable pour le SEO.

Si vous avez déjà un site et que vous souhaitez l’adapter facilement aux appareils mobiles, vous n’êtes pas obligé de passer par ces manipulations. Il est possible de redimensionner vos pages avec CSS en utilisant la balise Viewport.

Pourquoi adapter son site au format mobile ?

Tout simplement parce que la moitié des internautes sont des mobinautes ! Autrement dit, la moitié des gens qui naviguent sur la Toile le font à partir d’un appareil mobile. Rien qu’en France, d’après une étude réalisée par SemRush, le nombre d’utilisateurs de mobiles a progressé de 6,7% en 2 ans entre 2015 et 2017, représentant près de 40% des recherches. À l’époque, les recherches sur mobile dépassaient déjà 58% des requêtes aux États-Unis. Concernant les prévisions pour 2019, les navigations sur mobile devraient représenter 54% du trafic sur Internet, soit largement la moitié. D’ici 2021, en suivant la même tendance, le trafic sur mobile dépassera sans doute 60% du trafic mondial.

Ces chiffrent montrent l’usage de plus en plus généralisé du mobile pour accéder à Internet. Créer un site compatible est donc devenu indispensable, car les mobinautes constituent une audience importante. D’ailleurs, face à ce constat, Google lui-même a décidé de privilégier les sites mobile-friendly. Le moteur de recherche favorise désormais les sites accessibles sur mobile, au détriment des sites classiques réservés aux desktop. Grâce à un site compatible, vous allez améliorer votre image auprès de Google, gagner de nouveaux visiteurs, booster votre référencement naturel et à terme, vendre plus. Bref, pour rester dans la course, le site mobile est quasiment obligatoire.

Il est temps de vérifier si votre site est adapté aux mobiles. Pour cela, rendez-vous sur votre compte Google Webmaster Tools où vous pourrez vous soumettre à un test. Si vous êtes déjà mobile friendly, félicitations ! Si ce n’est pas le cas, il faut immédiatement y remédier.

Comment faire ?

Nous avons évoqué plusieurs méthodes pour créer un site responsive SEO ou mobile friendly, mais nous allons développer une seule d’entre elles, à savoir la gestion du format avec CSS. Il s’agit d’une méthode à la fois facile et rapide pour adapter votre site, à l’aide d’une seule balise.

Il suffit de définir la bonne largeur dans votre code HTML afin qu’elle s’adapte à celle de l’appareil de navigation. Pour cela, commencez par fixer l’élément méta Viewport comme ceci :

Dans ce Viewport, nous avons déjà prévu que le format s’adaptera à l’appareil (device-width). Il est déconseillé d’indiquer une valeur à cette largeur, même si c’est possible. En effet, cela rendra l’affichage assez désagréable lorsque l’internaute changera d’orientation (portrait ou paysage). D’ailleurs la taille des écrans des divers appareils est très différente. Par exemple, la largeur maximum d’un smartphone va généralement jusqu’à 480px, celle des tablettes jusqu’à 767px ou 979px…

Vous pourrez constater le changement en utilisant un émulateur. Pour peaufiner le résultat, vous pouvez définir les détails de la feuille de style de l’écran. Vous pourrez modifier la partie « body » :

body {width: auto;margin: 0;padding: 0;}

Pour « width », il est possible de mettre une valeur de 320px, qui représente une taille assez standard. Pour les autres parties problématiques, la taille est susceptible de dépasser 320px. Il est donc plus prudent de prévoir une adaptation comme ceci :

img,table,td,blockquote,code,pre,textarea,input,iframe,object,embed,video {max-width: 100%;}

Vous pouvez aussi définir des configurations détaillées en fonction de l’appareil ciblé : largeur (width min/max), hauteur (height min/max), dimensions de l’appareil (device-width min/max ou device height min/max), l’orientation, la couleur (color min/max), résolution, etc. Bien entendu, il est conseillé de travailler en amont le design du site pour optimiser les résultats.

Par la suite, pensez à également adapter votre contenu pour cibler les recherches vocales, qui progressent avec les recherches sur mobile. Il vous suffit pour cela d’utiliser les bons mots-clés et de privilégier les pages questions/réponses.