Le Site de la Semaine – « La P’tite Diablotine et ses burgers »

Un burger, ça se mange avec les mains. Un site de foodtruck, ça se consulte avec le pouce, souvent debout, parfois sous la pluie nantaise, toujours avec un petit creux. Quand La P’tite Diablotine et ses burgers a demandé à Graph’in ! de réaliser le site internet de son activité de foodtruck sur Nantes et sa périphérie, le point de départ était simple : vos clients vous « googlisent » presque à chaque fois, alors que trouvent-ils ? Un site sérieux donne du crédit à une activité. Un site lisible sur téléphone donne, en plus, envie de passer commande.

Le site de La P’tite Diablotine est en ligne à cette adresse : la-petite-diablotine-et-ses-burgers.fr. Ce projet nous sert de prétexte pour parler d’un sujet qui revient sur chaque chantier web de l’agence : le smartphone. Comment pense-t-on un site pour l’écran qui tient dans la poche ? Que faut-il montrer en premier ? Qu’est-ce qui fait fuir un visiteur affamé en moins de temps qu’il n’en faut pour dire « sauce à part » ?

Un foodtruck se déplace, ses clients aussi

Un restaurant a une adresse fixe. Un foodtruck, lui, change parfois de quai, de marché ou de parking d’entreprise selon les jours. Ses clients le cherchent donc… en mouvement. Ils sortent du bureau, attendent un tram, traversent une zone d’activité à l’heure du déjeuner. Ils n’ont pas d’ordinateur sous le bras. Ils ont un téléphone, une main libre et une question en tête : « Il est où, aujourd’hui ? »

Cette scène, nous l’avons en tête avant d’ouvrir le moindre logiciel. Elle dicte presque tout le reste. Pour une agence comme Graph’in !, installée entre Nantes et Ancenis, c’est même une habitude de travail : imaginer le visiteur réel, dans sa situation réelle, avant de dessiner la première maquette. Un cabinet de conseil sera surtout consulté depuis un bureau ; un commerce de bouche, depuis un trottoir. Le site doit suivre.

Google a fait le même constat il y a quelques années. Le moteur indexe désormais les sites à partir de leur version mobile : c’est elle qu’il lit, qu’il évalue et qu’il classe. Un site superbe sur grand écran mais bancal sur téléphone part donc avec un boulet au pied, y compris pour les recherches faites depuis un ordinateur.

Penser petit écran d’abord

Pendant longtemps, on concevait un site pour l’écran d’ordinateur, puis on « rangeait » les éléments pour qu’ils tiennent sur mobile. Résultat : des colonnes empilées au petit bonheur, des menus qui débordent, des boutons minuscules. La méthode dite « mobile first » prend le problème dans l’autre sens. On conçoit d’abord pour un écran d’une quinzaine de centimètres, on hiérarchise sans pitié, puis on profite de l’espace supplémentaire sur tablette et sur ordinateur.

Ce sens de lecture change la façon de trier l’information. Sur un téléphone, il n’y a qu’une colonne. Ce qui arrive en premier est vu ; ce qui arrive en sixième position est parfois ignoré. Il faut donc décider, dès le départ, ce que le visiteur doit voir sans faire défiler l’écran. Pour un foodtruck, la réponse tient en peu de mots : ce que l’on mange, où l’on vous trouve, comment vous joindre.

Le pouce, ce gouvernail

Sur mobile, on ne clique pas : on tapote, avec le pouce, souvent d’une seule main. Les zones faciles à atteindre se trouvent dans le bas et au centre de l’écran ; les coins du haut demandent une petite gymnastique. Nous plaçons donc les actions les plus utiles (appeler, voir la carte, trouver l’emplacement) là où le pouce tombe naturellement. Les boutons sont assez grands pour être touchés du premier coup, et assez espacés pour éviter d’appeler quand on voulait ouvrir un plan.

Des textes qui tiennent dans la paume

Un paragraphe de dix lignes sur un ordinateur devient un pavé de vingt-cinq lignes sur un téléphone. Sur mobile, nous coupons plus court : des paragraphes de deux ou trois phrases, des intertitres fréquents, une taille de caractère confortable (au moins 16 pixels pour le texte courant). On peut lire un menu dans une file d’attente. On ne lit pas une thèse.

Ce que l’affamé veut savoir, et vite

Quand nous préparons l’arborescence d’un site de restauration, nous listons les questions que le client se pose, dans l’ordre où il se les pose. Elles reviennent d’un projet à l’autre, avec une régularité de marée :

• Qu’est-ce qu’on mange ? La carte, avec des photos et des noms lisibles.
• Où et quand ? Les emplacements, les jours, les horaires.
• Comment commander ? Sur place, par téléphone, à l’avance, pour un événement…
• Comment vous joindre ? Un numéro qui se compose d’un seul geste.

Chaque réponse doit être accessible en un ou deux gestes depuis la page d’accueil. Le numéro de téléphone, par exemple, est écrit sous forme de lien d’appel : un tapotement et le téléphone compose. L’adresse renvoie vers une application de cartographie. Ce sont des détails techniques minuscules (quelques lignes de code) qui évitent au visiteur de recopier un numéro à la main, avec les doigts pleins de sauce.

