Quand le responsive design n'est pas une option : une liste pour optimiser votre site mobile

Kristina Kledzik a récemment écrit un article sur ​​le blog SEOmoz à propos des designs adaptés ou responsive design, et pourquoi c’est souvent la meilleure option pour créer une expérience en ligne conviviale sur mobile. Elle a abordé les avantages en étudiant les problèmes d'utilisation, le contenu dupliqué, les classements des recherches mobile, et le renforcement des liens. Google recommande d'utiliser un design adapté pour les sites Web lorsque cela a du sens du point de vue de l’utilisateur. Bing encourage, quant à lui, une approche avec «une URL par élément de contenu ».

 

Kristina a donné des arguments formidables en faveur d’un site responsive design. Cependant, ces sites responsive peuvent parfois être difficile à développer, surtout si la version principale a beaucoup de contenu et/ou des options de navigation. Si vous avez une entreprise ou un client dont le site présente des centaines de milliers, voire des millions de pages, il peut être difficile de repenser l'ensemble du site avec un responsive design. Un site mobile spécifique, cependant, peut commencer avec moins de pages. Vous pourrez en ajouter d'autres lorsque vous aurez le temps. Pour certaines entreprises, un site responsive design n’est tout simplement pas la meilleure option. Les besoins de leurs visiteurs mobiles sont très différents des utilisateurs de bureau, et attendent donc un contenu radicalement différent. Nous ne pouvons donc pas toujours suivre les conseils militant pour une solution "responsive".

 

Aleyda Solis a récemment créé cet organigramme pour illustrer le processus de prise de décision vis-à-vis du choix d'une option adaptée aux mobiles. Ci-dessous, j'ai mis en évidence les "versions avec URL séparées", que Aleyda recommande lorsque «vous ne pouvez pas créer» une URL unique/un design adapté.

 

  

 

Si votre site (ou celui de votre client) est dans la catégorie des "versions avec URL séparées", vous avez fait le bon choix. Parmi les 20 plus gros distributeurs au Royaume-Uni, seuls 14 disposent de sites avec une version mobile, et 13 d'entre eux ont des sites mobiles séparés. Ce schéma est similaire aux États-Unis. MongooseMetrics rapporte que 73% des sites web classés dans les Top 100.000 Quantcast, utilisent des URL redirigeant vers une URL mobile spécifique.

Voici quelques exemples d'approches des principaux distributeurs vis-à-vis d’une version mobile:

 

 

 

Apple ne dispose d’aucun site mobile; Ebay utilise une version mobile de son site avec des URLs séparées; Currys utilise un site Responsive Design.

La bonne nouvelle est que les sites mobiles, lorsqu'ils sont réalisés correctement, sont capables de gérer les mêmes problèmatiques de facilité d'utilisation, de duplication de contenu, de classement sur les recherches mobiles, et de création de liens.

 

Comment optimisez-vous un site mobile tout en mettant en place un design adapté ? Vous devez vous poser quelques questions avant de prendre votre décision finale.

 

Architecture de l’Information

 

Lorsque vous êtes débutant, la première chose à laquelle vous devez penser est l'architecture de l'information. L'un des avantages d'un site mobile (avec un design purement adapté) est que vous pouvez offrir à l'utilisateur une expérience radicalement différente de la version principale. Vous devez tout d'abord vous poser quelques questions:

 

1. Votre site mobile reflète-t-il les intentions de vos utilisateurs mobiles?

 

Lors de la structuration d'un site mobile, une des premières choses à se demander est de savoir si les visiteurs mobiles peuvent intéragir avec votre site de manière différente de celle des utilisateurs de bureau. Si c'est le cas, le design de votre site mobile doit refléter cette réalité.

Si vous n'êtes pas sûr de savoir comment vos utilisateurs interagissent avec votre site, jeter un oeil à votre analyse et déterminer ​​le trafic mobile. Google Analytics dispose déjà de «mesures avancées» pour le trafic mobile et tablette. Le segment mobile comprend le trafic via tablettes, c’est pourquoi vous devrez peut-être créer un outil de mesure personnalisé afin d'afficher uniquement le trafic mobile hors-tablettes.

 

