Site internet de restaurant qui remplit la salle

Ouvrez dix sites web de restaurants sur votre téléphone et comptez combien d’entre eux vous obligent à passer par un diaporama, une bannière relative aux cookies et une fenêtre contextuelle de newsletter avant de pouvoir voir un seul plat. En général, c’est le cas de la plupart d’entre eux. Un bon site internet de restaurant ne vise pas tant à impressionner qu’à amener une personne affamée, de la question « Où allons-nous manger ? » à une réservation, une commande ou un itinéraire, en quelques clics seulement. De nombreux sites primés échouent à ce test. De nombreux sites simples, créés à l’aide d’un créateur de site web pour restaurant, le réussissent sans même essayer.

Le design reste important, et même essentiel. Le site est souvent le premier aperçu que l’on a de votre salle, de vos plats et de vos prix, et les gens se forgent une opinion sur ces trois aspects en quelques secondes. L’essentiel est de concentrer vos efforts là où les clients posent réellement leur regard : la première page, le menu, les photos et les boutons. Parmi ces éléments, c’est le menu qui mérite le plus d’attention, et lorsqu’il s’agit du même menu que celui utilisé pour votre menu QR et commande mobile, il ne doit en aucun cas être obsolète.

Qu’est-ce qu’un bon design de site internet de restaurant ?

Les meilleurs sites web de restaurants ne se ressemblent pas du tout. Le site d’une taqueria et celui d’un restaurant proposant des menus dégustation ne doivent pas se ressembler. Mais au fond, les meilleurs sites ont tous en commun quelques éléments essentiels :

• La première page qui s’affiche sur un téléphone indique ce que vous servez, où vous vous trouvez et si vous êtes ouvert aujourd’hui.
• Un bouton bien visible pour l’action que vous souhaitez avant tout que les visiteurs effectuent, qu’il s’agisse de réserver, de commander ou d’appeler.
• Un menu présenté sous forme de texte sur la page, avec les prix, plutôt qu’un PDF ou une photo du menu imprimé.
• Des photos de vos propres plats et de votre salle, prises avec un éclairage et un style cohérents.
• Deux polices de caractères au maximum, et un texte suffisamment foncé pour être lisible sur un téléphone en plein soleil.
• L’adresse, les horaires d’ouverture et le numéro de téléphone sur chaque page, avec un itinéraire et la possibilité d’appeler d’un simple clic.
• Des pages qui se chargent rapidement sur le réseau mobile, sans vidéo à lecture automatique ni diaporamas.
• Un style visuel en harmonie avec la chambre, afin que personne ne soit surpris en entrant.

Tout cela ne nécessite pas un budget énorme. Il faut simplement quelqu’un pour prendre des décisions et s’y tenir.

C’est le premier écran qui fait l’essentiel du travail

Un écran de téléphone classique mesure environ 390 pixels de large et peut-être 650 de haut, une fois que le navigateur a prélevé sa part. C’est tout l’espace dont vous disposez pour répondre à trois questions : de quel genre d’établissement s’agit-il, est-il près de chez moi et puis-je y aller ce soir ?

Ce premier écran doit donc comporter le nom, une phrase compréhensible pour un inconnu (« Pizza napolitaine et vin naturel à Leith », et non « Un voyage culinaire »), une photo percutante, les horaires du jour et votre bouton principal. Si ce sont les réservations qui vous permettent de payer vos factures, le bouton indique « Réserver une table ». Si vous vivez des commandes à emporter, il indique « Commander maintenant ». Deux boutons, ça suffit. Cinq, c’est une barre de navigation qui se fait passer pour un appel à l’action.

Quatre éléments sont sûrs de tout gâcher :

• Une vidéo en plein écran qui se lance au chargement de la page. Elle est magnifique sur l’ordinateur portable du concepteur, mais elle consomme énormément de données mobiles, et les téléphones en mode économie d’énergie ne parviennent souvent pas à la lire.
• Les diaporamas et les carrousels. La plupart des visiteurs n’attendent jamais la deuxième diapositive ; ce qui s’y trouve passe donc largement inaperçu.
• Des fenêtres contextuelles demandant une adresse e-mail avant même que l’on ait pu voir les plats.
• Un logo si grand que tout ce qui est utile se trouve en dessous de la ligne de flottaison.

