Optimiser son site web pour mobile et Google : meilleures pratiques 2017

Alors que nous évoluons dans un monde multi-écran, optimiser son site web pour mobile et le responsive web design s’imposent comme les mots d’ordre de la décennie. Désormais, les utilisateurs s’attendent à être en mesure de :

  • Voir les mêmes contenus, peu importe les appareils qu’ils utilisent.
  • Faire les mêmes choses, que ce soit une recherche d’information, une inscription à une newsletter, une commande sur un e-commerce ou le partage d’un contenu sur les réseaux sociaux.

En 2017 plus que jamais, le web est quelque chose que nous transportons dans nos poches et non quelque chose bloqué dans notre ordinateur ou nos maisons. Il s’agit d’une tendance mondiale qui ne fera que continuer de croître dans les années à venir :

  • Le nombre de visites de sites web provenant d’appareils mobiles a dépassé pour la première fois en 2016 le nombre de visites via ordinateur.
  • 61,4% des Français accède à du contenu en ligne via un appareil mobile.
  • 30% des internautes ont déjà acheté à partir d’une application mobile.
  • Entre 2014 et 2015, le chiffre d’affaires du commerce mobile a augmenté de 75%, tandis que le e-commerce ne croît que de 11%.
  • 48.7% des recherches Google ont été effectuées via un ordinateur en octobre 2016 contre 51,3% pour les appareils mobiles.

L’ascension de l’usage d’Internet via mobile s’accompagne de nouvelles façons d’utiliser les sites web et e-commerce. Il faut donc commencer à en penser différemment l’organisation, les actions ou encore la mise en page.

Exemple site responsive design

Site web mobile du Guardian

responsive web design

Responsive web design Guardian

Les appareils mobiles, smartphones et tablettes, se différencient des ordinateurs de nombreuses façons, notamment :

  • Taille d’écran
  • Puissance de traitement
  • Vitesse de connexion

Ces différentes limitations et capacités justifient des solutions différentes. Il est donc mieux de prendre en compte chacun de ces périphériques dans le code, plutôt que de concevoir uniquement pour l’un d’eux.

 

Optimiser un site web pour mobile

Quand il s’agit de développer et optimiser un site web pour mobile adapté à l’expérience utilisateur la plus satisfaisante possible, quatre solutions sont envisageables :

  • Le responsive design : consiste à commencer par développer un site en « full screen » puis à l’adapter à des résolutions d’écran inférieures. En termes de conception de sites web mobiles, cela signifie qu’un site web complet et standard réduit graduellement le contenu et les fonctionnalités à mesure que la fenêtre devient plus petite et le système plus simple (pas de support Flash, etc.).
  • Le mobile-first : cette tendance peut se définir de plusieurs façons différentes, mais se résume essentiellement au fait de privilégier les besoins des utilisateurs mobiles à ceux des utilisateurs d’ordinateur. Avec le mobile-first, l’expérience utilisateur se construit autour des doigts, et non plus autour de la souris et des clics. Sa conception se résume en deux grandes idées : simplicité (en réduisant le contenu à ses éléments les plus vitaux) et taille (avec une taille d’écran réduite, chaque élément doit être soigneusement considéré). Une conception mobile-first consiste alors à commencer à développer le site web en prenant en compte les contraintes du mobile, puis travailler cette base pour arriver à une version desktop. Au fur et à mesure des besoins, le site peut progressivement être « amélioré » et même complètement repensé pour les plates-formes plus grandes avec moins de contraintes.
  • Un site mobile distinct : parfois appelée M-dot, cette configuration délivre un code HTML différent sur des URL distinctes en fonction du périphérique détecté. Habituellement, cela consiste à disposer du site desktop situé sur le sous-domaine www et les pages du site mobile-friendly situé sur le sous-domaine « m ». Les sites mobile distincts comme « m.simplesite.com » fournissent une expérience de navigation différente pour les utilisateurs sur différents appareils. Toutefois, lorsque l’objectif est la cohérence, il devient aisé de voir pourquoi celle-ci n’est pas la solution idéale.