Cela peut être un peu délicat, car vous aurez besoin d'utiliser une expression régulière (‘RegEx’). La configuration que j'utilise est la suivante:

  • Nom: ‘Mobile - no tablets
  • Inclus: ‘Mobile (Including Tablet)’ containing ‘Yes’ AND

Exclus: ‘Screen Resolution’ Matching RegExp (1\d|[7-9])\d\d+x.*

 

 

Cette expression régulière signifie que ce segment personnalisé doit inclure le trafic venant d'appareils mobiles, mais exclure le trafic provenant d’appareils avec une résolution d'écran de 700px+. Vous pouvez décider de modifier la RegEx en fonction de la taille (grande ou petite) de appareil que vous souhaitez inclure dans l'analyse.

(Certains téléphones plus grands sont inclus dans cette fourchette), mais de la même manière, peut-être que ces derniers peuvent afficher la version de bureau.)

Une fois que vous avez les données, mettez l'accent sur ​​les pages d’arrivée (les gens entrent-ils sur votre site sur la bonne page?), le taux de conversion, et où les gens quittent-ils l'entonnoir de conversion (où sont-ils restés coincés?); le taux de rebond (les gens ne trouvent-ils recherchent?); et, si possible, les moteurs de recherche et les mots clés de recherches organiques (Que recherchent les visiteurs en premier lieu?). Si vous avez installé Analytics sur votre site mobile, vous devez utiliser ces données afin de voir quelles sont les pages du site mobile donnant des résultats supérieurs ou inférieurs à la moyenne. Pour un aperçu détaillé de ce qu'il faut rechercher, voir la section 3.1: Vos Utilisateurs Mobiles dans cet excellent article de Aleyda Solis.

 

2. Avez-vous conçu votre site pour l'utilisateur?

Une fois que vous avez compris les objectifs de vos utilisateurs, vous devez concevoir votre site afin de refléter les raisons les plus communes pour la visite du site sur un appareil mobile. Un exemple évident à cela est d'utiliser un téléphone mobile pour trouver un magasin près de chez vous. Cette fonction peut-être moins visible sur le site de bureau, mais pour un utilisateur mobile, cette information se doit d’être très facile à trouver sur la page d'accueil.

Vous pouvez également profiter des fonctionnalités spécifiques de la téléphonie mobile pour améliorer l'expérience utilisateur. En utilisant le même exemple, vous pourriez ajouter une option de recherche de magasin par code postal, mais aussi par géolocalisation ("utiliser l'emplacement actuel"). Lorsque s'affichent les résultats pour les «magasins le plus proches», ajoutez un numéro de téléphone en click-to-call.

 

 

(Capture d’écran de m.primelocation.com)

 

3. Qu’en est-il des utilisateurs de tablettes ?

Les recommandations actuelles de Google sont d’envoyer les tablettes sur le site de bureau, plutôt que sur le site mobile. Cela vient des habitudes des utilisateurs de tablettes. Le schéma de recherches actuellement et la taille de l'écran sur une tablette de taille normale comme l'iPad ressemblent plus étroitement à la navigation sur la version principale qu’à la navigation sur Smartphone. En outre, un site qui est agréable à voir sur le navigateur d’un petit smartphone apparaîtra trop grand et relativement granuleux sur l'écran d’une tablette beaucoup plus grande. Testez les capacités de l'écran tactile de votre site principal.

 

On peut envisager faire exception à cette règle si vous voulez offrir une expérience en ligne spécifique pour les tablettes, dans ce cas, vous pourriez décider d'utiliser un sous-domaine tiers (t.domain.com). Comme la taille des tablettes tend à varier, ce conseil pourra changer.

 

Voyons maintenant quelques exemples de domaines spécifiquement crées pour les tablettes:

 