Voici un test rapide. Donnez votre téléphone à un ami, ouvrez la page d’accueil et demandez-lui de vérifier si vous êtes ouverts le dimanche soir et de se renseigner sur le prix approximatif d’un plat principal. Comptez le nombre de clics. S’il en faut plus de deux pour obtenir l’une ou l’autre de ces réponses, c’est qu’un élément fait obstacle.

Concevez la page du menu avant toute autre chose

Sur la plupart des sites de restaurants, la page du menu est celle que les gens recherchent, souvent directement depuis Google, en ignorant complètement la page d’accueil. Pourtant, elle est généralement conçue en dernier, après la page d’accueil et la page « À propos », et on ne lui consacre que le temps qui reste. Inversez cet ordre.

Commencez par la structure. Regroupez les plats selon la manière dont les clients font leur choix, ce qui correspond généralement à la présentation du menu papier, et sur un menu long, ajoutez en haut une rangée de liens vers les différentes rubriques (Entrées, Plats principaux, Pizzas, Desserts, Boissons) qui reste visible lorsque les visiteurs font défiler la page. Les menus distincts pour le déjeuner, le dîner, le brunch et les boissons fonctionnent mieux sous forme d’onglets sur une seule page, et non comme quatre liens vers quatre fichiers différents.

Viennent ensuite les plats. Des descriptions succinctes indiquant ce que contient l’assiette, les prix visibles à côté de chaque plat, et pas besoin de chercher la devise. Les indicateurs relatifs aux régimes alimentaires et aux allergènes doivent être de petites icônes cohérentes, accompagnées d’une légende en haut de la page, et ils doivent être exacts, ce qui relève autant d’une question de processus que de conception. La gestion des allergènes dans un restaurant relève de l’aspect procédural. L’ordre de présentation des plats, le plat « leurre » et l’emplacement du prix sont les mêmes outils que ceux que vous utiliseriez sur papier, conformément aux principes de conception des menus.

Le texte a une importance qui va au-delà de l’aspect visuel. Un menu rédigé sous forme de texte véritable peut être lu par Google, agrandi par une personne malvoyante, lu à voix haute par un lecteur d’écran et traduit par le navigateur d’un touriste d’un simple clic. Un menu numérisé ne permet aucune de ces opérations.

Les photos ont leur place sur la page du menu, mais pas à chaque ligne. Six ou huit images des plats que vous souhaitez le plus vendre seront plus efficaces que soixante vignettes, et elles permettent de garder la page légère.

Le dernier problème est d’assurer l’exactitude des informations. Sur la plupart des sites web de restaurants, le menu est obsolète au bout d’un mois, car pour le modifier, il faut envoyer un e-mail à la personne qui a créé le site. Lorsque le menu du site web correspond au menu du point de vente, ce problème disparaît. Avec Instant Site de Tableview, les plats, les prix, les photos et les mentions d’allergènes proviennent directement du back-office, et lorsqu’un plat est retiré de la carte sur le système de point de vente, il disparaît également du site web.

Typographie et couleurs : inspirez-vous de votre établissement

Vous disposez déjà d’une image de marque, même si personne ne l’a jamais appelée ainsi. Elle se retrouve sur l’enseigne au-dessus de la porte, sur le menu imprimé, sur le carrelage, sur les serviettes et sur les tabliers du personnel. Le site doit donner l’impression d’appartenir au même établissement. Un client qui réserve depuis un site web épuré, noir et or, et qui se retrouve dans une trattoria familiale conviviale se sentira induit en erreur, aussi agréables que soient les deux.

Choisissez deux polices de caractères et n’en choisissez pas d’autres. Une police de caractère pour les titres, généralement celle de votre enseigne ou une police similaire, et une police sobre et lisible pour tout le reste, menu compris. Les polices cursives et fantaisistes conviennent pour un nom ou un titre isolé. Sur une liste de trente plats, elles deviennent une source de fatigue.