Site web mobile

Exemple de site web mobile par Amazon

Bien qu’en théorie les sites mobiles se chargent plus rapidement, le temps supplémentaire de redirection de votre site complet vers le M-dot (à moins que l’utilisateur n’en tape directement l’URL) est inutile. Plusieurs sites web pour un seul domaine deviennent coûteux à entretenir et difficiles à mettre à jour. Proposer un site optimisé pour mobile et un autre pour les ordinateurs signifie que vous devez garder deux sites à jour, doublant votre charge de travail. Un site est beaucoup plus facile à gérer que deux. Par ailleurs, les appareils mobiles ne disposent plus d’une taille d’écran unique. Ainsi, ce qui était autrefois la plus grande force des sites M-dot est maintenant sa plus grande faiblesse. Les sites M-dot sont conçus pour une taille d’écran spécifique, mais les appareils mobiles vont de 320 × 240 pour certains smartphones jusqu’à 768 × 1024 (et au-delà) pour les tablettes.

  • Une application mobile : construire une application mobile pour améliorer l’expérience de navigation des visiteurs mobiles peut s’avérer une bonne idée si vous proposez une plateforme sociale ou interactive, ou lorsque votre site est votre produit. Mais si ce n’est pas le cas, aucune raison valable n’implique que le mobinaute se sentira obligé de télécharger votre application à partir d’une app store, de l’installer et l’utiliser juste pour visiter votre site web. Les autres inconvénients des applications résident en leur quantité restreinte de contenu et de fonctionnalité, et aux spécificités de chaque système d’exploitation. Vous devrez très probablement développer à la fois pour Android et iOS.

Après avoir explosé en début d’année 2012, le responsive web design est maintenant fermement établi comme la meilleure façon de créer et optimiser un site web mobile satisfaisant pour l’expérience utilisateur. En donnant aux utilisateurs une qualité uniforme (personne ne veut être un citoyen de seconde zone), il augmente à la fois le trafic, SEO et taux de conversion de votre e-commerce.

 

Le responsive web design, Google et les utilisateurs lui disent merci

Cette approche de conception utilise des grilles fluides, des images flexibles et des règles de style CSS variées pour offrir différentes expériences aux utilisateurs d’ordinateurs, de tablettes et appareils mobiles, tout en maintenant la même structure HTML et URL.

Avec le responsive design, la mise en page du site web mobile se rétrécit ou s’agrandit en fonction de la taille de l’écran utilisé pour le visualiser. En d’autres termes, la conception responsive effectue des ajustements afin qu’une personne regardant un site web sur un appareil mobile soit en mesure de voir le même contenu et de naviguer aussi facilement que les gens qui regardent le site à partir de leur ordinateur de bureau ou portable.

 

Responsive design

 

Le design responsive est construit autour du concept de requêtes de média qui ciblent des périphériques spécifiques et des tailles de fenêtres. Dans cet esprit, vous pouvez coder votre CSS initiale dans une perspective mobile et ensuite utiliser des requêtes de médias pour sélectivement servir du style supplémentaire si la taille de la fenêtre augmente.

 

Site responsive et impact SEO

Le nombre croissant de personnes effectuant des recherches sur Google à partir d’un appareil mobile est une tendance à considérer lors de la planification d’une stratégie SEO pour se positionner devant la concurrence en 2017. Selon les propres statistiques de la firme de Mountain View « plus de recherches Google ont lieu sur des appareils mobiles que sur des ordinateurs dans 10 pays, y compris les États-Unis et le Japon ».

Toutefois, le débat persiste de savoir si un site web mobile distinct ou un seul site responsive est le meilleur itinéraire à prendre. D’un point de vue SEO, le site web responsive est sans équivoque la meilleure option.

En effet, les sites web mobiles distincts possèdent leur propre URL et un code HTML différent de celui de leur homologue desktop. A contrario, les sites responsives utilisent une URL unique ainsi qu’un jeu de pages et de fichiers qui simplifient à Google l’exploration et l’indexation du contenu.

