Comment créer un site internet adapté au mobile pour votre entreprise

La plupart des personnes qui trouvent votre entreprise tiennent un téléphone quand elles le font. Elles sont debout dans une allée en regardant un chauffe-eau qui fuit, assises dans une voiture devant un concurrent, ou allongées sur le canapé à 21 h en décidant qui appeler le lendemain matin. Si votre site internet est difficile à lire, lent à charger, ou pénible à utiliser sur un petit écran, elles rebondissent et appellent le prochain nom sur la liste. Apprendre à créer un site internet adapté au mobile n'est plus un simple confort technique. C'est la différence entre recevoir l'appel et le perdre.

La bonne nouvelle : vous n'avez pas besoin d'être développeur, et vous n'avez pas besoin de construire un « site mobile » séparé. Ce guide vous explique ce que « adapté au mobile » signifie vraiment, les éléments spécifiques qui se brisent sur les téléphones, et comment les corriger en un après-midi. Tout cela fonctionne que vous construisiez le site vous-même, que vous employiez quelqu'un ou que vous utilisiez un outil.

Ce que « adapté au mobile » signifie vraiment

Un site internet adapté au mobile n'est pas simplement une version rétrécie de votre site de bureau. C'est un site qui a été conçu pour qu'une personne utilisant un pouce, sur un téléphone d'entrée de gamme, avec une connexion cellulaire médiocre, puisse trouver ce dont elle a besoin et agir en quelques secondes.

Cela se décompose en quatre éléments :

Il s'adapte à l'écran. Pas de défilement horizontal, pas de pincement et de zoom, pas de texte qui dépasse le bord.
Il est rapide. Il charge du contenu utile en quelques secondes, pas en dix.
Il est facile à taper. Les boutons et les liens sont assez grands pour un pouce et espacés pour que vous ne tapiez pas sur le mauvais.
Il est facile d'agir dessus. Le numéro de téléphone, le bouton de réservation et l'adresse sont les premières choses qu'un visiteur voit, pas les dernières.

Google utilise l'indexation Mobile First depuis des années, ce qui signifie qu'il examine la version mobile de votre site pour décider de votre classement, même pour les personnes qui recherchent sur un ordinateur. Une mauvaise expérience mobile fait silencieusement baisser votre visibilité partout.

Commencez avec un design responsive, pas un site mobile séparé

Il y a des années, les entreprises créaient un second site internet juste pour les téléphones, généralement sur une URL comme m.votreentreprise.com. Ne faites pas cela. C'est deux fois plus de travail, ça divise votre référencement, et ça devient toujours obsolète.

L'approche moderne est le design responsive : un seul site internet qui s'adapte à n'importe quel écran. Les colonnes s'empilent, les images se rétrécissent, le menu se replie. Comme le décrit TechTarget dans son guide des meilleures pratiques mobiles, une mise en page responsive passe de plusieurs colonnes sur un bureau à une seule colonne lisible sur un téléphone sans que vous ayez à maintenir deux versions.

Presque tous les créateurs de sites et les modèles modernes sont responsive par défaut. Si vous choisissez un thème ou un modèle, « responsive » ou « prêt pour le mobile » devrait être la première case à cocher. Une chose technique à confirmer est cachée dans le code : la page a besoin d'un paramètre viewport qui indique au téléphone de rendre à la largeur de l'appareil au lieu de faire semblant d'être un bureau. Tout bon modèle l'inclut déjà, mais si votre texte apparaît microscopique sur un téléphone, un paramètre viewport manquant est généralement le coupable - cela vaut la peine de le signaler à votre créateur ou développeur.

Concevez pour le pouce, pas pour la souris

Un pointeur de souris est un seul pixel. Un pouce est plus près d'un centimètre de large et bien moins précis. Ce seul fait guide la plupart des décisions de conception mobile.

