Le référencement de la conception de sites web réactifs

Le référencement de la conception de sites web réactifs

Le référencement de la conception de sites web réactifs

Will Critchlow a annoncé en novembre dernier que le blog de Distilled avait été mis à jour avec un nouveau design réactif, mais il m’est apparu récemment que nous ne sommes jamais entrés dans les détails des raisons pour lesquelles un design web réactif est si génial. Le design réactif est un sujet brûlant dans le marketing en ligne depuis quelques mois, mais va-t-il vraiment devenir une norme industrielle ?

Réponse courte : oui.

La conception web réactive signifie que vous n’avez pas de versions distinctes pour les mobiles, les tablettes et les PC : le site s’adapte à l’écran de n’importe quelle taille sur lequel il est affiché. Quel que soit l’appareil utilisé par un visiteur pour accéder à votre site, il verra tout le contenu que vous avez à offrir (plus de versions mobiles de sites à contenu partiel) et il le verra de manière lisible.

Avec une augmentation de 55 % des abonnements aux smartphones rien qu’en 2012, la conception de sites web réactifs est l’avenir du marketing en ligne.

Comment cela fonctionne-t-il ?

Cela semble trop beau pour être vrai, n’est-ce pas ? Tout a commencé avec une théorie assez simple d’Ethan Marcotte dans un article de 2010 intitulé « Responsive Web Design ». Plutôt que de créer une seule page web de 800 pixels de large qui se centre sur l’écran, les pages web réactives sont composées d’éléments dont la taille, la forme et l’emplacement dépendent de la largeur de l’écran du navigateur. Les éléments déterminent la taille de l’écran à l’aide de requêtes de médias CSS.

Commençons par un exemple simple sur une grille, utilisant 9 éléments rectangulaires étiquetés A-I. Sur un petit écran, comme une tablette ou un vieil ordinateur avec moins de pixels, les éléments s’afficheraient dans une grille 3 x 3 :

Lorsque l’écran est plus large, ces éléments peuvent s’étaler :

Lorsque l’écran est plus étroit, ils peuvent s’empiler :

Voici un exemple réel, complexe et, si je puis dire, ingénieux. Le site web de Microsoft utilise ces sections :

Lorsque l’écran devient plus petit, les éléments s’empilent différemment :

Pour un exemple plus interactif, allez sur www.microsoft.com et amusez-vous à changer l’écran du navigateur.

Dans leur conception, Microsoft conserve tous les éléments de la version de bureau de la page pour les afficher sur d’autres appareils. Mais l’une des plus grandes différences entre les sites de bureau et les sites mobiles est que les sites mobiles n’ont tout simplement pas la place ou la mémoire du navigateur pour avoir autant de contenu sur une page. Par exemple, le magazine Smashing se débarrasse des éléments supplémentaires à mesure que la taille de votre écran diminue :

Voici la vue de leur bureau :

La page en taille réelle comporte deux niveaux de navigation sur la gauche, le contenu principal au milieu, et la recherche et les annonces sur la droite. Elle centre le contenu principal au milieu, là où vous regarderez, mais utilise la grande largeur de l’écran du bureau.

Passons maintenant à la vue de la tablette de la taille d’un iPad :

Lorsque l’écran n’a pas autant de place de chaque côté, Smashing Magazine garde les annonces et la recherche à droite, mais il déplace la navigation vers le haut d’une manière intelligente qui est perceptible, mais qui ne prend pas trop de place.

Voici la vue de leur tablette de la taille de Kindle Fire :

Les publicités ont été sacrifiées car l’espace à l’écran devenait trop précieux. La recherche a été déplacée vers le haut, de sorte que le deuxième niveau de navigation a été déplacé sur le côté pour s’assurer que le contenu principal ne commence pas trop bas sur la page.

Et maintenant, sur le mobile :

Sur la vue mobile, les publicités ont toujours disparu, ainsi que les boutons de partage. La navigation est passée d’un élément constant sur la page à un petit menu déroulant en haut de la page. La barre de recherche a été placée dans l’espace disponible une fois que la navigation en haut a disparu.

Comme vous pouvez le voir, une conception web réactive vous donne une quantité incroyable de contrôle. Avec un peu de créativité, un design web réactif peut convertir presque tout ce qui est optimisé pour les PC en ce qui concerne les mobiles, et tout ce qui se trouve entre les deux.