L’un des principaux défis posés par le fait d’avoir un site mobile distinct est la nécessité de construire l’autorité de ce site à partir de zéro. Et la plupart des sites mobiles distincts se positionnent mal dans les moteurs de recherche, étant canonisés à leur homologue desktop.

Au contraire, rendre votre site web responsive permettra de maintenir les backlinks et signifie que vous pouvez concentrer votre SEO sur un seul site. Tous vos liens seront alors dirigés vers un domaine, donnant à votre site web responsive un coup de pouce dans les SERPs.

De plus, si vous disposez d’un site web responsive, vous pouvez partager vos liens avec une URL unique sur les réseaux sociaux.

Pour ces raisons, Google recommande officiellement aux entreprises soucieuses de leur SEO de créer des sites web responsive qui fonctionnent de la même manière sur tous les appareils.

Mais le géant des moteurs de recherche ne préconise pas seulement le responsive web design comme la meilleure façon de cibler les utilisateurs mobiles. Depuis 2015, Google favorise également le positionnement des sites optimisés pour les mobiles dans ses résultats de recherche dédiés.

Cela est particulièrement vrai lorsque les utilisateurs mobiles recherchent des services locaux et, plus récemment, avec la mise en avant dans les résultats de recherche des articles utilisant AMP, le format mobile lancé par Google. Les contenus estampillés AMP s’affichent dans un carrousel imagé particulièrement apparent placé au-dessus des résultats de recherche mobiles traditionnelles.

 

Responsive design et taux de rebond

Un site web responsive aide à combattre un taux de rebond élevé. En effet, même si un site web s’affiche correctement dans les résultats de recherche grâce à de bonnes pratiques SEO, le taux de rebond sera préoccupant s’il ne fonctionne pas efficacement pour les utilisateurs de mobiles et tablettes.

Les sites web mobiles peuvent souffrir d’un taux de rebond élevé si le contenu qu’ils offrent est trop brouillon ou trop dissemblable du contenu offert sur la version desktop du site. Google interprétera ce taux de rebond élevé comme le signe qu’un site web n’offre pas de contenu pertinent aux utilisateurs, ce qui est susceptible de conduire à une baisse de classement.

Heureusement, le site web responsive combat ce problème en présentant le même contenu, mais de manière fonctionnelle. Le responsive web design implique qu’il n’y a aucun besoin de compromis sur le contenu que vous choisissez d’afficher, ce qui garantit aux visiteurs de toujours recevoir les informations qu’ils recherchent – et les maintient sur la page !

 

Le responsive design améliore l’expérience utilisateur

La visualisation d’un site web sur un écran tactile peut s’avérer difficile : elle nécessite souvent le glissement, le défilement et la modification de la taille de la page. Si les visiteurs parcourent un site via leur smartphone ou leur tablette, ils doivent pouvoir afficher l’intégralité du contenu aussi facilement que les utilisateurs d’ordinateur. Avoir un design responsive facilite aux mobinautes la trouvaille et le partage de contenu, ce qui fournit une bonne expérience utilisateur sur mobile.

Les entreprises doivent donc concevoir leur site en responsive pour que les utilisateurs bénéficient d’une expérience de qualité et l’accès à toutes les informations et outils dont ils pourraient avoir besoin, quel que soit le type d’appareil qu’ils utilisent.

Par-dessus tout, le responsive design met l’accent sur l’utilisateur ; et l’expérience utilisateur étant un facteur de classement important, il est logique que Google encourage les développeurs à adopter le responsive design et à optimiser leur site pour mobile.

 

Responsive design et taux de conversion

Avoir un site web responsive vous assure que les visiteurs sont en mesure d’accéder à toutes les informations et les fonctionnalités qu’ils veulent où qu’ils soient, quel que soit le type d’appareil qu’ils utilisent. Cela les encouragera à rester sur le site plus longtemps et potentiellement à convertir.

En ce sens, différents sites e-commerce ont constaté une augmentation considérable du taux de conversion après avoir passé leur e-shop en responsive. Selon un rapport, 62% des entreprises interrogées ont vue leur vente en ligne grimper de 62% après avoir rendu leur e-commerce responsive.

 