Rendez les cibles de tap grandes. Les boutons et les liens doivent faire au moins 44 sur 44 pixels, environ la taille du bout d'un pouce. Apple et Google recommandent tous deux cette plage dans leurs directives de conception.
Espacez les éléments. Deux liens empilés à un pixel de distance garantissent des taps incorrects. Donnez aux éléments cliquables de l'espace pour que les gens ne tapent pas sur le mauvais.
Mettez les éléments importants dans la zone du pouce. Les personnes tiennent les téléphones et tendent leur pouce, qui couvre confortablement la partie inférieure et centrale de l'écran. Votre action principale - habituellement « appeler » ou « réserver » - appartient là où un pouce se pose naturellement, pas dans un coin supérieur.
Utilisez un menu hamburger. L'icône à trois lignes qui ouvre votre navigation est standard pour une raison : elle cache un long menu derrière un seul tap et garde l'écran propre.

Rendez le texte lisible sans zoomer

Si un visiteur doit pincer pour lire vos horaires, vous l'avez perdu. Sur mobile :

Gardez le texte du corps à un minimum de 16 pixels. Plus petit semble correct sur votre ordinateur portable et est illisible sur un téléphone en plein soleil.
Utilisez un contraste élevé. Du texte sombre sur fond clair bat du gris clair sur blanc à chaque fois, surtout à l'extérieur.
Gardez les paragraphes courts. Deux ou trois lignes. Un mur de texte qui convient sur un bureau devient un défilement intimidant sur un téléphone.
Utilisez des titres clairs pour qu'un visiteur qui parcourt puisse aller directement aux « Services » ou au « Contact ».

Évitez les polices décoratives pour tout ce qu'une personne doit lire rapidement. Gardez la personnalité pour votre logo.

La vitesse est la fonctionnalité que les clients ressentent en premier

La vitesse est l'endroit où la plupart des sites de petites entreprises locales échouent silencieusement. Selon des chiffres largement cités dans l'industrie, plus de la moitié des visiteurs mobiles abandonnent une page qui prend plus de 3 secondes à charger. Sur un téléphone, avec des données mobiles, trois secondes passent vite.

Le plus grand coupable est presque toujours les images. Une photo directement depuis l'appareil photo d'un téléphone peut peser 5 mégaoctets. Sur une connexion lente, c'est tout le budget de chargement pour une seule image. Pour y remédier :

Redimensionnez les images à la taille à laquelle elles s'affichent réellement. Une photo affichée sur 800 pixels de large n'a pas besoin d'être large de 4000 pixels.
Compressez-les et utilisez des formats modernes. Les fichiers WebP sont considérablement plus petits que les anciens JPEG sans perte de qualité visible. De nombreux créateurs convertissent automatiquement. Si le vôtre ne le fait pas, un outil gratuit comme TinyPNG ou Squoosh le fait en quelques secondes.
Activez le chargement différé pour que les images sous la ligne de flottaison ne se chargent que lorsque quelqu'un fait défiler jusqu'à elles, au lieu de toutes en même temps.
Éliminez l'encombrement. Les vidéos en lecture automatique, les diaporamas lourds, les widgets de chat et les scripts de suivi ajoutent du poids. Gardez ce qui mérite sa place.

Un site lent ne fait pas qu'irriter les gens. Il vous coûte à la fois des classements et des appels, ce qui est le pire type de problème : invisible et coûteux.

Les fonctionnalités mobiles dont les entreprises locales ont vraiment besoin

Les conseils génériques sur le mobile s'arrêtent à « rendez les boutons plus grands ». Pour une entreprise de services à domicile ou locale, tout l'intérêt de la visite mobile est d'amener un client à vous contacter maintenant. Construisez pour cela.

Numéro de téléphone avec appel en un tap. Sur un téléphone, votre numéro doit être un lien qui commence un appel en un seul contact. Personne ne copie un numéro et le compose manuellement. C'est l'élément de plus haute valeur sur un site de services à domicile.
Un bouton d'appel ou de réservation fixe. Une petite barre épinglée en bas de l'écran qui suit le visiteur pendant qu'il fait défiler, avec « Appeler maintenant » ou « Obtenir un devis », signifie que l'action est toujours à un tap du pouce.
Adresse avec ouverture dans l'application de cartographie. Votre adresse devrait ouvrir l'application cartographique du téléphone avec l'itinéraire en un tap. Pour un emplacement physique, c'est énorme.
Formulaires courts avec le bon clavier. Si vous utilisez un formulaire de contact ou de devis, limitez-le aux champs minimum. Utilisez les bons types de champs pour que le téléphone affiche un pavé numérique pour le champ téléphone et un clavier email pour le champ email. Chaque champ supplémentaire sur un téléphone fait perdre des gens.
Horaires et zone de service en haut. « Êtes-vous ouvert » et « venez-vous dans ma ville » sont les deux questions qu'un visiteur mobile se pose. Répondez-y sans qu'il ait à faire défiler.