Pourquoi un design réactif est bon pour le référencement

Vous savez donc maintenant que la conception réactive est une idée intelligente qui, si elle est correctement mise en œuvre, permettra de réduire la maintenance du web et la création de contenu. Mais en quoi cela aide-t-il le référencement ?

Utilisabilité

Google veut envoyer des visiteurs sur les sites qu’ils veulent voir. Lorsque les internautes naviguent sur votre site et retournent immédiatement aux pages de résultats des moteurs de recherche, Google note que votre site n’est peut-être pas le meilleur choix pour ce terme de recherche.

Si vous avez un site mobile dont le contenu est moins important ou dont l’apparence est sensiblement différente de celle de votre site habituel, vous risquez de frustrer les visiteurs qui reviennent sur votre site et qui recherchent quelque chose qu’ils ont trouvé dans la version de bureau. Si vous n’avez pas de site mobile du tout, 61 % des visiteurs reviendront sur Google pour trouver un site facilement lisible. Dans tous les cas, votre taux de rebond augmentera et votre classement diminuera. Grâce à une conception web adaptée, les visiteurs obtiendront tout le contenu qu’ils souhaitent, dans un format qu’ils peuvent lire.

Duplication du contenu

Ne vous inquiétez pas, un site mobile avec le même contenu que le site principal ne sera pas touché par Panda. Mais vous aurez toujours le même contenu à deux endroits sur le web, ce qui est gênant pour vous et pourrait amener les visiteurs à la mauvaise version de votre site. Un site web bien conçu signifie que le contenu ne se trouve qu’à un seul endroit sur Internet.

Classement pour les recherches mobiles

Google a déclaré qu’il classait les sites optimisés pour le mobile plus haut dans les recherches mobiles. Google recommande une conception web réactive, ce qui signifie que votre site conçu de manière réactive sera classé aussi bien dans la recherche mobile qu’un site conçu spécifiquement pour le mobile. C’est particulièrement utile pour…

Création de liens

Avec un design web adapté, un lien vers votre site principal est également un lien vers votre site mobile. Les sites mobiles sont encore nouveaux, de sorte que vos concurrents dans le domaine de la recherche mobile auront beaucoup moins de liens retour. Un site web bien conçu aura les mêmes backlinks que votre site d’origine, même s’il est en concurrence pour les visiteurs mobiles. Cela vous donnera un avantage immédiat. Et, à mesure que l’utilisation des téléphones portables augmentera et que les webmasters commenceront à créer des liens vers des sites mobiles, les liens entrants de vos sites mobiles et de vos sites de bureau se combineront pour donner un profil de liens entrants plus fort.

Reconnaissance des premiers utilisateurs

En rendant votre site réactif maintenant, alors que le sujet est brûlant mais largement inutilisé, vous vous ferez remarquer. Voici quelques bons exemples :

http://blogs.adobe.com/digitalmarketing/digital-marketing/mobile/responsive-web-design-and-web-analytics/
http://inspirationfeed.com/inspiration/websites-inspiration/60-examples-of-responsive-website-design/

Benefits of Responsive Web Design: Examples


Et, bien sûr, Microsoft et Smashing Magazine de ce poste.
Résultats

Comme vous pouvez probablement le deviner, si votre site n’était pas encore optimisé pour les tablettes et/ou les téléphones portables, vous constaterez une diminution du taux de rebond de ces appareils. Nous avons vu les effets positifs se répandre sur le site principal également. Sur le site d’un autre distillateur, la mise en place d’une conception web adaptée a permis d’augmenter les visites de plus de 400 % en un mois :

C’est un exemple extrême : le passage à un design web réactif sur le blog de Distiller n’a pas eu le même effet. Cependant, des résultats comme celui-ci montrent que, dans une situation appropriée, une conception web réactive peut donner des résultats étonnants.

Les inconvénients

La conception de sites web réactifs n’est cependant pas le Saint Graal du marketing en ligne ; vous devrez réfléchir à certains inconvénients avant de vous lancer.

Temps de mise en place

Passer à une conception web réactive demandera beaucoup de temps à votre équipe de conception et à votre équipe de développement. Cela prendra probablement plus de temps que la plupart des refontes que vous avez subies, car les deux équipes devront apprendre un concept complètement nouveau avant de pouvoir le mettre en œuvre. Par ailleurs, lorsque d’autres sites commenceront à évoluer vers une conception web réactive, vous aurez une longueur d’avance.

