Comment adapter son site aux écrans mobiles

Responsive DesignTester et rendre son site "mobile-friendly".

Vous vous posez des questions et/ou souhaitez rendre votre site compatible pour les mobiles.

Depuis le 21 avril 2015 le moteur de recherche Google affiche un label "Site mobile" devant certains résultats de recherche effectués depuis un smartphone. L'objectif de cet affichage est de permettre au visiteur de poursuivre sa consultation dans des conditions acceptables en situation de mobilité.

Ce label est conditionné par quelques règles :

  • Rendre accessibles les fichiers Javascript, CSS ou images ordinairement bloqués pour les robots.
  • Privilégier les standards du HTML5 pour la diffusion des vidéos et autres formats enrichis (Exemple : Les animations Flash ne sont pas toujours lisibles sur certains mobiles).
  • Supprimer les erreurs 404 et problèmes de redirections générés lors d'une utilisation mobile.
  • Utiliser des fonctionnalités d'affichage qui ne bloquent pas la navigation.
  • Garder une continuité dans le mode d'affichage (Dans un site optimisé il y a parfois des liens qui retournent sur une version non optimisée).
  • La page doit répondre à des critères de vitesse d'affichage.

Afin de résoudre point par point ces questions, Google vous propose une aide en ligne :

https://developers.google.com/webmasters/mobile-sites/

Mais comment redéployer rapidement son site au bon format ?

Si vous utilisez un outil de gestion de contenu (CMS).

Une mise à jour ou le branchement d'un plugin peut parfois suffire à rentrer dans les critères imposés.

Certains thèmes "Responsive Design" vous proposent une solution pour adapter votre site a différents types d'affichages (mobile, tablette, ordinateur de bureau, TV...) vérifiez cependant qu'il valident bien les points clés du label de Google.

Bien entendu si vous disposez d'une page Facebook ou d'une site plaquette Blogger (service de Google) votre contenu est déjà compatible. Si vous générez vos pages à partir d'un outil de type Prestashop ou WordPress quelques manipulations seront nécessaires.

Certains outils de gestion de contenu professionnels peuvent nécessiter un travail plus important dans la mise en oeuvre.

Votre site est unique ou distribué par votre prestataire ?

Celui-ci peut faire le point sur les éléments à modifier, effectuer les mises à jour afin d'obtenir la validation. Généralement il a déjà appliqué des modifications sur d'autres sites utilisant sa solution.

Il va réaliser une sauvegarde de vos données afin d'effectuer la mise à jour dans des conditions sécurisées et vous proposer de tester le site en dehors du Web afin de bien vérifier les différents types d'affichage.

S'entourer de professionnels :

Que vous ayez à simplement changer de thème ou à re-développer votre site il est fortement conseillé de demander l'avis d'un prestataire qualifié.

Le label de Google n'est pas une fin en soi.

Cette validation robotisée se base sur plusieurs critères techniques d'accessibilité.

L'ergonomie touche parfois des domaines subjectifs et culturels qui ne sont pas perceptibles par les robots mais impactent fortement vos visiteurs.

Par exemple, l'utilisation de certains menus peut bouleverser les habitudes de vos visiteurs. Avoir le bon conseil au bon moment est important. Les experts vont également procéder à des tests A/B quand l'expérience ne suffit plus et qu'un nouvel usage doit être inventé.

De manière générale votre tableau de bord doit comporter des statistiques précises indiquant le nombre d'utilisateurs mobiles et tablettes ce qui va vous permettre de fixer des objectifs de progression et détecter les problèmes.

Quelle est la part du trafic mobile pour mon site ?

La courbe d'utilisation de la connexion Internet mobile dépasse déjà celle de l'ordinateur de bureau dans les pays les plus technophiles.
http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/

Plus de la moitié des Français se connectent via leur mobile à Internet.
http://www.himediagroup.com/blog/tag/usages-mobile/

En 2015 si une grande partie des utilisations concerne Facebook et des applications de jeux, vous constaterez cependant dans les statistiques de vos sites commerciaux que les utilisateurs mobiles représentent entre 10% et 30% de vos visiteurs. Cette part ayant tendance à progresser de manière importante chaque mois.

Quels outils pour tester rapidement mon site ?

Le premier outil à privilégier est votre mobile ou votre tablette.

Vérifiez également avec d'autres écrans classiques du marché. Certains sites n'affichent la version mobile qu'en présence d'un mobile, d'autres se basent sur la taille de l'écran. Pour cette raison il est préférable de faire ces tests en situation réelle.

Néanmoins il n'est pas possible de tester de cette manière toutes les configurations...

D'autres tests peuvent également être effectués depuis un ordinateur de bureau.

Un test simple : Vérifiez comment votre site réagit quand vous diminuez la fenêtre de votre navigateur. Un mode Responsive Design aura tendance a effectuer des "points de bascule" en supprimant des colonnes et terminer dans un affichage vertical de type mobile. Entre chaque phase clé vos colonnes peuvent également devenir élastiques et se redimensionner progressivement.

Vous pouvez utiliser un outil en ligne pour vérifier l'affichage : www.responsinator.com.