Le guide de Yelp sur les sites internet adaptés au mobile pour les entreprises locales fait le même constat sous-jacent : les visiteurs mobiles sont à haute intention et locaux, donc le travail de conception est de supprimer chaque étape entre l'atterrissage et le contact.

Testez sur un vrai téléphone, pas seulement sur votre bureau

Les concepteurs testent sur un grand écran avec une connexion internet rapide, puis s'étonnent que les vrais clients aient du mal. Testez de la façon dont vos clients naviguent vraiment.

Utilisez les outils de Google. Google a retiré son test Mobile Friendly indépendant, mais PageSpeed Insights vous donne maintenant à la fois un score de performance mobile et des correctifs spécifiques, ainsi que vos Core Web Vitals - les vrais chiffres de vitesse et de stabilité que Google mesure.
Utilisez votre propre téléphone, et un ancien. Chargez le site sur votre téléphone personnel. Puis empruntez un Android moins cher ou plus ancien. Si ça fonctionne là, ça fonctionne pour tout le monde.
Limitez votre connexion. Dans les outils de développement de votre navigateur, vous pouvez simuler un réseau mobile lent. C'est humiliant et c'est honnête.
Faites le test d'un seul pouce. Tenez le téléphone dans une main et essayez de réserver une mission ou de trouver vos horaires en utilisant uniquement votre pouce. Si vous n'y arrivez pas, votre client non plus.

Testez à la fois sur iOS et Android, car ils affichent le contenu légèrement différemment, et retestez chaque fois que vous ajoutez quelque chose de lourd comme une nouvelle galerie de photos ou un widget de réservation.

Le raccourci : commencer avec un site responsive par défaut

Tout ce qui précède est faisable à la main. C'est aussi beaucoup d'après-midis si vous gérez aussi une entreprise et répondez au téléphone.

C'est l'écart que Saynovo est conçu pour combler pour les services à domicile et les propriétaires locaux. Le site qu'il génère est responsive dès le premier brouillon : il s'adapte déjà à l'écran du téléphone, les cibles de tap sont dimensionnées pour les pouces, les images sortent compressées et l'appel en un tap est câblé - sans paramètres mobiles à activer et sans version mobile séparée à maintenir. Quand vous voulez un changement, vous dites ce que vous voulez et le site se met à jour, et il reste adapté au mobile au fur et à mesure qu'il change. Cela élimine la partie sur laquelle la plupart des propriétaires bloquent : savoir si la version téléphone est vraiment correcte.

Une courte liste de vérification pour rendre votre site adapté au mobile

Que vous le construisiez vous-même ou utilisiez un outil, apprendre à créer un site internet adapté au mobile se résume à quelques vérifications que vous pouvez effectuer aujourd'hui :

Un seul site responsive, pas une URL mobile séparée.
Texte d'au moins 16 pixels, contraste élevé, paragraphes courts.
Boutons d'au moins 44 pixels, bien espacés, dans la zone du pouce.
Images redimensionnées, compressées et à chargement différé pour que la page se charge en moins de 3 secondes.
Un numéro de téléphone cliquable, un bouton d'appel ou de réservation fixe, et une adresse avec ouverture cartographique en un tap.
Formulaires courts avec les bons claviers mobiles.
Testé sur un vrai téléphone ancien et noté dans PageSpeed Insights.

Corrigez ces points et votre site cessera de perdre le trafic mobile que vous avez travaillé dur à gagner. Sur mobile, l'entreprise la plus facile à contacter gagne généralement, et maintenant c'est la vôtre.