La taille et le contraste sont les points sur lesquels les sites de restaurants se trompent le plus souvent. Le corps du texte doit mesurer au moins 16 pixels sur un téléphone. Et les directives d’accessibilité auxquelles la plupart des concepteurs se conforment, les WCAG de niveau AA, exigent un rapport de contraste d’au moins 4,5 pour 1 entre le texte normal et son arrière-plan, ou de 3 pour 1 pour les grands titres. Le gris pâle sur fond blanc ne convient pas. Il en va de même pour les lettres dorées fines sur fond noir, l’apparence par défaut de la moitié des bars à cocktails sur Internet. Des outils gratuits de vérification du contraste vous indiqueront en quelques secondes si vos couleurs sont conformes.

Pour les couleurs, choisissez-en deux ou trois dans la pièce et réservez une couleur d’accent uniquement pour les boutons. Si le bouton « Réserver » est le seul élément de couleur terracotta sur la page, les utilisateurs le repèrent sans même le chercher. Si la terracotta est également la couleur des titres, de la bordure et de l’arrière-plan du pied de page, le bouton se fond dans le décor.

Les arrière-plans sombres conviennent aux établissements ouverts tard le soir et peuvent donner un excellent rendu. Vérifiez simplement le contraste à deux reprises, évitez le noir pur pour le corps du texte lorsqu’il commence à scintiller, et testez la page en extérieur à midi, moment où de nombreuses personnes la consultent réellement.

La mise en scène des photos, pas seulement les photos

La plupart des conseils se limitent à « prenez de bonnes photos ». La différence entre un site qui a l’air haut de gamme et un site qui semble avoir été assemblé à la va-vite réside généralement dans la cohérence : la même lumière, le même type de surface et le même angle sur chaque cliché, de sorte que les images donnent l’impression de provenir d’une seule séance photo plutôt que de quatre téléphones différents sur une période de trois ans.

Quelques choix peuvent vous aider :

• Prenez vos photos près d’une fenêtre, à la lumière du jour, sur la même table à chaque fois. La lumière naturelle diffuse met bien mieux en valeur les plats que les ampoules chaudes de la salle à manger.
• Adaptez l’angle au plat. Les pizzas, les bols et les plateaux à partager sont plus mis en valeur lorsqu’ils sont photographiés directement d’en haut. Les hamburgers, les desserts à plusieurs couches et les cocktails hauts nécessitent un angle plus proche du niveau des yeux.
• Laissez de l’espace autour du sujet. Une même photo sera recadrée en largeur sur un ordinateur portable et en hauteur sur un téléphone ; un plat cadré d’un bord à l’autre perdra sa garniture sur l’un des deux supports.
• Montrez la salle avec des clients, avec leur accord. Une salle à manger vide photographiée à 15 h donne l’impression que l’endroit est calme.
• Évitez les photos d’archives. Les clients s’en aperçoivent, et un hamburger d’archive crée une attente à laquelle votre hamburger devra ensuite répondre.

Une fois vos photos prises, exportez-les à la taille à laquelle elles seront réellement affichées, dans un format moderne tel que WebP, et ajoutez à chacune une brève description de son contenu. L’aspect technique, des noms de domaine à la vitesse de chargement des pages, est abordé dans l’article sur la création d’un site internet ; il n’est donc pas nécessaire de le répéter ici.

Boutons, réservations et le pouce

La plupart des gens consultent le site d’un restaurant d’une seule main, souvent en marchant ou en attendant à un arrêt de bus. Le bas de l’écran est l’endroit le plus facile à atteindre avec le pouce ; c’est pourquoi une barre fine fixée en bas de l’écran et comportant les boutons « Appeler », « Itinéraire » et « Réserver » fonctionne si bien sur mobile. Elle reste immobile pendant que les utilisateurs font défiler le menu, de sorte que l’étape suivante est toujours à portée d’un simple tapotement.

Veillez à ce que chaque zone interactive soit suffisamment grande pour être ciblée. Les directives de conception d’Apple recommandent au moins 44 par 44 points, et les WCAG 2.2 fixent la taille minimale à 24 par 24 pixels. Libellez les boutons avec des verbes indiquant clairement l’action : « Réserver une table », « Commander à emporter », « Nous appeler ». « En savoir plus » n’apporte aucune information.

Le numéro de téléphone doit être un véritable lien permettant de lancer un appel, et l’adresse doit s’ouvrir dans l’application de cartographie du client. Ces deux éléments semblent évidents, mais ils sont absents d’un nombre surprenant de sites. Avec Instant Site, la fonction « cliquer pour appeler », les horaires d’ouverture et l’itinéraire en un clic s’affichent par défaut sur chaque page.

