Aide-mémoire pour la conception mobile : conception réactive, service dynamique et sites mobiles

Mise à jour de l'éditeur (juillet 2015) : en avril 2015, Google a annoncé à l'avance une mise à jour de l'algorithme qui classe les résultats de recherche mobile. La convivialité mobile d'un site Web est un signal de classement confirmé pour les classements de recherche mobile. Prenez note et rendez votre site Web convivial pour les mobiles à l'aide de l'article suivant.

Nous avons tous entendu les statistiques : 2014 est l'année où plus de personnes accèdent à Internet sur un smartphone que sur un ordinateur ou un ordinateur portable. La conception mobile est l'avenir. Vous ne voulez pas que votre site soit laissé pour compte, mais comment programmez-vous exactement cet Internet de plus en plus mobile ? Il existe trois options principales, chacune avec ses propres avantages et inconvénients. Dans cet article, je décomposerai vos options de préparation mobile, en vous donnant les avantages et les inconvénients de chacune pour vous aider à choisir la meilleure voie à suivre pour votre site Web et votre stratégie de référencement.

Option 1 : Conception réactive

La conception réactive détermine la résolution de l'écran sur lequel une page est affichée à l'aide de requêtes multimédias, puis ajuste la taille et la disposition de la page de manière appropriée. Google a déclaré qu'il préférait la conception Web réactive, ce qui en fait le poids lourd de cette discussion.

Avantages :

1. Il n'y a qu'une seule version de chaque page. La même page s'adapte au type d'appareil qui l'affiche (plutôt que de détecter le type d'appareil et de proposer ensuite un contenu différent en fonction de celui-ci). Avoir le même code HTML et URL sur tous les appareils simplifie la maintenance de votre site.
2. La conception réactive ne repose pas sur la détection de l'agent utilisateur, contrairement aux deux autres options. La détection de l'agent utilisateur (c'est-à-dire la détection du navigateur ou de l'appareil qui demande une page Web) n'est pas mauvaise en soi, mais elle n'est pas parfaite, et s'il y a un problème dans le processus, les utilisateurs peuvent recevoir la mauvaise version de votre site. De plus, cela évite aux robots des moteurs de recherche d'avoir à explorer votre site en tant que plusieurs agents utilisateurs différents, ce qui signifie qu'une plus grande partie de votre site est explorée.
3. Le responsive se charge généralement plus rapidement dans les navigateurs. Étant donné que tous les appareils obtiennent le même contenu, il n'y a pas de processus de redirection possible de détection d'agent d'utilisateur de demande. Et tous ceux qui ont déjà eu faim et cherché un bon restaurant sur leur smartphone le savent, la vitesse compte.

Les inconvénients:

1. La refonte d'un site existant peut être un processus long et intensif. Donc, si vous avez un gros site, passer à responsive n'est peut-être pas le meilleur choix.
2. Selon la disposition de votre site, il peut être tout simplement trop difficile d'entasser le contenu sur un écran mobile. Des sites comme NYTimes.com maintiennent des sites mobiles distincts car il est plus facile de décomposer le contenu que de le mettre sur une seule page.
3. Les éléments de navigation ne sont pas toujours bien redimensionnés ; les éléments de survol ne fonctionnent pas du tout sur un écran tactile. Donc, devenir réactif peut signifier changer votre navigation.
4. Il y a eu des cas où des pages réactives avec beaucoup d'images se sont chargées plus lentement avec un design réactif. Je dois souligner que ce n'est pas la norme, mais c'est arrivé.

Si vous optez pour une conception réactive, gardez à l'esprit que vous souhaiterez optimiser vos images et tester votre site sur différents navigateurs et appareils (ou utiliser un bon émulateur d'agent utilisateur) avant de le mettre en ligne.

Option 2 : diffusion dynamique

Parfois appelé "sniffing" de l'agent utilisateur, le service dynamique peut être effectué de deux manières et est difficile à mettre en œuvre. En fait, Google décrit certaines erreurs courantes commises avec la diffusion dynamique. Cette technique détecte l'agent utilisateur d'un visiteur (c'est-à-dire quel appareil il utilise pour afficher votre site), puis le redirige au niveau du serveur . Une façon de mettre en œuvre la diffusion dynamique est la redirection unidirectionnelle , dans laquelle les liens vers un site renvoient par défaut au site pour ordinateur, mais les appareils mobiles sont redirigés du site pour ordinateur vers le site mobile.

Le deuxième type, la redirection bidirectionnelle , contient du code sur les sites de bureau et mobiles, garantissant que tout visiteur, quel que soit son appareil, reçoit le contenu approprié. (Ces morceaux de code sont parfois appelés balises de tableau de bord.) La mise en œuvre consiste à placer une balise rel = "alternate" sur le bureau, pointant vers le site mobile ; et, sur le site mobile, en mettant une balise rel="canonical" pointant vers le site desktop.

Avantages:

