Responsive Web Design

Le Responsive Web Design (RWD) est une configuration dans laquelle le serveur envoie le même code HTML à tous les appareils. Le langage CSS est utilisé pour adapter l'affichage de la page à l'appareil. Nos algorithmes détectent automatiquement cette configuration si tous les user-agents Googlebot sont autorisés à explorer la page et ses éléments (fichiers CSS, JavaScript et image).

Sur tous les appareils, le responsive design affiche un même code qui s'adapte à la taille de l'écran.

TL;DR

  • Utilisez la balise meta name="viewport" pour indiquer au navigateur la façon d'adapter le contenu.
  • Consultez notre site "Web Fundamentals" (Principes fondamentaux du Web – en anglais) pour en savoir plus.

Utiliser la balise meta name="viewport"

Pour signaler aux navigateurs que votre page peut s'adapter à tous les appareils, ajoutez une balise Meta au début du document :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

La balise de la fenêtre d'affichage Meta indique au navigateur comment ajuster les dimensions et l'échelle de la page à la largeur de l'appareil. Si l'élément de la fenêtre d'affichage Meta est absent, les navigateurs mobiles affichent par défaut la page à la taille de l'écran d'ordinateur (environ 980 px, mais cela varie d'un appareil à l'autre). Les navigateurs mobiles essaient ensuite d'améliorer l'affichage du contenu en augmentant les tailles de police et en ajustant le contenu à la taille de l'écran ou en affichant uniquement la partie du contenu qui tient sur l'écran.

Les tailles de police peuvent ainsi être incohérentes. Les mobinautes doivent alors appuyer deux fois sur l'écran ou pincer pour zoomer afin de pouvoir consulter et utiliser le contenu. Lorsqu'une page requiert ce type d'interaction sur un appareil mobile, nous considérons qu'elle n'est pas adaptée aux mobiles.

La page de gauche ne possède pas de fenêtre d'affichage Meta. Le navigateur mobile réagit ainsi comme sur un ordinateur et met la page à l'échelle de l'écran, ce qui rend difficile la lecture du contenu. La page de droite est la même page, mais avec une fenêtre d'affichage spécifiée qui correspond à la largeur de l'appareil. Le navigateur mobile n'effectue pas de mise à l'échelle de la page, et le contenu est lisible.

Pour des images adaptatives, incluez l'élément <picture>.

De manière générale, si votre site fonctionne dans un navigateur récent, tel que Google Chrome ou Apple Mobile Safari, il doit en principe fonctionner avec nos algorithmes.

Pourquoi utiliser un responsive design ?

Nous vous recommandons d'utiliser un Responsive Web Design pour différentes raisons :

  • Il permet aux internautes de partager et de créer plus facilement des liens vers votre contenu avec une URL unique.
  • Il aide nos algorithmes à attribuer avec précision des propriétés d'indexation à la page au lieu de devoir signaler l'existence d'une correspondance entre les pages mobiles et pour ordinateur.
  • Il permet de gagner du temps lors de la gestion de plusieurs pages avec le même contenu.
  • Il diminue le risque de commettre des erreurs fréquentes sur les sites mobiles.
  • Aucune redirection n'est nécessaire pour offrir aux utilisateurs un affichage adapté à leur appareil, ce qui réduit le temps de chargement. De plus, la redirection basée sur les user-agents est sujette à erreur et peut avoir un impact négatif sur l'expérience utilisateur. Pour en savoir plus, consultez la rubrique Pièges lors de la détection des user-agents.
  • Il enregistre les ressources lorsque Googlebot explore votre site. Dans le cas d'un Responsive Web Design, il suffit d'une exploration par un seul user-agent Googlebot pour explorer toutes les versions de votre page, au lieu de plusieurs explorations par différents user-agents. Cette exploration optimisée peut nous permettre indirectement d'indexer une plus grande partie du contenu du site et de l'actualiser correctement.

Si le Responsive Web Design vous intéresse, lisez notre article de blog du Centre pour les webmasters et consultez le site Web Fundamentals (Principes fondamentaux du Web – en anglais).

JavaScript

L'utilisation d'un code JavaScript pour concevoir des sites adaptés aux mobiles demande une attention toute particulière. En effet, il permet de modifier l'affichage et le comportement d'un site en fonction de l'appareil. Le code JavaScript est généralement utilisé pour définir l'annonce ou la résolution d'image à afficher sur la page.

