Responsive Web design - site responsive

Avant de développer le sujet de la compatibilité mobile, il est important de noter que le terme « mobile » désigne uniquement les smartphones (type iPhone, Samsung Galaxy...) et non les tablettes (iPad, Surface...).

Notez également que d'un point de vue technique il existe 3 façons possibles pour accueillir les visiteurs provenant du mobile.

Dans cet article nous aborderons les 3 méthodes mais nous nous intéresserons plus particulièrement au Responsive Web design qui a été officiellement recommandé par Google pour une meilleure optimisation du référencement naturel - SEO.

Qu’est ce que le Responsive Web design - site responsive ?

Un site responsive (ou site adaptatif ou site responsive web design ou site RWB) est un site dont les pages s’adaptent automatiquement à n’importe quel taille d’écran (smartphone, tablette, écran d'ordinateur).

Quelle que soit la nature ou la taille d’écran de l’appareil utilisé pour venir sur votre site, les visiteurs auront un confort de lecture et de navigation.

Pourquoi faire un site responsive ?

Pour optimiser son référencement naturel (SEO en anglais), Google recommande officiellement de rendre son site responsive. Depuis la mise à jour du 21 Avril 2015, les sites responsive sont mêmes davantage mis en avant dans les résultats de recherche de Google et attireront donc plus de trafic naturel.

Google s’appuie sur les raisons ci-dessous pour justifier cette mise à jour :

  • Le trafic Web provenant d’appareils mobiles est en pleine croissance.
  • Une large partie de la population est équipée d’un mobile et d’un accès rapide à l’Internet mobile.
  • En même temps la majeure partie des sites web n’est pas optimisée pour les mobiles. Les appareils mobiles sont souvent limités par la taille d’affichage – en comparaison avec les ordinateurs et les tablettes.
  • De récentes études montrent que les mobinautes sont plus susceptibles de revenir sur les sites adaptés aux mobiles

Quels sont les caractéristiques d’un site responsive ?

Avant de parler de l’impact d’un site responsive sur le référencement naturel (SEO), comprenons plus précisément ce qu’est un site responsive

  • La fenêtre d’affichage s’ajuste à la taille de l’appareil utilisé
  • Le contenu proposé remplit automatiquement la fenêtre d’affichage, sans que le mobinaute ait besoin de défiler horizontalement ou agrandir la page.
  • Des tailles de police s’adaptant automatiquement à la taille de l’écran.
  • Les boutons d’actions ou tout autre élément tactiles sont facilement accessibles.

Voici un exemple simplifié d’un site web responsive :

Les schémas ci-dessous sont une version simplifiée de l’affichage des contenus sur un site adaptatif. Il y a évidemment des éléments propres à chaque site avec lesquels il faudra composer : navigation, contenus multimédia, barre de recherche….

  • Affichage simplifié sur un ordinateur :
  • Affichage simplifié sur une tablette :
  • Affichage simplifié sur un mobile :

Impact d’un site responsive sur le référencement naturel – SEO

En plus de réduire les frais de création de contenu et les frais de maintenance liés à gérer un site web et un site mobile distinct, le passage à un site responsive présente également des avantages concrets pour l’amélioration de votre référencement naturel – le SEO sur le mobile.

1. Le confort de navigation (usability) d'un site responsive influence le référencement naturel

Le but de Google est de présenter aux internautes les sites qui répondent à leurs attentes.

En effet, lorsqu’un internaute arrivent sur votre site mais repart aussitôt, sans lire le contenu proposé ou sans visiter d’autres pages du site, Google détecte ce comportement et en déduit que votre site n’est pas pertinent pour la requête recherché.

Si vous votre site mobile présente moins de contenus ou est trop différent de votre site web, vos visiteurs « fidèles » pourraient être frustrés et quitter votre site pour un site concurrent.

Vous perdez alors des visiteurs intéressants, votre taux de rebond se dégrade et à terme vous perdez des positions dans les résultats de recherche de Google.

2. La recherche mobile favorisé par le site responsive

Google a officiellement annoncé que les sites qui ne seraient pas compatible mobile verraient leur référencement naturel se dégrader.

Ne pas apparaître dans les résultats mobiles pourrait baisser votre trafic global, vous faire perdre une partie de vos clients potentiels qui commenceraient leur prospection sur le mobile.

3. Les backlinks mutualisées pour optimiser le SEO mobile.

Si vous avez un site mobile et un site web qui co-existent, alors la grande majorité des backlinks (lien entrants) iraient sur le site web. Votre site mobile pourrait souffrir d’un déficit de popularité ce qui pourrait impacter votre SEO sur le mobile.

Développer un site responsive permettrait de mutualiser tous vos backlinks ce qui servirait pour votre référencement naturel dans les résultats mobile.

4. Prendre de l’avance sur le SEO mobile

Plus de la moitié des sites internet ne sont pas compatible mobile. Proposer un site responsive avant vos concurrents vous donnera plus de chance d'atteindre la première position et de la garder grâce à votre historique.

Quelles sont les façons de proposer un site mobile ?

Il existe 3 méthodes distinctes pour adapter votre site web aux mobiles et le rendre ainsi « mobile friendly ».

Google reconnaît et support les trois méthodes de création de site mobiles mais recommande le site responsive.

1. Responsive web design

Le Responsive Web Design également désigné sous l’acronyme RWD est une configuration dans la quelle votre server envoie le même code HTML à tous les appareils (ordinateurs, tablettes et mobiles). L’adaptation de l’affichage des pages en fonction de l’appareil se fera grâce au langage CSS.

Pour que la configuration du Responsive Web Design soit détecté automatiquement par Google, il faut évidement autoriser les users-agents Googlebot à explorer votre site ainsi que tous les éléments qui le composent (fichiers CSS, javascript et les images).

Cela suppose que les fichiers CSS, javascript et les images ne sont pas interdites au crawling dans le fichier robots.txt

Depuis le 21 avril 2015, cette méthode est recommandée par Google.

2. Dynamic serving (diffusion dynamique)

Le Dynamic servign (en français diffusion dynamique) est une configuration dans laquelle votre server diffuse un code HTML et CSS différent sur la même URL. Cette différence dans l’affiche se définit en fonction du user-agent qui demande à accéder à la page.

Le User Agent est une signature envoyée pour tous les navigateurs (que ce soit sur mobile, tablette ou ordinateur). Cela permet donc de savoir au serveur Web hébergeant le site Internet concerné de renvoyer le contenu approprié.

Si c’est un user agent pour ordinateur qui vient explorer votre site, la version mobile sera alors masquée.

L’affichage étant dynamique, les user-agents ne peuvent pas savoir à l’avance que le site adapte le code HTML par rapport à leurs requêtes.

Si vous optez pour cette méthode, Google recommande (pour faciliter sa compréhension) de configurer le server afin qu’il envoie une indication claire au user-agent smartphone afin que ce dernier explore efficacement le contenu mobile.

Utilisez l’entête HTTP « Vary » pour signaler vos modification en fonction du user agent.

3. Utilisation d’URLs distinctes pour le site mobile.

Dans cette configuration, chaque URL du site (exemple www.monsite.com ) consultable via un ordinateur possède une URL équivalente (m. monsite.com) qui permet d’afficher du contenu optimisé pour les mobiles.

Comment rendre mon site Mobile Friendly ?

Si vous avez conçu votre site internet avec un CMS (systeme de gestion de contenu) et que vous savez avec quel logiciel votre site web a été conçu, alors consultez les conseils que Google donne :

Quelles sont les erreurs à éviter ?

Pour proposer un site mobile-friendly et améliorer ainsi le référencement naturel de votre site dans les résultats de recherche mobile, voici les erreurs à éviter :

1. Fichiers JavaScript, les CSS et les images bloquées par le fichier robots.txt.

Assurez-vous que les fichiers JavaScript, les CSS et les images constituant votre site sont accessible par Google Bot.

Si votre fichier robots.txt empêche Googlebot d’explorer les fichiers JavaScript, les CSS et les images, cela nuira à l’exploration et l’indexation de votre contenu dans les résultats de recherche mobiles.

2. Des contenus inaccessibles via les appareils mobiles

Certains type de vidéos ou les animations Flash ne peuvent être lus sur les appareils mobiles. Pour garantir une accessibilité totale des contenus proposés sur votre site préférer utiliser les balises HTML 5.

3. Des redirections incorrectes

Si vous avez préféré utiliser des URLs distinctes pour la version mobile de votre site, alors assurez-vous de la correspondance parfaite entre les urls web et les urls mobiles.

La page web A doit rediriger vers la page mobile A.

4. Génération d’erreurs 404 uniquement sur les mobiles

Si vous détectez qu’un visiteur accède à une page pour ordinateur depuis un appareil mobile, si vous avez l’équivalent sur une url mobile dédiée, alors redirigez automatiquement l’internaute vers cette dernière.

Assurez-vous que la page mobile propose bien le contenu recherché par le visiteur.

5. Chargement lent sur les mobiles

Le temps de chargement est un critère important pour le référencement naturel d’un site internet.

Ce critère est d’autant plus important sur le mobile où les internautes sont en déplacement et n’ont pas toujours la même qualité de connexion sur leur mobile que chez eux.

Pour vérifier le temps de chargement de vos pages : Page Speed