L'utilisation de "Outil Google pour les webmasters" est généralement privilégié dans le but d'avoir un tableau de bord complet.

Conclusion :

Le surf mobile et tablette devient dominant par rapport aux autres types de connexions, il devient donc indispensable de prévoir cette alternative dans votre stratégie Web.


Marqué dans : , , ,

16 Commentaires »

  1. En tout cas je peux vous dire que c'est pas facile d'adapter son site à une version mobile! Pour ma part, j'ai bien galéré pour mon site. J'ai mis beaucoup de temps à comprendre, j'ai cherché partout sur des forums spécialisés qui m'ont bien aidé! Votre site est bien utile en tout cas, merci!

  2. Google avait annoncé de grands bouleversements dans ses résultats de recherche. En faite il n'y a pas eu tellement de changement.

    Astuce SEO : Si votre site est sous wordpress il existe un plug-in simple et gratuit pour passer votre site en version mobile (WPtouch Mobile Plugin)

    • Merci pour vos précisions.
      Il est vrai que pour le moment on ne voit pas de réel point de rupture entre les sites qui ont le label et ceux qui ne l'ont pas. Néanmoins il faudra analyser cette montée en charge sur une année pour en tirer des conclusions.

      Le plug-in que vous citez est effectivement une bonne alternative pour équiper rapidement son blog, nous l'utilisons également.

      Si les effets du label Google restent à étudier, il est en revanche indispensable pour les sites en création de prévoir un affichage compatible pour les mobiles. En effet le nombre d'utilisateurs de smartphones devient dominant et cette révolution numérique impacte plus le trafic qu'un label ou un bouton.

  3. Merci pour ces infos! officiant sur mon blog grâce à WordPress, ces conseils me seront précieux! 🙂

  4. Bonjour,
    Merci pour cet article, c'est le temps d'avoir un site responsive (adapté au mobile) et surtout après les mises à jour de google qui vont désindexer tout site qui n'est pas compatible au mobile

    • Bonjour et merci pour votre commentaire.
      Je dois cependant préciser que Google ne désindexe pas les sites qui ne sont pas compatibles pour les mobiles. Il faut faire la différence entre l'indexation et la visibilité.
      Votre page peut être indexée (présente parmi de multiples résultats) sans être pour autant mise en valeur (par un label ou une bonne position dans les recherches).

  5. Je vois qu'il y'a toujours des sites web pas responsives dominant les SERP. Moi de même, j'ai eu à rendre responsive tous mes sites, mais pas d'amélioration coté moteur, mais c'est vrai coté user expérience, c'est une très bonne chose.

  6. Bonjour,

    j'ai créé il y a environ un an mon site de dj oriental et j'avais remarqué justement ce petit signalement sur les résultats du moteur Google "Site mobile" que je n'avais malheureusement pas. Finalement, j'ai décidé de m'y mettre et j'ai fini par choisir un thème bootstrap qui permet d'adapter mon site directement avec les tablettes et mobiles. Du coup, j'ai augmenté sur pas mal de positions sur différents requêtes sur mobile grâce à ce changement, n'hésitez pas à le faire le bien de l'utilisateur, avant Google ! 😉

  7. Suite au passage d'un thème wordpress compatible, aucun résultat des les serps et toujours des sites non compatibles lors de recherche sur un téléphone ou une tablette. Ou sont les gros changements ? Merci google ....

    • Bonjour,
      A priori un site plus rapide et avec une ergonomie adaptée pour un usage mobile doit permettre de fidéliser des visiteurs.
      Cependant il ne faut pas oublier que la qualité du contenu restera toujours le critère n°1.
      Vous pouvez avoir un site avec une ergonomie déplorable, si le message qui s'y trouve est l'information recherchée par des millions d'utilisateurs, votre site restera dans les premiers résultats et attirera naturellement des liens.

  8. Merci pour ces précieux conseils, j'étais justement en train d'adapter mon site pour le mobile.

  9. Bonjour,
    De ce que je vois il y a effectivement maintenant le libellé sur les sites optimisés ou non mobiles mais il ne semble n'y avoir aucun impact en référencement pur.

    • Bonjour,
      C'est effectivement une notion à part du référencement vu que chaque utilisateur va privilégier de lui même les sites mobiles.
      Néanmoins une fois qu'une habitude est prise cela déclenche d'autres mécanismes comme un nombre de clics important sur un résultat. Un signal positif.

  10. Article très intéressant , c’est un plaisir de vous lire.

  11. Intéressant merci ! La technologie mobile dite du responsive n'est pas encore intégrée par tout les graphistes et intégrateur web, il est important de toujours le préciser lorsque l'on rédige son cahier des charges !

Trackbacks

  1. Comment adapter son site aux écrans mobi...

Laissez votre commentaire


Veuillez noter : les commentaires étant modérés, il peut y avoir un délai dans l'affichage. Il n'y a pas besoin de soumettre à nouveau votre commentaire.

Avant de valider votre commentaire, merci de réaliser ce test anti-robots : * La limite de temps est dépassée, merci de relancer un nouveau test.