Cette rubrique décrit les différentes méthodes d'utilisation du code JavaScript et leur lien avec nos recommandations relatives au Responsive Web Design.

Configurations courantes

Il existe trois mises en œuvre JavaScript courantes adaptées aux mobiles :

  • Code JavaScript pour sites adaptatifs : dans cette configuration, tous les appareils reçoivent le même contenu HTML, CSS et JavaScript. Lorsque le code JavaScript est exécuté sur l'appareil, l'affichage ou le comportement du site est modifié. Si un site Web requiert un code JavaScript, nous recommandons cette configuration.
  • Détection combinée : dans cette mise en œuvre, le site Web utilise à la fois le code JavaScript et la détection côté serveur des fonctionnalités de l'appareil afin d'adapter le contenu aux différents appareils.
  • Code JavaScript affiché de manière dynamique : dans cette configuration, tous les appareils reçoivent le même code HTML, mais le code JavaScript provient d'une URL qui affiche de manière dynamique différentes versions de ce code en fonction du user-agent de l'appareil.

Étudions chacune de ces configurations en détail.

Code JavaScript pour sites adaptatifs

Dans cette configuration, une URL affiche un même contenu (code HTML, CSS, JavaScript ou fichier image) sur tous les appareils. Ce n'est que lorsque le code JavaScript est exécuté sur l'appareil que l'affichage ou le comportement du site est modifié. Ce fonctionnement est similaire à celui du Responsive Web Design, qui utilise les requêtes média CSS.

Par exemple, une page affiche sur tous les appareils le même code HTML, lequel contient un élément <script>, qui demande une URL externe qui affiche le code JavaScript. Tous les appareils qui demandent l'URL du code JavaScript récupèrent le même code. Lorsqu'il est exécuté, ce code identifie l'appareil et modifie des éléments de la page en conséquence. Il peut ainsi modifier la résolution d'une image ou le code d'une annonce pour l'adapter à un écran de smartphone au lieu d'un écran d'ordinateur.

Cette configuration est très proche du Responsive Web Design, et nos algorithmes peuvent la détecter automatiquement. En outre, elle ne nécessite pas d'en-tête HTTP "Vary", car les URL de la page et ses éléments n'affichent pas de contenu de manière dynamique. C'est pourquoi nous recommandons cette configuration si votre site Web requiert l'utilisation de code JavaScript.

Détection combinée

Dans une configuration de détection combinée, le serveur fonctionne en tandem avec le code JavaScript client afin de détecter les fonctionnalités de l'appareil et d'adapter le contenu à afficher.

Par exemple, un site peut modifier l'affichage du contenu en fonction du type d'appareil : ordinateur ou smartphone. Dans ce cas, le site Web peut comporter un code JavaScript qui détecte les dimensions de l'écran, lesquelles sont ensuite envoyées au serveur qui met à jour ou modifie le code envoyé à l'appareil. En général, le code JavaScript stocke les fonctionnalités détectées sur l'appareil dans un cookie lu par le serveur au cours des visites suivantes effectuées à partir de ce même appareil.

Étant donné que le serveur affiche un code HTML distinct en fonction du user-agent, la détection combinée est considérée comme une configuration de diffusion dynamique. Vous trouverez des explications complètes dans la section dédiée à l'affichage dynamique. En résumé, le site Web doit comporter l'en-tête de réponse HTTP "Vary: User-agent" lorsqu'une URL qui affiche un contenu HTML distinct en fonction du user-agent est demandée.

Code JavaScript affiché de manière dynamique

Dans cette configuration, tous les appareils reçoivent le même code HTML, lequel contient un élément <script> afin d'inclure un fichier JavaScript externe dont le contenu peut varier selon le user-agent à l'origine de la demande. Cela signifie que le code JavaScript est affiché de manière dynamique.

Nous vous recommandons dans ce cas d'afficher le fichier JavaScript avec l'en-tête HTTP "Vary: User-agent". Cet en-tête indique aux caches Internet et à Googlebot que le code JavaScript peut être différent selon les user-agents. Il permet également d'indiquer à Googlebot que le fichier JavaScript doit être exploré à l'aide de différents user-agents.

Envoyer des commentaires concernant…