1. Comme la redirection se fait au niveau du serveur, vous n'avez besoin que d'une URL par page.
2. La diffusion dynamique fonctionne également bien pour les téléphones polyvalents . Tel que défini par PCMag.com, un téléphone polyvalent est un "téléphone portable qui contient un ensemble fixe de fonctions au-delà des appels vocaux et de la messagerie texte, mais qui n'est pas aussi étendu qu'un smartphone". Par exemple, les téléphones polyvalents ne peuvent généralement pas télécharger d'applications, mais disposent généralement d'une certaine capacité de navigation sur le Web. Selon Google, la plus grande différence est que les téléphones polyvalents ne peuvent pas traiter le CSS, ils ne peuvent donc pas très bien gérer la conception réactive. Il est donc important de connaître votre public et le type d'appareils mobiles qu'il utilise.
3. Si vous souhaitez disposer d'un ensemble distinct de mots-clés spécifiquement pour vos utilisateurs mobiles, cette option vous permettra de le faire puisque les utilisateurs mobiles et les utilisateurs de bureau voient chacun un code HTML distinct. (Search Engine Land a un excellent article qui traite des mots-clés spécifiques aux mobiles.)

Les inconvénients:

1. La redirection dynamique double le travail de maintenance de votre site car elle configure un site distinct pour les mobiles, avec un ensemble distinct de code HTML indexé nécessitant un projet de référencement distinct.
2. La liste nécessaire des chaînes d'agent utilisateur nécessite également une maintenance constante, car de nouvelles chaînes doivent être ajoutées chaque fois qu'un nouvel appareil mobile est publié.
3. Enfin, gardez à l'esprit que vous devrez utiliser un en-tête "Vary HTTP-User Agents" si votre site diffuse du contenu de manière dynamique. L'en-tête aide le contenu à être servi correctement et aide les moteurs à le mettre correctement en cache. Google a des détails sur la façon d'ajouter cet en-tête.

Option 3 : un site mobile

Cette option, comme son nom l'indique, implique la création d'un domaine distinct spécifiquement pour les utilisateurs mobiles. Les exemples les plus courants sont m.domain.com ou mobile.domain.com . C'est une option populaire pour les grands détaillants; Bridget Randolph souligne que « 73 % des sites Web classés dans le Top 100 000 des sites de Quantcast utilisent des redirections d'URL vers une URL spécifique aux mobiles ». À l'instar de la diffusion dynamique, cette technique consiste à développer du contenu spécifiquement pour les visiteurs utilisant un appareil mobile ; cependant, les URL d'un site mobile distinct sont distinctes, il n'y a donc pas de redirection au niveau du serveur.

Avantages:

1. Pour les sites plus importants avec des centaines de milliers ou des millions de pages, la mise en œuvre d'une conception réactive peut tout simplement représenter trop de travail. Un site mobile vous permet de personnaliser l'expérience de votre utilisateur et de construire lentement une expérience mobile unique.
2. À l'instar de la diffusion dynamique, un site mobile convient mieux aux téléphones polyvalents qu'à la conception réactive. Selon la démographie de votre site, cela peut ne pas être un critère ; mais pour certaines entreprises, c'est une considération importante.

Inconvénients :

1. Votre site mobile ne bénéficiera d'aucun profil de backlink positif que votre site de bureau a créé (sauf si vous implémentez des redirections bidirectionnelles). Donc, si vous cherchez à ce que vos utilisateurs mobiles vous trouvent dans la recherche organique, cela peut être un véritable revers.
2. Votre site mobile nécessitera un travail de référencement supplémentaire. Vous devrez soumettre un sitemap XML distinct à Google et aux outils pour les webmasters Bing. De plus, des écrans plus petits signifient des SERP plus petits, vous devrez donc peut-être modifier vos balises Meta. Les balises Meta spécifiques aux mobiles doivent être plus courtes que celles d'un site de bureau.

Comme vous pouvez le constater, le contenu a été considérablement reformaté et réduit pour le rendre lisible sur un appareil mobile.

En passant au crible toutes ces informations pour faire le bon choix pour votre site, n'oubliez pas de vous demander combien de vos visiteurs utilisent des appareils mobiles pour accéder au site. Vérifiez vos analyses. Si le pourcentage total du trafic mobile est inférieur à 5 %, vous pouvez probablement attendre pour mettre en œuvre la conception mobile. Pour l'instant. Si les prédictions sont correctes, l'utilisation mobile ne fera que continuer à réclamer de plus en plus de trafic Internet.

Pour savoir comment optimiser vos pages pour la vitesse et le référencement mobile, nous vous recommandons de commencer par ces ressources :

• La liste de contrôle tout-en-un pour le référencement et la conception mobiles
• 7 bonnes pratiques de navigation adaptées aux mobiles
• Guide SEO : optimisation du référencement mobile et de l'expérience utilisateur
• Optimisation d'image : la chose n°1 que vous pouvez faire pour améliorer l'expérience utilisateur mobile
• Guide mobile du webmaster par les développeurs Google