Exemple N°1: Colbert Nation est le site officiel du Comedy Central Show, The Colbert Report.

 

 

Exemple N°2: Mail Tribune est un éditeur de journaux.

 

 

 

Il est important de vous assurer que vos visiteurs mobiles soient dirigés vers la version correcte de votre site web. Mon meilleur conseil est d'utiliser les redirections en fonction de l'agent utilisateur. Si vous n'êtes pas redirigé en fonction de l'agent utilisateur, vous devez configurer les redirections en vous basant sur la détection de l'agent utilisateur. Ainsi, lorsque quelqu'un visite le site principal sur un mobile, il sera redirigé vers la version mobile. Si possible, utilisez des redirections côté serveur (301S ou 302S) plutôt que des redirections Javascript; JS provoquant un décalage dans le temps de chargement (parce que la page doit charger et ensuite analyser le JS). De même, en privilégiant une page avec une redirection Javascript, cette dernière aura moins de chances de se retrouver dans le cache. Assurez-vous également que si quelqu'un sur un PC de bureau clique sur un lien mobile, il sera redirigé vers la version principale.

 

Quelques astuces rapides pour le traitement des redirections vers le site mobile:

 

  • Les directives les plus récentes de Google annoncent qu'une redirection 301 comme un 302 peut être utilisée.
  • Lorsque vous utilisez la détection de l'utilisateur, attention aux compressions.
  • Ne redirigez pas toutes les pages de bureau vers la page d'accueil mobile, préférez une utilisation de la page mobile qui soit complémentaire à la version principale. Si vous n'avez pas de page mobile pertinente, envisager la création d'une page qui explique cela et vous offre la possibilité de visualiser la version principale de la page désirée et/ou d’autres pages sur le site mobile.   
  • Vous devez inclure un lien  "voir la version de bureau" sur votre site mobile (et vice versa). Utiliser les cookies pour vous assurer que si un internaute clique sur cette option, la détection de l'utilisateur soit remplacée et il ne sera pas redirigé à nouveau (à moins qu'il ne choisisse de revenir à la version précédente via l’option "version mobile").
  • Essayer d’utiliser les structures d’URLs ‘réfléchies’ (ainsi www.domain.com/hello redirigera vers m.domain.com/hello, et non pas vers m.domain.com/xi3l3kxd. Il se peut que ce ne soit pas possible, ou créer au moins une relation directe entre les pages de bureau et les pages mobiles.
  • Pour plus d’informations sur les redirections du site mobile, consultez l’article de Cindy Krum expliquant comment ‘Générer proprement des redirections mobiles’.
  • Pour éviter l'apparition de contenu en double, vous devez utiliser un tag mobile spécial rel=’canonical’. Ce point sera traité plus en détail plus tard.

 

Google Analytics

 

Une fois que vous êtes satisfait de la structure de votre site, vous devrez être en mesure de suivre son utilisation. Jeff Tirey de Mongoose Metrics a récemment écrit à propos « des études fantastiques » selon lesquelles 37% des sites web qui a) utilisent Google Analytics, et b) qui possèdent également une version mobile séparée de leur site, la version mobile n'est pas prise en compte! C'est impressionnant. Et c'est aussi très facile à corriger.

1. Votre code de suivi est-il correctement écrit?

Si vous n’avez tout simplement pas déjà ajouté de code de suivi à votre site mobile, faîtes-le immédiatement. Si vous n'êtes pas sûr qu’il faille utiliser ou non une version spéciale non-Javascript, gardez à l'esprit que vous pouvez ignorer l’option spéciale "suivi d'un site mobile". Mais que vous devrez utiliser le même code Javascript que celui que vous avez utilisé sur votre site principal.