La carte mérite une attention particulière. Beaucoup de restaurants la publient en PDF ou sous forme de photo du tableau noir. Sur un téléphone, c’est une petite torture : il faut zoomer, faire glisser, attendre le téléchargement. Une carte écrite en texte dans la page se lit sans effort, s’adapte à l’écran et peut être lue par Google… et par les assistants d’intelligence artificielle qui répondent désormais à des questions comme « où manger un burger à Nantes ce midi ? ».

La gourmandise passe par les yeux

Un burger mal photographié ressemble à un accident de cuisine. Un burger bien photographié fait saliver à travers l’écran. La première version de cet article promettait d’ailleurs que le site allait « vous faire saliver » : la promesse repose en grande partie sur l’image.

Chez Graph’in !, Guillaume Néel est photographe professionnel (et certifié Google Trusted Photographer pour Street View). Pour un site de restauration, nous avons quelques règles de pont :

• la lumière naturelle, de côté, qui donne du relief là où un flash écrase les volumes ;
• un cadrage serré, qui montre la texture du pain, le fondant du fromage, le croquant des légumes ;
• des photos verticales ou carrées pour le mobile, où une image très allongée se retrouve réduite à un mince bandeau ;
• des images compressées et redimensionnées, pour qu’elles s’affichent vite même en 4G.

Ce dernier point est souvent oublié. Une photo sortie d’un appareil moderne pèse plusieurs mégaoctets. Posée telle quelle sur un site, elle met plusieurs secondes à apparaître sur un réseau mobile moyen. Nous exportons chaque image à la taille où elle sera affichée, dans un format léger comme le WebP, et le site sert automatiquement une version plus petite aux écrans plus petits. La rapidité mérite à elle seule un article : c’est l’angle que nous avons pris pour le site de la semaine consacré à Optipaie.

Pour aller plus loin sur la production d’images, notre page Création de contenus détaille la manière dont l’équipage prépare et réalise une séance photo.

Le site et la fiche Google, deux matelots sur le même pont

Sur mobile, beaucoup de recherches se terminent… avant même d’arriver sur le site. Le visiteur tape « foodtruck burger Nantes », voit apparaître une carte avec quelques établissements, leurs photos, leurs avis, leurs horaires, et choisit directement depuis ce petit encadré. Cet encadré, c’est la fiche Google Business Profile.

Le site et la fiche travaillent en duo. La fiche attire l’œil dans les résultats ; le site rassure et donne le détail. Les deux doivent raconter la même histoire : même nom, même numéro, mêmes horaires, des photos du même niveau. Une incohérence (un vieux numéro sur la fiche, des horaires d’hiver encore affichés en plein été) suffit à envoyer le client chez le voisin. Nous avons consacré l’article sur Lab’oh ! à cette fiche et à la façon de bien la lancer.

Pour un commerce ambulant, il y a une subtilité : Google Business Profile permet d’indiquer une zone desservie à la place d’une adresse unique. Les emplacements qui changent se gèrent alors sur le site et sur les réseaux sociaux, que la fiche peut relayer par ses publications.

Les erreurs qui font fuir le client affamé

Quelques travers reviennent souvent lorsque nous auditons des sites de restaurants ou de commerces de bouche. Aucun n’est grave isolément. Ensemble, ils transforment une visite en parcours du combattant.

• La fenêtre surgissante plein écran, dès l’arrivée, pour une lettre d’information. Sur mobile, la croix de fermeture est minuscule, et Google n’apprécie pas.
• Le texte écrit dans une image : illisible pour les moteurs, impossible à agrandir proprement, muet pour les personnes malvoyantes.
• Le carrousel qui défile tout seul. Le visiteur n’a pas fini de lire la première diapositive que la troisième est déjà là.
• Les caractères gris clair sur fond blanc, très élégants sur l’écran du graphiste, illisibles au soleil de midi.
• La vidéo d’ambiance en lecture automatique, qui mange les données mobiles et ralentit tout l’affichage.

Le point commun ? Ces choix ont été faits devant un grand écran, au calme, avec une connexion fibre. Le client, lui, est sur un trottoir. C’est pour lui que l’on dessine.

Tester sur de vrais téléphones

Les outils de conception permettent de simuler l’affichage d’un site sur différents écrans. C’est pratique, mais ça ne remplace pas le vrai test. Avant chaque mise en ligne, nous ouvrons le site sur plusieurs téléphones (des récents, des moins récents, un Android, un iPhone) et nous faisons ce que fera un client : chercher l’adresse, ouvrir la carte, appeler. On découvre toujours quelque chose. Un bouton masqué par la barre du navigateur, un tableau trop large, un formulaire dont le clavier recouvre le bouton d’envoi…

Après la mise en ligne, Google Search Console signale les éventuels problèmes d’ergonomie et de vitesse, page par page. Nous la configurons pour chaque site que nous livrons et nous la surveillons dans le cadre de la maintenance. Un site mobile se soigne dans le temps : les téléphones changent, les navigateurs aussi, et le contenu évolue avec la saison.

Votre activité tient dans une poche ? Votre site aussi

Foodtruck, boulangerie, artisan, salon de coiffure, club de sport : dès que vos clients vous cherchent en se déplaçant, votre site doit être pensé pour leur téléphone avant tout. C’est notre manière de faire sur chaque projet de site internet, réseaux sociaux et fiche Google, à Nantes, à Ancenis et à distance partout en France. Parcourez nos réalisations pour voir d’autres sites livrés par l’équipage, ou écrivez-nous pour parler du vôtre.

Levez l’encre !

Vos questions, nos réponses