Les réservations méritent une attention particulière. Rediriger les visiteurs vers une page distincte où un widget tiers met du temps à se charger fait perdre une partie d’entre eux au moment même où ils se sont décidés. Intégrez correctement le formulaire de réservation ou conservez la demande sur votre propre site. Instant Site envoie les demandes de réservation directement dans votre boîte de réception et votre back-office. Si vous comparez différents outils de réservation, le choix d’un système de réservation détermine les options qui s’offrent à vous.

Il en va de même pour les commandes. Si le bouton « Commander » redirige les clients vers une application de livraison, vous versez une commission sur les clients qui sont venus vous trouver. Redirigez-les vers votre propre système de commande en ligne lorsque cela est possible. La manière dont cela s’intègre à la caisse est abordée dans l’article caisse avec commande en ligne.

Exemples de sites internet de restaurant par type d’établissement

Le design adapté dépend de ce que les clients viennent faire, et cela varie bien davantage entre un service de plats à emporter et un menu dégustation que ne le laisse entendre n’importe quelle galerie de modèles. Voici comment les priorités évoluent.

Bistro ou trattoria de quartier

Les habitués constituent l’essentiel de la clientèle, et ils souhaitent connaître le programme de la semaine. Commencez par une photo chaleureuse de la salle en service, les horaires et un bouton « Réserver », puis un court encadré « Cette semaine » présentant les plats du jour. Privilégiez une approche conviviale et une mise en page simple. Si les plats du jour changent quotidiennement et proviennent du système de point de vente, ils sont toujours à jour.

Restauration haut de gamme

La sobriété convient à ce type d’établissement : beaucoup d’espace blanc, de grandes photos, une police à empattement qui inspire confiance. Mais ne laissez pas l’élégance masquer les informations pratiques dont les clients ont besoin avant de dépenser quelques centaines pour un dîner. Indiquez le prix du menu dégustation par personne, la date d’ouverture des réservations, les conditions d’acompte ou d’annulation, le code vestimentaire et si vous pouvez répondre à des exigences alimentaires particulières. Les clients n’apprécient pas de devoir envoyer un e-mail pour obtenir ces informations. Une page dédiée aux chèques-cadeaux trouve également tout à fait sa place ici.

Pizzas, hamburgers et plats à emporter

Ici, le site web fait office de boutique. Le bouton « Commander maintenant » figure en haut de la page, suivi des zones de livraison, des horaires de retrait et d’un menu illustré de photos des best-sellers. La rapidité prime sur l’ambiance, et chaque écran supplémentaire avant le paiement fait perdre des commandes. Gérez-le à partir du même système que le comptoir et la cuisine : c’est précisément à cela que sert une caisse pour la vente à emporter et la livraison.

Café ou boulangerie

Les horaires d’ouverture ont plus d’importance que d’habitude, car les clients les consultent dès 7 h du matin. Affichez-les sur le premier écran, puis les produits du jour disponibles au comptoir, un plan d’accès et les informations pratiques : ordinateurs portables, chiens, chaises hautes, lait d’avoine. Les informations sur les allergènes présents dans les pâtisseries évitent au personnel une douzaine de questions chaque matin.

Bar à cocktails ou boîte de nuit

Un design sombre et intimiste convient, à condition que le texte respecte les normes de contraste. Le calendrier des événements est souvent la page la plus consultée, suivie de la réservation de tables ou de la liste des invités. Ajoutez les conditions d’âge et la politique d’accès à un endroit où les clients pourront les consulter avant de se déplacer, et non après avoir fait la queue.

Restaurant d’hôtel

Le restaurant doit être présenté de manière autonome, avec sa propre page ou son propre site accessible aux non-résidents, car de nombreuses personnes à la recherche d’un dîner ne se rendent pas compte que le restaurant de l’hôtel leur est ouvert. Indiquez-le clairement. Présentez-y ses propres horaires, son menu et un bouton de réservation, au lieu de le noyer à trois niveaux de profondeur dans le site de réservation des chambres de l’hôtel. La gestion de la restauration hôtelière s’inscrit dans une perspective plus large.