L'exception (rare) serait dans le cas où vous avez un trafic anormalement élevé d’utilisateurs sur téléphones (hors smartphones) que vous devez analyser. Les téléphones ne supportent pas Javascript, c’est pourquoi le code de suivi normal ne peut pas enregistrer les visites. Toutefois, cette situation est peu probable, car la plupart des sites ne reçoivent pas beaucoup de trafic venant de ce type de téléphones. Si vous êtes inquiet à ce sujet, vous pouvez consulter les journaux des serveurs du site pour connaitre avec précision les visites des utilisateurs de téléphones portables.

2. Vos données mobile sont-elles enregistrées via votre site principal ?

Vous devez suivre votre site mobile sur la même bande (c.-à-d. en utilisant le numéro de compte UA-XXXXX-Y) que votre site principal. Cela nécessite une simple manipulation du code sur les deux versions afin d'indiquer à Google Analytics que votre site m.domain.com est un sous-domaine de votre site principal. Vous devrez également créer un profil spécial, exclusivement pour le trafic de m.domain.com. Pour en savoir plus, consultez les conseils de Google:

 

SEO Technique

 

1. Avez-vous une sitemap mobile en XML?

Même si vous avez ue sitemap mobile HTML, il est préferable de créer une sitemap XML pour votre site mobile, et de l’envoyer à Google et à Bing. Pour en savoir plus sur la façon de créer une sitemap mobile, consultez ces instructions sur le blog des Outils du Webmaster de Google.

 

2. Comment Google saura qu’il s’agit d’un site mobile et pas d’un contenu dupliqué ?

Pour vous assurer que Google sache que votre site mobile est une entité distincte de votre site principal, il est préférable de créer un tag mobile spécial rel=canonical. Pour lui indiquer que votre site mobile n'est pas seulement un contenu dupliqué, vous pouvez utiliser une version spéciale du tag rel=canonical. Sur la page d’accueil du site, ajouter le tag rel=alternate:

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" >

Ce tag dirigera vers la version mobile.

Sur la page mobile, ajoutez également le tag rel=canonical:

<link rel="canonical" href="http://www.example.com/page-1" >

Ce tag dirigera vers la version principale. C’est aussi simple que ça!

 

3. Vérifiez que vous n'êtes pas bloqué par le ‘Smartphone-Googlebot’ de votre version principale dans robots.txt, et ne bloquez pas non plus le Googlebot classique sur votre version mobile.

Bing est un peu plus ambiguë dans les conseils qu'il donne (Mars 2012):

" Parfois, il peut être judicieux de créer quelques URLs afin de cibler des clients particuliers (par exemple les appareils mobiles), que vous pourrez choisir de nous bloquer via les méthodes habituelles (robots.txt, outils webmaster) ou pas." (Le « ou pas » est de moi.)

Dans la mesure où ces conseils ne sont pas clairs, je vous recommande l'approche moins drastique: Mon conseil est d’autoriser Bing à analyser vos sites mobiles et principaux. Vous pouvez choisir de suivre mon conseil...ou pas.

 

Optimisation Sur la page

 

1. Les balises Meta sont-elles adaptées aux mobiles?

Etant donné que les écrans des mobiles sont plus petits, il y a moins de caractères affichés dans les classements sur les moteurs de recherches mobiles. Pour s'adapter à la taille d'écran, il est important que vos balises Méta soient formatées dans un style adapté aux mobiles.  

Pour obtenir de meilleurs résultats, vos balises de titre devront faire entre 40-60 caractères. De même, les descriptions de métadonnées devront faire moins de 90 caractères.

 

2. Avez-vous des mots clés qui ciblent les utilisateurs mobiles?

Il devient de plus en plus important de faire vos recherches de mots clés spécialement pour le trafic mobile. Les visiteurs mobiles seront probablement à la recherche de résultats différents que ceux proposés aux visiteurs se connectant depuis un ordinateur. Il est donc intéressant de faire les recherches appropriées et d'y remédier.

Optimiser le contenu de votre site mobile pour les mots clés mobiles est également un excellent moyen d'être bien classé dans les classements sur les moteurs de recherches mobiles (ce qui peut (ou ne pas) être nécessaire, selon qu'ils sont différents de votre site principal).

 