Grandes pages

Si vous avez beaucoup de contenu sur vos pages de bureau, une conception adaptée signifie que tout ce contenu doit être chargé sur des pages mobiles. Pouvez-vous imaginer un pauvre téléphone qui essaie de charger tout cela ?

C’est pourquoi des sites comme NYTimes.com et CNN.com ont des versions mobiles séparées qui n’affichent qu’une petite partie de tous les articles et liens qu’ils ont sur leur version de bureau. Si vous avez un site qui est aussi énorme que cela – et qui est censé être aussi énorme que cela – continuez avec des versions séparées pour les téléphones portables et les ordinateurs de bureau.

L’expérience de l’utilisateur mobile

Comme la conception de sites web réactifs vous confine aux mêmes pages et au même contenu sur les versions mobile et de bureau, elle pourrait limiter vos options pour améliorer l’expérience de l’utilisateur. Bien que j’aie souligné plus tôt que les utilisateurs de mobiles veulent le même contenu que les utilisateurs de bureau, ils effectuent leurs recherches sur un petit écran avec leurs doigts plutôt que sur un grand écran avec une souris et un clavier, de sorte que leur voyage vers ce même contenu sera complètement différent. Si vous avez un site vraiment interactif ou compliqué qui doit avoir des chemins différents vers le contenu, comme Facebook, vous pourriez vouloir garder cette version mobile de votre site afin de pouvoir avoir ce contrôle.

Alors, un design web réactif est-il adapté à votre site ?

Si votre site est trop grand ou trop compliqué et qu’il a besoin d’un site mobile, vous en êtes probablement conscient (et vous avez probablement déjà un site mobile étonnant qu’il ne faut pas gâcher). Mais qu’en est-il si vous n’avez pas de site mobile ou si vous en avez un simple et que vous ne savez pas si le passage à un design web adapté en vaut la peine ? Vous allez faire une petite recherche sur Google Analytics :

Ai-je même besoin d’un site mobile ?

Commencez par consulter le rapport « Mobile Overview », qui est un rapport standard dans la section « Audience » sous le menu déroulant « Mobile ». Si le nombre de visites sur les mobiles et les tablettes est inférieur à 5 % de votre trafic total, vous n’avez probablement pas besoin de vous soucier de créer un site spécifique aux mobiles (pourtant : ce nombre ne fera qu’augmenter).

Si c’est plus que cela, cliquez sur l’ensemble d’objectifs ou sur l’ensemble de mesures du commerce électronique – selon ce que vous utilisez pour suivre les conversions – en haut de la page, sous l’onglet Explorateur :

Vos visites sur ordinateur sont-elles beaucoup plus converties que les visites sur téléphone portable ? Si le taux de conversion mobile est inférieur à la moitié du taux de conversion des visites sur ordinateur, votre site est moins performant que la norme du secteur et vous devez l’optimiser pour les visiteurs mobiles.

Comment mon site mobile se présente-t-il sur leurs écrans ?

Allez dans Rapports standards > Audience > Mobile > Appareils et changez la dimension principale en « Résolution d’écran ». Vous pouvez modifier cette dimension juste au-dessus du tableau, en cliquant sur le menu déroulant « Autre » à droite de la ligne des autres dimensions primaires que vous pourriez utiliser. Essayez les 10 résolutions d’écran les plus courantes utilisées par vos visiteurs. Comment votre site mobile se présente-t-il sur eux ? Utilisez Screenfly pour voir votre site sur différents appareils. Vous pourriez être surpris par le nombre de tablettes ou de gros téléphones qui voient un site trop simplifié et pas très convaincant. Même si votre site mobile a une belle apparence sur 50 % des visites, s’il a une mauvaise apparence sur les 50 % restants, vous devriez envisager un design web adapté.

Mon site mobile donne-t-il aux visiteurs ce qu’ils veulent ?

Regardez le taux de rebond des sites mobiles sous Rapports standards > Mobile > Aperçu. Lorsque les visiteurs atterrissent sur votre site mobile, y a-t-il quelque chose qui les fait partir plus rapidement que sur un bureau ? Le taux de rebond des visiteurs mobiles devrait être à peu près le même que celui des visiteurs de bureau.