Un groupe disposant de plusieurs établissements

Commencez par un sélecteur d’emplacement, puis attribuez à chaque établissement sa propre page avec ses horaires, son menu, ses photos et son système de réservation. Utilisez le même modèle pour tous les établissements afin de préserver la cohérence de la marque et de pouvoir déployer un changement de menu simultanément partout. La gestion des opérations en arrière-plan relève de la gestion de plusieurs établissements de restauration.

Comment choisir un modèle de site internet pour restaurant

Les modèles sont vendus grâce à leurs photos de démonstration, prises par des professionnels avec des accessoires et un éclairage parfait. Ce n’est pas à cela que ressemblera votre site. Testez donc un modèle avec vos propres éléments avant de vous engager :

• le nom de votre plat le plus long et votre description la plus détaillée. Le menu s’affiche-t-il toujours correctement ?
• Votre pire photo. Les bons modèles résistent à une photo de qualité moyenne.
• Votre menu complet, avec ses soixante plats, ainsi que la carte des boissons.
• Vos horaires réels, y compris les rares fermetures le lundi et les horaires décalés.
• Un téléphone, tenu d’une seule main, connecté aux données mobiles.

Au-delà de cela, vérifiez les éléments qui auront de l’importance par la suite. Pouvez-vous modifier vous-même le texte et les photos sans faire appel à un développeur ? Disposez-vous d’un bloc de menu adapté plutôt que d’une simple zone de texte ? Le site comprend-il des sections consacrées aux horaires et à l’emplacement, et les boutons restent-ils visibles sur mobile ? Pouvez-vous modifier les titres et les descriptions de page affichés par Google ? Pouvez-vous utiliser votre propre nom de domaine ?

Les modèles d’Instant Site ont été conçus dès le départ pour le secteur de l’hôtellerie-restauration, avec des versions adaptées aux restaurants, cafés, bars, discothèques et plats à emporter. Vous modifiez les blocs directement sur la page (bannière, galerie, horaires, localisation, histoire, menu) ; votre logo, vos couleurs et vos polices s’appliquent à toutes les pages, et chaque mise en page s’adapte automatiquement aux mobiles sans configuration supplémentaire.

Et cela ne coûte rien de plus. Instant Site est inclus dans toutes les formules Tableview, y compris Starter à 69 dollars par mois : pas d’abonnement séparé pour le site ni de frais d’hébergement en plus de la caisse. Le détail de chaque formule figure dans les formules tarifaires de Tableview.

L’accessibilité fait partie intégrante du cahier des charges

Un site accessible est un site de meilleure qualité pour tous, et la majeure partie du travail consiste en des choix que vous faites de toute façon. Un contraste conforme aux normes. Du texte plutôt que des images représentant du texte. Des textes alternatifs sur les photos qui décrivent leur contenu. Des boutons utilisables au clavier. Des menus que les lecteurs d’écran peuvent lire dans l’ordre. Des vidéos, si vous en utilisez, accompagnées de sous-titres.

Il y a également un aspect juridique. Aux États-Unis, les sites web de restaurants ont fait l’objet d’une longue série de poursuites judiciaires en matière d’accessibilité en vertu de l’Americans with Disabilities Act, et en 2019, une cour d’appel fédérale a statué, dans l’affaire Domino’s, que cette loi s’appliquait au site web et à l’application de la chaîne. Au sein de l’Union européenne, la loi européenne sur l’accessibilité s’applique depuis juin 2025 à toute une gamme de services numériques, avec une exemption pour les plus petites entreprises. La question de savoir si et comment l’une ou l’autre de ces réglementations s’applique à vous relève d’un avocat, et non d’un concepteur de sites web. Concevoir en tenant compte de l’accessibilité dès le départ revient bien moins cher que de la mettre en place a posteriori à la suite d’une plainte.

La vitesse relève d’un choix de conception

Les sites lents le sont généralement en raison de choix de conception : une image d’en-tête de 6 Mo, quatre polices web, une vidéo d’arrière-plan, une galerie qui charge quarante photos à la fois. Google mesure le temps de chargement via ses Core Web Vitals et considère qu’une page est performante lorsque le contenu principal s’affiche en moins de 2,5 secondes, que la page répond à un clic en moins de 200 millisecondes et que la mise en page ne se déforme pas pendant le chargement.

