[Fiche pratique] Concevoir un site mobile friendly

Un site web pour mobile n'est pas conçu de la même façon qu'un site web traditionnel. En effet, il existe un certain nombre de limitations techniques et de normes à utiliser pour rédiger le contenu destiné aux mobinautes.

1. Optimiser un site mobile

On peut penser qu'il est illusoire de vouloir retranscrire le contenu d'un site web sur un site mobile. En effet, l'interface d'un téléphone mobile est encore spartiate, au vu de la taille de l'écran, et impose des restrictions importantes au niveau du contenu et de sa sophistication. Il faut également bien saisir qu'un mobinaute ne recherchera pas le même type de contenu qu'un internaute?: il sera intéressé par des informations synthétiques et des services pratiques, susceptibles de l'aider ou de le divertir lors d'un déplacement (par exemple, adresses de restaurants, lieux à visiter, actualités du moment, jeux en ligne...). Les principes de rédaction du contenu peuvent donc se résumer ainsi:

- un contenu synthétique;

- -un contenu facilement accessible et une navigation optimisée;

- -des services et des informations adaptés aux ­mobinautes.

Concernant le nom de domaine et les URL, il est en tout cas certain qu'il faut faire très simple: en effet, il est beaucoup plus difficile de saisir une URL sur un mobile que sur un ordinateur et il faudra éviter les URL trop longues, même si elles contiennent des mots-clés pertinents.

À lire aussi: 80% des consommateurs européens utilisent leurs appareils mobiles pour effectuer des achats

2. Pourquoi Google conseille-t-il cette solution?

Le contenu et la popularité sont deux éléments très importants pour le référencement naturel. Quant à l'ergonomie, elle l'est de plus en plus. C'est pour cette raison que Google a indiqué qu'il prenait en compte le temps de chargement. C'est donc tout naturellement que le moteur de recherche fait maintenant la même chose pour les contenus qui s'adaptent à tous les périphériques. Un site qui s'adapte parfaitement au périphérique va, de plus, pouvoir augmenter son taux de transformation, puisque chaque internaute pourra utiliser facilement et sans contraintes le site qu'il visite.

Du point de vue technique, Google a plusieurs bonnes raisons supplémentaires de favoriser les sites ayant adopté un design responsive. La première raison est que cela réduit à néant tout contenu qui aurait été dupliqué entre un site standard et son équivalent mobile. Seul le CSS va modifier l'aspect du site (et éventuellement quelques scripts), mais le contenu et son URL seront identiques, permettant de réduire une partie des problèmes de contenus dupliqués. La deuxième raison est que cela facilite énormément son travail d'indexation. Il s'avère plus rapide et moins coûteux d'indexer une seule URL plutôt que deux. Un site responsive sera, donc, théoriquement plus vite indexé.

Le message de Google est limpide: optez pour le responsive design et bannissez les sites spécifiquement mobiles. Google indique, cependant, que vous pouvez développer et proposer une application mobile en fonction de l'usage et de l'utilité des fonctionnalités que vous voulez offrir aux internautes. En revanche, les sites mobiles dédiés ne sont plus recommandés, tout comme le fait de faire varier sur une même URL le contenu HTML en fonction du périphérique utilisé (dynamic serving).

Piresponsive est un outil en ligne simple et rapide, qui vous montre à quoi ressemble votre site web lorsqu'il s'affiche sur l'écran d'un smartphone, d'une tablette,?etc.

3. Responsive design et SEO:

Les règles à suivre: un responsive design est donc conçu pour s'adapter en fonction de la taille d'affichage du périphérique utilisé. Pour y parvenir, le graphiste et l'intégrateur doivent définir ce que l'on appelle des points de rupture, c'est-à-dire des surfaces en hauteur ou en largeur qui provoquent un changement d'affichage. Par exemple, dès que la fenêtre d'affichage se réduit, on bascule le site sur une colonne plutôt que sur deux.

Mobile first versus desktop first

Vous avez également deux manières de concevoir un site responsive dans votre CSS.

- Le mobile first consiste à créer son design pour un périphérique mobile, puis à ajouter des contenus et à améliorer l'aspect du site au fur et à mesure que la surface disponible s'agrandit. On appelle cela le progressive enhancement (amélioration progressive).