Site web et e-commerce responsive : meilleures pratiques

 

Chargement restreint

Il veille à ce que les utilisateurs ne téléchargent pas tout ce qui est responsable du ralentissement du site. La fonction peut être utilisée pour arrêter les aspects de chargement tels que les cartes, les widgets sociaux et bien d’autres choses.

 

Redimensionner les images selon l’écran

L’un des plus gros problèmes avec les pages web et la lenteur de leur chargement sur les sites web responsive sont les images. Les utilisateurs veulent des images de haute résolution, mais il est important que les pages ne soient pas encombrées avec des fichiers d’image trop lourds.

Pour gérer cela, vous pouvez utiliser un script PHP qui détecte la taille de l’écran, puis redimensionne automatiquement, met en cache et sert une version réduite de l’image. Le logiciel peut également être personnalisé, de sorte que vous puissiez définir la qualité des images et la mise en cache du navigateur.

 

Boutons d’appel à l’action

Ils doivent être grands, jusqu’à prendre presque toute la largeur de l’écran mobile. Ainsi, les visiteurs mobiles n’auront pas besoin de zoomer pour se concentrer sur le bouton d’appel à l’action.

Bouton appel action mobile

Bouton d’appel à l’action sur le site mobile Audi

Une idée astucieuse consiste à mettre en œuvre des appels spécifiques aux mobiles sous des informations de contact telles que « Appeler maintenant » ou « Obtenir l’itinéraire ». Les boutons d’appel à l’action mentionnés commenceront un appel téléphonique ou ouvriront une application cartographique, résultant en une expérience de navigation mobile plus ciblée.

 

Exploiter les photos et vidéos

La lecture de texte brut sur un téléphone mobile est fastidieuse et difficile, surtout si l’on considère que la plupart des navigateurs mobiles se déroulent à la volée avec des SMS et des applications interférant. Des photographies et vidéos sont parfaites pour capturer l’attention des visiteurs mobiles et communiquer vos messages marketing.

 

Raccourcir les formulaires

Si les formulaires longs sont déjà des tueurs de conversion sur des sites desktop, ils sont encore pire pour les visiteurs mobiles. Remplir les formulaires avec un smartphone prend du temps et est inconfortable.

Pour stimuler les conversions mobiles, gardez vos formulaires courts. Cinq ou six champs suffiront à l’optimisation de vos visiteurs mobiles. En outre, utilisez des étiquettes alignées verticalement (au sommet) au lieu d’étiquettes alignées à gauche.

Formulaire site mobile

Formulaire sur le site mobile Hertz

 

Onglets

Dans le cadre d’un e-commerce, implémentez du contenu ou des onglets extensibles sur vos pages produits. Ils structureront les informations en fonction des catégories et aideront ainsi les mobinautes à trouver plus rapidement les informations recherchées.

Par exemple, au lieu de faire défiler des pavés de contenu pour trouver des avis sur les produits, les visiteurs mobiles cliqueront simplement sur l’onglet « Avis ».

 

Taille du texte et des appels à l’action

Ironiquement, cela signifie souvent augmenter la taille plutôt que la diminuer. Utilisez l’espace pour guider l’œil et rendre votre contenu plus facile à lire.

 

 

Pour aller plus loin :

  • Google lance un nouvel outil pour calculer le manque à gagner causé par la lenteur de votre e-commerce mobile : disponible ici.
  • Le dernier outil lancé par Google pour tester le niveau d’optimisation de votre site pour mobile : disponible ici.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Rechercher
Bienvenue sur le blog de l’agence Alioze !
Chaque semaine, retrouvez nos articles de conseils & news sur toutes les tendances du web, du e-commerce, du SEO et de la communication.

L’agence Alioze se situe au 40 rue Olivier de Serres, 75015 Paris

hello@alioze.com +33 (0) 1 45 77 75 04
Vous cherchez une agence pour la création de votre site internet ?  Contactez nous