Convenez d’un budget simple avec la personne chargée de la conception du site. Limitez l’image d’en-tête à quelques centaines de kilo-octets, n’utilisez que deux familles de polices, évitez la lecture automatique des vidéos et ne chargez les images de la galerie que lorsque l’utilisateur fait défiler la page jusqu’à celles-ci. Les pages Instant Site sont optimisées d’emblée pour les Core Web Vitals, ce qui couvre la plupart de ces aspects sans que personne n’ait à y penser.

Concevez votre site aussi bien pour Google que pour vos visiteurs

Les moteurs de recherche analysent également la conception, mais d’une manière différente. Chaque page doit comporter un titre indiquant ce qu’elle présente et où elle se trouve (« Marisco | Restaurant de fruits de mer à Cais do Sodré, à Lisbonne ») ainsi qu’un titre sur la page qui en fait de même en termes simples. Le menu, sous forme de texte, fournit à Google les noms des plats que les internautes recherchent réellement.

En coulisses, les données structurées indiquent aux moteurs de recherche que la page concerne un restaurant, en précisant son adresse, ses horaires d’ouverture, sa cuisine et s’il accepte les réservations. Instant Site ajoute automatiquement des données structurées relatives aux entreprises locales ainsi qu’un plan du site. Votre nom, votre adresse et votre numéro de téléphone doivent correspondre exactement à ceux figurant sur votre profil Google My Business et dans les annuaires, y compris les abréviations. L’aspect « référencement » de tout cela est abordé dans la section consacrée au référencement local pour les restaurants.

Comment créer le site internet d’un restaurant, étape par étape

Si vous partez de zéro ou si vous refaites un site devenu confus, cet ordre vous fera gagner du temps :

1. Déterminez l’action la plus importante : la réservation, la commande ou la visite. Cela définit le bouton principal et une grande partie de la mise en page.
2. Rédigez le contenu du premier écran avant de choisir les éléments visuels : le nom, la description en une ligne, les horaires et le bouton.
3. Mettez en page le menu avec ses rubriques, ses descriptions, ses prix et ses indications alimentaires, et reliez-le à votre menu de caisse si possible.
4. Inspirez-vous de la salle et de l’enseigne pour choisir vos polices et vos couleurs, et sélectionnez une couleur d’accent pour les boutons.
5. Prenez une série de photos cohérentes : dix plats, la salle bondée, la salle vide, l’extérieur, l’équipe.
6. Choisissez un modèle et testez-le avec votre contenu réel, sur un téléphone.
7. Ajoutez les pages pratiques : localisation, réservation ou commande, salle privée, chèques-cadeaux, contact.
8. Vérifiez le contraste, la taille des éléments tactiles et la vitesse de chargement, puis associez votre nom de domaine et publiez.
9. Revoyez le tout un mois plus tard. Corrigez la première chose qui vous dérange.

La plupart des restaurants peuvent franchir les étapes 1 à 5 en un après-midi, à l’aide d’un ordinateur portable et de l’appareil photo d’un téléphone. Le reste se fait rapidement une fois ces décisions prises.

Montrez-le à un inconnu avant de le lancer

Vous connaissez trop bien votre propre site pour pouvoir l’évaluer objectivement. Avant sa mise en ligne, trouvez trois personnes qui n’ont jamais mangé chez vous, donnez à chacune un téléphone et une mission : réserver une table pour samedi, trouver un plat végétarien à moins de 20, obtenir l’itinéraire depuis la gare. Observez sans intervenir. Chaque fois qu’une personne hésite, c’est qu’il y a un problème de conception, et il est bien moins coûteux de le corriger maintenant qu’après un mois de réservations perdues.

Puis tenez-le à jour. Un site web de restaurant bien conçu et mis à jour vaut mieux qu’un site magnifique qui affiche encore le menu de l’hiver dernier.

À lire ensuite : votre fiche d’établissement Google pour la fiche que les internautes voient avant votre site, le marketing sur les réseaux sociaux pour les photos une fois que vous les avez, et la gestion des avis sur votre restaurant pour ce que les clients disent de vous ailleurs.