3. Le temps de chargement de votre site est-il trop lent?

Le temps de chargement de votre site web doit être de 2-3 secondes. Après avoir attendu le chargement d’un site pendant 5 secondes, 74% des utilisateurs de mobile rafraichissent.

Vous pouvez vérifier le temps de chargement de vos pages dans Google Analytics. Utilisez votre profil de site mobile (souvent le temps de chargement de la version principale est très différente, ce qui biaisera la moyenne). Si vous n'avez pas encore de données pour un profil de site mobile séparé, vous pouvez également vérifier cela en utilisant votre mesures personnalisées pour appareils mobiles hors tablettes.

Une autre façon d'augmenter la vitesse de chargement de votre site est de compresser les images de grande taille. N'oubliez pas de vérifier d'autres éléments sur la page, comme Javascript et les vidéos, avec un émulateur de mobile comme Le Gomomètre de Google. Rappelez-vous que certains formats, comme Flash, ne sont pas affichés sur la plupart des téléphones mobiles. N'oubliez pas non plus d'être prudent avec Javascript afin de pouvoir utiliser une approche correcte pour le design.

 

Conseils Supplémentaires 

Je vais donner quelques conseils supplémentaires à ceux d'entre vous qui en sont arrivés là. Continuez à lire...

1. Avez-vous oublié quelque chose pour augmenter facilement vos gains sur votre site d'eCommerce (si c’est votre cas)?

Pour vous assurer l'optimisation de votre taux de conversion, voici quelques points qui pourraient être utiles:

  • S'assurer que les paniers d’achats de votre site se synchronisent sur toutes les plateformes.
  • Placez des boutons plus gros afin que les visiteurs n'aient pas de problèmes pour cliquer sur le bon bouton sur leur téléphone.
  • Proposer une option "trouver un magasin".
  • Utiliser une option click-to-call pour les numéros de téléphone figurant sur ​​votre site.
  • Vérifiez que vous proposer une finalisation de commande facile, en 1-click si possible pour que vos clients aillent jusqu’au bout du processus d’achat  
  •                        

2. Utilisez-vous un balisage structuré des données lorsque c’est nécessaire?

Lorsque c’est justifié, utilisez un balisage approprié sur votre version principal et sur vos sites mobiles. Cela devrait permettre aux parties les importantes d'apparaître dans les résultats des moteurs de recherche mobiles.

 

3. Votre site mobile est-il optimisé pour la recherche locale?

Environ 40% de la recherche mobile attend une réponse locale. Il existe deux méthodes pour en tirer parti:

 

4. Votre contenu vidéo est-il optimisé pour l'affichage mobile?

Les vidéos sont l'une des recherches les plus habituelles sur appareil mobile. Pour rendre le processus aussi facile que possible, veuillez à appliquer les points suivants:

 

Eh bien on y est arrivé les gars! Espérons que cette liste sera utile à ceux qui veulent optimiser leur site mobile.

Avez-vous trouvé ces informations utiles? Quels expériences avez-vous dans ce domaine? Quels autres conseils et outils ajouteriez-vous à cette liste? Partagez votre avis dans les commentaires ci-dessous!

A propos de bridget.randolph — Bridget Randolph est Analyste SEO de l’agence de marketing en ligne Distilled. Elle s'intéresse particulièrement à la façon dont les développements des technologies mobiles et les médias sociaux affectent notre expérience en ligne, et comment ces changements influent sur la nature du marketing numérique.

Cet article a été traduit par Vaisonet, source Seomoz : When Responsive Design is Not an Option: a Checklist for Optimizing Your Mobile Site.

Crédit photo : By Mungous (Own work) [CC-BY-SA-3.0], via Wikimedia Commons

 

Commentaires

C'est vrai qu'une version mobile est parfois plus pratique d'une version responsive : par exemple Google propose des versions mobiles (recherche, agenda, etc ...) alors que dans ses guidelines il conseille de faire du site responsive !

Ajouter une réponse