Si vous avez le temps, faites un audit complet de référencement mobile pour identifier réellement à quoi doit ressembler la version mobile de votre site. Aleyda Solis a rédigé un excellent guide d’audit mobile sur l’état de la recherche.

Votre meilleure option : évoluer lentement vers un design web réactif

Si vous souhaitez évoluer lentement vers une conception web réactive ou si vous avez déjà un assez bon site mobile, pensez à rendre votre site réactif afin qu’il soit optimisé pour les ordinateurs de bureau et les tablettes, mais pas encore pour les mobiles. La conception sera plus facile, mais vous aurez un premier aperçu de l’aspect technique et vous obtiendrez de meilleures conversions pour les utilisateurs de tablettes (ce pour quoi vous n’avez probablement pas encore optimisé).

Ethan Marcotte explique comment le codage fonctionne dans son article original et les développeurs ont créé des thèmes pour des CMS populaires (pour WordPress, pour Drupal et pour Joomla).

Sachez que l’implémentation technique est assez avancée, et qu’il y a un certain nombre de petites erreurs à éviter :

1. 1. Utiliser des images compressées

Vous avez peut-être de superbes photos qui se chargent bien sur la version de bureau de votre site, mais celles-ci devront être chargées sur les versions mobiles également. 74 % des utilisateurs de téléphones portables quitteront le site après 5 secondes d’attente pour le chargement d’une page, alors assurez-vous de compresser vos images autant que possible et de les utiliser avec parcimonie. Smush.it est un excellent outil pour compresser des images.

2. Conception pour toutes les tailles d’écran

Beaucoup de concepteurs voudront concevoir pour une taille de téléphone portable, une taille de tablette et une taille de bureau, et se contenteront de créer un design « réactif » qui adapte le site à une mise en page différente pour ces tailles standard. Mais nous avons des téléphones portables petits et grands, des tablettes de la taille de Kindle Fires à 10″ Samsung Galaxy Tabs, et des écrans de bureau de 30″. Un design réactif consiste davantage à redimensionner les éléments d’une page, car vous avez plus de pixels, qu’à encastrer un design dans un autre. Comme le dit le designer Stephen Hay, « Commencez par un petit écran, puis agrandissez jusqu’à ce qu’il ressemble à un petit écran. Il est temps d’insérer un point d’arrêt !

3. Toujours afficher tout le contenu

Il peut sembler écrasant de trouver un moyen de faire tenir tout le contenu de la version de bureau d’une page sur une version mobile d’une page, mais c’est le but des conceptions web réactives. Dans les exemples décrits ci-dessus, les seuls contenus qui disparaissent sont les publicités (que les utilisateurs ne voulaient probablement pas au départ) et une partie de la navigation (qui est remplacée par une version plus simple de la navigation). Aucun contenu réel n’est caché. Les visiteurs mobiles veulent autant d’informations et autant d’options que les utilisateurs de bureau, alors ne les privez pas.

4.  Optimiser pour le toucher

Vous n’inclurez probablement pas accidentellement un événement JavaScript onmouseover sur la taille mobile de votre site, mais sachez que les tablettes ne peuvent pas non plus planer avec leur souris, et qu’il se peut que quelqu’un sur un bureau utilise Windows 8 et souhaite utiliser le toucher. La meilleure pratique consiste à rendre votre site entièrement accessible par le toucher, quelle que soit la taille de l’écran.

5.  Test sur tous les navigateurs

Vous vous souvenez du bon vieux temps, lorsque vous vous plaigniez de devoir tester votre site web sur IE et Firefox ? Maintenant, vous avez :

Un bureau :

IE9 pour Windows 7
IE10 pour Windows 8 (qui ne fonctionne pas avec Flash)
Firefox
Chrome
Safari

Table/mobile

Safari
Navigateur Android par défaut
Chrome bêta
Dauphin
Opéra
Firefox

Et ce ne sont que les plus populaires. Vous devrez les tester tous, même à des résolutions d’écran différentes.

Mais ça vaut le coup

Passer à une conception web réactive sera un grand défi, mais avec la façon dont l’industrie évolue, cela vous préparera pour l’avenir et vous donnera une longueur d’avance sur vos concurrents.

L’un d’entre vous a-t-il déjà fait ce changement ? Un conseil pour ceux qui ne l’ont pas fait ?

133
152