Obtenez un avantage concurrentiel grâce à votre stratégie digitale...

Appel

Mail

Sms

Homme plongeant dans un smartphone piscine
Numérique

Comment bâtir un site mobile friendly de qualité ?

Thierry Gaillard

Thierry Gaillard – 7 février 2020

La politique mobile first de Google vous contraint à rendre votre site internet mobile friendly. Dans cet article, nous allons vous expliquer de manière simple et claire ce qu'il faut faire pour que votre site soit mobile friendly mais aussi pour qu'il ait une bonne ergonomie mobile.

Trois solutions pour rendre votre site web mobile friendly

Les technologies permettent de faire des choix en matière de développement de sites web mobile friendly. Plusieurs techniques cohabitent :

  • Responsive Web Design : c'est la même url et le même code qui s'affichent quel que soit le type d'appareil utilisé. La technique consiste à ajouter du CSS pour permettre au design de s’adapter automatiquement en fonction de la résolution de l'écran ;
  • Diffusion dynamique : c'est la solution à mi-chemin des deux autres. L'url reste la même mais le code html change en fonction du type d'écran utilisé. On peut donc personnaliser le contenu en fonction du type d'appareil utilisé par l'internaute ;
  • Site web mobile spécifique : cette solution conduit à créer un site web dédié aux mobiles que seuls les mobinautes verront. Généralement, Il est accessible via une url du type m.domaine.com. Le système détecte automatiquement le type de support utilisé par l'internaute et le redirige vers le site mobile.

La solution Responsive Web Design est recommandée par Google. C’est aussi ma préférée car elle possède plusieurs avantages que nous allons voir à présent.

Avantages du Responsive Web Design

Avec l'ajout du code CSS adéquat à travers les Media Queries, vous changerez sans peine la structure de navigation pour l'adapter aux mobiles. Cette solution propose plusieurs avantages :

  • Pas besoin de créer du contenu différent : le même sert sur chaque écran ;
  • L'architecture du site s'adapte à tous types d'écrans, y compris les écrans larges et les futurs écrans qui n'existent pas encore ;
  • Le design et l'image de marque, si importants sur Internet, restent rigoureusement les mêmes sur smartphone et sur ordinateur. Les visiteurs ne sont pas perdus quand ils passent de l'un à l'autre ;
  • Le contenu revient moins cher à fabriquer.

Mais pour cela, il va vous falloir oublier tout ce que vous savez sur l'ergonomie d'un site pour ordinateur !

25 conseils concrets pour bâtir un site mobile friendly

  • Incrustez votre logo en haut, à gauche, et rendez-le cliquable pour retourner à la page d'accueil ;
  • Installez votre moteur de recherche en haut au centre et indiquez-le avec une loupe. Il doit permettre à vos prospects de sélectionner les caractéristiques voulues : taille, couleur, design, fourchette de prix, etc. Il ne doit jamais être caché dans un menu et doit être accessible tout le temps ;
  • Simplifiez au maximum et regroupez votre menu au sein d’une icône Hamburger, largement connue des internautes. Placez-le en haut, plutôt à droite. Le menu doit être court et simple (inspirez-vous de Google…) ;
  • Épurez au maximum l'ergonomie de votre site mobile en le rendant simple d'utilisation, clair et limpide. L'utilisateur doit trouver facilement ce qu’il cherche ;
  • Bannissez les Sliders photos qui distraient vos visiteurs, ralentissent votre site et ne vous feront pas faire une vente supplémentaire  (ceci se révèle aussi vrai sur ordinateur…) ;
  • Privilégiez une navigation verticale et non horizontale ;
  • Limitez la longueur des textes pour aller à l’essentiel dans un langage simple mais exhaustif ;
  • Centrez et mettez en avant votre Call-to-Action pour qu’il soit largement visible ;
  • Rendez facilement accessible votre contenu stratégique ;
  • Conservez sur la version mobile l'intégralité du contenu principal de la page ordinateur, celui qui explique pourquoi les personnes la visite (titre, h1, balisage, texte, section principale). De même, conservez le plus possible la structure des liens pour que Google comprenne le contexte de ces pages dans le site web. Mais supprimez le contenu superflu et modifiez la navigation pour qu'elle soit épurée et minimaliste ;
  • Utilisez de gros boutons, sous forme d’images ou d’icônes, pour rendre les rubriques lisibles et simples à comprendre. Apple recommande une taille minimale de 44 pixels de hauteur et 44 pixels de largeur pour les smartphones ;
  • Utiliser une taille de police d’au moins 14 pixels ;
  • Assurez-vous que le mobinaute puisse appeler votre numéro de téléphone en cliquant dessus et non pas en composant le numéro (une ligne de code à rajouter…) ;
  • Menez rapidement votre prospect vers l’acte d'achat avant qu'il ne change d'avis ;
  • Pré-remplissez les préférences des clients qui ont déjà acheté sur votre site ;
  • Permettez à vos nouveaux clients d'utiliser des applications tierces (Paypal, etc.) ;
  • Prévoyez l’auto-complétion pour remplir les formulaires ;
  • Installez un clavier numérique sous forme de pop-up pour saisir les chiffres ;
  • Proposez un calendrier visuel pour sélectionner les dates ;
  • N'imposez aucune inscription préalable pour naviguer sur votre site internet ni même pour acheter l'un de vos produits. Tout doit être accessible rapidement (pensez au one-click d'Amazon...) pour que le client cède à un achat d’impulsion ;
  • Permettez à vos clients de se connecter à vos services (émail, etc.) avec des APIs tierces (Twitter, Facebook, etc.) ;
  • Compressez au maximum les photos et limitez-en le nombre à l’essentiel car la qualité principale d’un site mobile est la rapidité. Toujours pour cette raison, demandez à votre développeur de minifier au maximum le code HTML, CSS JAVASCRIPT, etc. La vitesse est fondamentale non seulement pour le référencement mais surtout pour vos utilisateurs. Un site mobile lent est impitoyablement éliminé par les internautes, quelles que soient sa beauté, ses qualités fonctionnelles ou la performance de ses produits ;
  • Faites inclure dans le contrat de développement du site une clause prévoyant de pouvoir tester un certain nombre de fois l’emplacement des différents éléments avant de valider la version finale. Il est très important de pouvoir tester les choses sur une durée relativement longue avant d’en tirer des conclusions définitives ;
  • Ne partez pas du site ordinateur pour construire votre site mobile friendly. Faites l’inverse !
  • Ne cherchez pas à faire original ou beau. Le mobinaute ne vous accordera que quelques secondes d’attention au cours desquelles il doit trouver ce qu’il cherche sous peine de quitter votre site à tout jamais ! L’aspect esthétique de votre site mobile, même s’il ne doit pas être totalement éludé, ne doit pas être votre priorité.

Ayez à l’esprit que votre site mobile va devenir votre canal principal de trafic et de ventes dans les prochains mois. Privilégiez la simplicité des fonctionnalités et la vitesse d’affichage plutôt que la beauté (subjective de toute façon), même s’il est plus gratifiant d’avoir un « beau » site. Et surtout ne croyez personne ! Faites vos propres tests. C’est le plus important de tous les conseils que je puisse vous donner...

Ressources mobile friendly

Thierry Gaillard

À propos de l’auteur : Thierry Gaillard

Après plusieurs années à manager des équipes dans le tourisme et à développer des sites web, j'aide désormais les PME/ETI à obtenir un avantage concurrentiel significatif en utilisant les techniques numériques et la stratégie d'entreprise, mais surtout en faisant émerger les talents et les points forts que possède toute entreprise...