- Le desktop first fait l'inverse: on conçoit son site pour les périphériques de grande taille, puis on réduit et on masque les contenus au fur et à mesure que la surface se réduit avec le CSS. On parle alors de graceful degradation (dégradation gracieuse).

Il est fortement conseillé d'opter pour la méthode du mobile first. Vous vous concentrez ainsi sur le contenu le plus pertinent d'abord (ce qui sera affiché quel que soit le périphérique utilisé), tout en développant un site de base ayant un temps de chargement optimal (par défaut, on ne charge que l'essentiel). C'est ensuite l'amélioration progressive qui va afficher ou modifier l'apparence des contenus secondaires pour les périphériques plus grands. En fait, la réalité est beaucoup plus complexe que cela au niveau des tailles d'affichage, car chaque périphérique fonctionne différemment. Cette explication du responsive design simplifie le fonctionnement pour appréhender son concept. Mais il faut bien comprendre que certains éléments peuvent être bien plus complexes à implanter que prévu.

4. Comment optimiser son responsive design pour le SEO?

On pourrait être tenté de dire que le responsive design n'apporte rien en référencement naturel, pour la simple et bonne raison qu'il s'agit juste d'une modification dynamique de la charte graphique d'un site web. C'est en partie vrai, et également complètement faux. En soi, un site responsive ne va pas changer votre positionnement. Google commence à peine à prendre en compte ce paramètre, et il faudra encore quelques années pour qu'il décide que celui-ci a une réelle importance dans son algorithme (malgré plusieurs annonces pseudo-fracassantes de sa part). Cependant, concevoir un site responsive va vous amener obligatoirement à revoir la structure de vos contenus, en répondant à ces deux questions:

- Quel est mon contenu principal?

- Quel est mon contenu secondaire?

Comme nous venons de le voir, il est recommandé d'avoir un site responsive mobile first. Cette manière de concevoir votre site va justement vous permettre de répondre aux deux questions précédentes: sur cette URL, quel est le contenu crucial à mettre en avant pour l'internaute et, par la même occasion, pour le moteur de recherche?

En plaçant votre contenu principal de manière plus visible et en le mettant en avant quel que soit le périphérique utilisé, vous augmentez les chances que Google le prenne en compte. D'ailleurs, le moteur de recherche utilise déjà l'emplacement des contenus pour pénaliser ou favoriser certains sites, comme en témoigne la problématique des publicités situées au-dessus de la ligne de flottaison.

Vous serez d'ailleurs peut-être amené à scinder des contenus, qui pouvaient "cohabiter" sur un ordinateur, mais plus difficilement sur une tablette ou sur un mobile. Cela vous permettra, au passage, de mieux cibler chaque contenu pour les mots-clés que vous travaillez en référencement.

5. Les effets positifs du responsive design

Indirectement, le responsive design peut avoir un impact important pour le référencement. Au-delà de l'amélioration du taux de transformation de votre site (ventes, prises de contact, abonnements...), vous allez favoriser les interactions avec les internautes. Cette interaction peut permettre de générer des actions qui vont améliorer votre référencement:

- le partage de votre contenu sur les réseaux sociaux;

- le partage de votre contenu par e-mail;

- la création plus spontanée de liens vers votre site?web.

De plus, ces partages se feront exactement sur la bonne URL, alors qu'avant, ils pouvaient s'effectuer pour un même contenu sur des URL différentes (celle du site standard et celle du site mobile). [...] Vous l'aurez compris, un site en responsive design ne va pas améliorer votre référencement naturel, pas plus qu'une optimisation de la vitesse de celui-ci. L'intérêt est surtout d'augmenter ou de favoriser les interactions avec les internautes et, donc, de potentiellement gagner quelques liens et votes sociaux supplémentaires, tout en faisant progresser le taux de transformation de votre site. En préconisant l'utilisation de cette technologie, Google facilite surtout son travail d'indexation, tout en évitant à certains webmasters de commettre des erreurs lors de l'implantation de la version mobile de leur site web.

L'ouvrage

Réussir son référencement web, par Olivier Andrieu, aux éditions Eyrolles.