Website design for restaurants: 7 real examples, on desktop and phone

A restaurant website has three jobs to do in a few seconds: make a stranger want your table, show how to book it (or why that is not possible), and put the menu where it can be read. This guide to website design for restaurants goes through seven real examples, from a village restaurant near Avignon to a pizzeria in New York, a vegetarian house in Zurich, a brasserie in a Paris railway station, a trattoria in Rome and two restaurant groups.

Each example is shown the way a visitor sees it, with the home page scrolling on a desktop screen and on a phone. One is a project of Hotel Web Design: the restaurant Les Jardins de la Livrée, in Villeneuve-lès-Avignon. The other six are sites we did not build, picked because each one solves a different design problem: taking bookings, showing a menu, selling more than a table, handling several restaurants. Nothing is ranked. After the examples you will find a phone test of the seven first screens, the ways guests book, how to publish a menu and a checklist for phone and desktop.

If you came here to design the dining room itself, with its layout, lighting and furniture, that is the work of an interior designer or an architect. This guide covers the website, whose first job is to show that room well.

How to design a restaurant website: seven decisions

Put side by side, the seven sites keep making the same seven decisions, each in its own way.

1. Lead with the room or the plate. A guest decides on a feeling before reading a word. Le Train Bleu opens on a slideshow of its gilded dining room, Roberta’s on a full-screen video of a cook ladling sauce onto pizza dough, Hawksmoor on a bartender at work behind a row of cocktails, Big Mamma on cooks in their kitchen and Hiltl on a hand drawing a drink at the tap. Da Enzo al 29 shows its dining room with the name over it, and Les Jardins de la Livrée opens on a card that says what the place is, then shows its street entrance and a plated dish.
2. Put the way to book in view, or say plainly that there is none. Hawksmoor keeps a Book a table pill in its header and puts the same words over its video. Big Mamma and Roberta’s lay booking buttons over their opening video, and Les Jardins de la Livrée puts a Book button that calls the restaurant next to the line Reservations by phone only. Da Enzo al 29 takes no reservations and says so, with the reason, in its Come and visit us section.
3. Choose the restaurant before the date, when there is more than one. Hawksmoor puts a country selector beside its logo and gives each restaurant its own menu page. At Big Mamma the Book a table button opens a list of restaurants, and each restaurant’s card carries its own Menu and Book a table links. Hiltl’s reservation panel names the venue, its address and its phone number before it asks for a date. A guest should never book the right table in the wrong city.
4. Publish the menu as a page, not only as a file. Da Enzo al 29 puts its whole menu on the page, in four tabs from Starters to Desserts, and Hawksmoor gives each restaurant a menu page. Hiltl and Le Train Bleu publish theirs as PDF files: one per venue at Hiltl, and one each for the restaurant, the bar and breakfast at Le Train Bleu. PDFs are easy to update and awkward on a small screen; the menu section below says what to do instead.
5. Sell more than a table. Roberta’s opens with four buttons: delivery, frozen pizzas, a table and catering. Le Train Bleu has Gift card and Takeaway in its header, Hiltl has a shop with vouchers, cooking courses and delivery, Big Mamma a Gift voucher button and Hawksmoor a gift shop. Da Enzo al 29 has a shop and a cooking class. Each is a path with its own button, not a line of text at the bottom of the page.
6. Give groups their own route. Hawksmoor books smaller groups online with an instant confirmation and sends larger parties to a private dining form, answered by its events staff. Big Mamma has a Private hire button beside Book a table, and Hiltl invites company dinners and festive gatherings with an Enquire now button. A table for twenty needs different questions than a table for two.
7. Work on a phone and in your guests’ languages. Google indexes and ranks the mobile version of a page, so a restaurant website that is comfortable only on a laptop is judged on its weaker version. The phone test below goes through it. As for languages, Hiltl is published in German and English, Le Train Bleu in French and English, Da Enzo al 29 in English and Italian, and Les Jardins de la Livrée in English and French. Big Mamma offers five languages on a first visit, while Hawksmoor and Roberta’s were in English only in our test.

7 restaurant website examples, analyzed

Each card shows the home page on a desktop screen and on a phone, what we noticed on the live site in October 2026, and what to take from it. Prices that appear on the pages are blurred in our screenshots and never quoted.

restaurant-lalivree.fr/en

01

Les Jardins de la Livrée

Village restaurant, market cuisine · Villeneuve-lès-Avignon, France

Les Jardins de la Livrée is a restaurant in Villeneuve-lès-Avignon, in the Gard, open since 1993, and its website is one of our projects. It is a site of its own, separate from the site of the guest house of the same name, which the footer links to. The opening card says what the place is in one line, market cuisine, then offers two buttons, Book a table and Discover the menu, and one honest line under them: reservations by phone only. A Book button with a phone icon sits in the header too. The Book buttons and the number itself call the restaurant.

The rest of the page answers the next questions in order. There is no fixed menu, since each service follows the market, so the site shows three ways to order: a full menu, a two-course option and a dish from the day’s choices, with their prices (blurred in our screenshots). It then introduces the two people who welcome and cook, opens a gallery of the dining room, the garden and the plates, and ends on the phone number, the address and a short message form.

Key takeaways

• When there is no online booking, say so next to the button on the first screen, so nobody hunts for a form that does not exist.
• A restaurant with no fixed menu can still show its offer: three ways to order, and a line explaining that the dishes follow the market.

Type

Village restaurant, our project

Location

Villeneuve-lès-Avignon, Gard (France)

Booking

Phone only; message form

Languages

English, French

Visit the website Our project (in French)

thehawksmoor.com

02

Hawksmoor

Steak and seafood restaurant group · United Kingdom, United States, Ireland

Hawksmoor is a steak and seafood restaurant group. Its home page says it now has 15 restaurants, in the United Kingdom, the United States and Ireland. The page opens on a looping video of a bartender at work behind a row of cocktails, with Book a table and View menus as its two buttons, and a Book a table pill stays in the header. A country selector (UK, USA, Ireland) sits beside the logo. Under the video, four quick links cover what repeat guests look for: Sunday roast, What’s on, Groups and Newsletter.

The Book a Table page loads one booking widget for all the restaurants and explains the two routes. Smaller groups book online and get an instant confirmation, or phone the restaurant; larger parties fill in a private dining form. A notice on the same page says that three London restaurants are not currently wheelchair accessible. The menus are a page for each restaurant, and the gift shop has a block of its own on the home page.

Key takeaways

• One booking page can serve many restaurants if it explains the two routes: instant confirmation for smaller groups, an enquiry form for large parties.
• An access notice belongs on the booking page, where the guest decides, not only in a footer.

Type

Steak and seafood restaurant group

Location

London and other cities (United Kingdom, United States, Ireland)

Booking

Booking widget on its own booking page; form for large groups

Languages

English (country selector: UK, USA, Ireland)

Visit the website

robertaspizza.com

03

Roberta’s

Pizzeria with delivery and catering · New York, United States

Roberta’s is a pizzeria with locations in New York, in Culver City, California, and in Nashville. The home page opens on a full-screen looping video of a cook ladling sauce onto pizza dough, with a Pause control, and four buttons carry the whole design idea: Order Delivery, Order Frozen, Book a Table and Order Catering. Each leads to a service that runs somewhere else: delivery through an online-ordering service, frozen pizzas through Goldbelly, tables through an OpenTable search page and catering through ezCater.

Below the video come a short paragraph about the menu, a dark Catering & Delivery block with the address of each location, an Events section with party photos, a What’s On section and a shop. On a phone the four buttons become a block of two by two large targets over the video, easy to hit with a thumb.

Key takeaways

• When a restaurant sells four things, give each its own button on the first screen instead of a single Order menu.
• On a phone the four buttons are large and spaced, which is what a thumb needs.

Type

Pizzeria with delivery, frozen pizzas and catering

Location

Brooklyn, Manhattan, Culver City and Nashville (United States)

Booking

OpenTable search page; separate delivery, frozen and catering services

Languages

English

Visit the website

hiltl.ch/en

04

Hiltl

Vegetarian restaurant since 1898 · Zurich, Switzerland

Hiltl presents itself as the oldest vegetarian restaurant in the world, a claim its own badge carries, and its slogan is Since 1898, Healthy Indulgence. The home page is short: a full-screen video with that slogan, a block inviting company dinners and festive gatherings with an Enquire now button, the badge and a small footer with Locations and contacts, Newsletter, Press and Too Good To Go. The header menu carries Locations, Cooking Courses, Your Occasion, Catering & Delivery, Shop, Uber Eats and a Rewards App.

Two tabs are fixed to the right edge of a desktop screen: Reservation at Haus Hiltl and Menus. The reservation tab slides a panel in over the page with the venue’s name, address and phone number, then a date, a number of people and a Book button that repeats them. The menus are PDF files, one for each venue and meal: à la carte and drinks, bistro, Sihlpost, roof terrace, am Strand, breakfast and brunch, and wine.

Key takeaways

• A fixed tab keeps booking one tap away at any point on a desktop screen, but on a phone it shrinks to an unlabeled sliver: test every fixed tab at 390 pixels.
• Menus as PDF files are easy to update and hard to read on a small screen: an HTML page for each menu reads better and can be found by search engines.

Type

Vegetarian restaurant with several venues

Location

Zurich (Switzerland)

Booking

Reservation panel on the site (Aleno); phone number shown

Languages

German, English

Visit the website

le-train-bleu.com/en

05

Le Train Bleu

Brasserie in a railway station · Paris, France

Le Train Bleu is the restaurant of the Gare de Lyon railway station in Paris, and its website lets the room do the talking. The home page opens on a slideshow of the gilded dining room, then tells the story of the place, presents a collaboration with the chef Michel Rostang, gives the opening hours in a gold block with Takeaway and Book a table buttons, and ends on photos of the lounges and the bar. At full desktop width the header shows labeled tabs: Gift card, Takeaway, Carte & Menu and Booking. On a phone they become a menu icon and a calendar icon.

Booking goes through a TheFork module, and a notice beside the button explains why it matters: because of the rise in fraudulent websites, bookings can only be made on the restaurant’s own site or on The Fork. Takeaway is a separate shop site, and the menus are PDF files (restaurant, bar and breakfast) behind a Carte & Menu page, with an allergen guide.

Key takeaways

• A fraud warning next to the booking button protects guests from look-alike booking sites: say where bookings are legitimately taken.
• A header of labeled tabs can shrink to icons on a phone, but then the icon must be one that everyone reads as booking.

Type

Historic brasserie in a railway station

Location

Gare de Lyon, Paris (France)

Booking

TheFork booking module; phone number shown

Languages

French, English

Visit the website

daenzoal29.com/en

06

Da Enzo al 29

Neighborhood trattoria · Rome, Italy

Da Enzo al 29 is a small trattoria in Trastevere, Rome, on via dei Vascellari. The page opens on the dining room with the name and one line, Traditional Roman Cuisine Restaurant in Trastevere, Rome, then explains where the ingredients come from (the family’s own farm, Le Terre di Enzo), shows three plates of pasta in a carousel and puts the whole menu on the page as text, in four tabs: Starters, First courses, Main courses and Desserts. A section on the neighborhood follows, then the opening hours and a contact form. The header has a Where we are button, a shop, a gallery, a cooking class, an About us page, Info/Contact, a language switch (English and Italian) and a cart.

There is no booking button, because the restaurant takes no reservations. The Come and visit us section says why: it is a small trattoria with a few tables and dishes prepared to order, so guests are welcomed first come, first served, and no one feels rushed. The statement is repeated beside the opening hours.

Key takeaways

• Saying “no reservations” with a reason, and the opening hours beside it, answers the question every visitor has. Putting it earlier on the page would spare first-time visitors a scroll.
• A menu written as text, in tabs, reads on a phone and can be found by search engines; a PDF can wait.

Type

Neighborhood trattoria, no reservations

Location

Trastevere, Rome (Italy)

Booking

No reservations (first come, first served); contact form

Languages

English, Italian

Visit the website

bigmammagroup.com

07

Big Mamma

Italian restaurant group · restaurants in nine countries

Big Mamma Group runs a family of Italian restaurants, each with its own name, and its home page is built to choose one. A first visit offers a language prompt (English, French, Spanish, Italian and German). The page opens on a full-screen video of cooks at work, with a sound toggle, and Gift voucher, Private hire and Book a table buttons in the header. Book a table does not open a calendar: it opens the list of restaurants.

A carousel, Discover all our restaurants, gives each restaurant a card with its address and its own Menu and Book a table links, and openings to come get a card too, with a countdown or a Coming soon label. The rest of the page carries news from the group, a newsletter form and a footer that lists restaurants in cities of nine countries, from London to Dubai.

Key takeaways

• With many restaurants, the first booking click should ask which restaurant, not which date: one list, one card for each address.
• Each restaurant carries its own menu and booking links, so a guest never books in the wrong city.

Type

Italian restaurant group

Location

Restaurants in nine countries, from London to Dubai

Booking

SevenRooms booking page for each restaurant

Languages

English, French, German, Spanish, Italian

Visit the website

The seven restaurant websites at a glance

A village restaurant with one phone number, a trattoria with no reservations, a group with a booking page for each address: the structure of the site changes, the principle does not. The Booking column shows what happens when a guest decides to book.

Restaurant website on a phone: the first screen of each example

The first screen is what a visitor sees before any scrolling. We opened each home page in a browser window 390 pixels wide, a common phone width, in October 2026, and noted whether a way to book was already in view. Two of them side by side show the range: Roberta’s on the left, Hiltl on the right.

Four of the seven put a labeled booking button in view before any scrolling: Les Jardins de la Livrée, Hawksmoor, Roberta’s and Big Mamma. Le Train Bleu shows a calendar icon with no label, which works only if the visitor reads it as booking, and on Hiltl’s page the tabs that lead to the reservation and the menus show only as slivers at the edge of a phone screen. Da Enzo al 29 needs no button, but a first-time visitor learns that only by scrolling to the end of the page. A visitor on a phone should never have to hunt for the way to book, or for the reason there is none.

Which example is closest to your restaurant?

• One restaurant, one phone number. Les Jardins de la Livrée says “phone only” next to its button, and Da Enzo al 29 says “no reservations” and gives the reason.
• A restaurant that sells more than tables. Roberta’s gives delivery, frozen pizzas, tables and catering one button each, and Hiltl adds a shop, cooking courses and company dinners.
• A room people come to see. Le Train Bleu lets its dining room fill the first screen and keeps the practical information for a block further down.
• Several restaurants. Hawksmoor keeps one booking page and a country selector, and Big Mamma makes the restaurant the first choice, before the date.
• Groups and events. Hawksmoor, Big Mamma and Hiltl each give them a route of their own.

How guests book a table on a restaurant website

After the photos, the biggest design choice is the road from “I would like to eat there” to “it is booked”. The seven sites use four, often side by side.

Book in a panel or a widget on the restaurant’s own page

Hiltl slides a reservation panel in over its page. The panel shows the venue’s name, address and phone number, then a date and a number of people, and a Book button that repeats them. Hawksmoor’s Book a Table page loads a booking widget for all its restaurants, with a choice of lunch or dinner. The guest keeps the restaurant’s name, photos and language from the first screen to the confirmation.

Hand the guest to a booking platform

Roberta’s sends its Book a Table button to a search page of OpenTable, Big Mamma gives each restaurant a booking page on SevenRooms, and Le Train Bleu uses a TheFork module, with a notice saying that, because of the rise in fraudulent websites, bookings can only be made on its own site or on The Fork. A platform brings a booking flow that already exists. The trade-off is that the guest changes site at the last step, so the page should say which button leads where, and the platform page should carry the same name and photos. Platforms price their services differently: before you choose, ask what a booking that starts on your own website costs compared with one that starts inside the platform’s own app.

Take bookings by phone, and say so

Les Jardins de la Livrée takes reservations by phone only. Its Book buttons and its phone number are call links, the number sits in a block of its own near the end of the page with the address, and a short form takes messages. For a small restaurant a call is a legitimate route, and on a phone it costs the guest one tap. What matters is saying it at the place where a visitor looks for a calendar.

Say when there are no reservations

Da Enzo al 29 explains that it is a small trattoria with a few tables and dishes prepared to order, and that it welcomes guests first come, first served so that no one feels rushed. The opening hours sit next to that statement. A reason and the hours are a complete answer to the question every visitor has.

Booky, for the rooms of a restaurant with rooms

In our test none of the seven sold rooms, though Les Jardins de la Livrée links to the separate website of its guest house. For the accommodation side of a small hotel or inn, the booking engine we build is Booky. Bookings taken with Booky carry no commission, and it handles seasonal rates, stay-length rules, online payment with a deposit and a balance, and scheduled messages before and after arrival. Tables are a different kind of booking, with covers, sittings and the pace of a kitchen, so they usually run on a system built for restaurants, like the ones above. The job of the website is to put the right button in front of each guest and to look like the same place at every step.

Restaurant menus on a website: text first, file second

A menu is the page many visitors open before they decide. The seven sites handle it in three ways: as text on the page (Da Enzo al 29, and the set menus of Les Jardins de la Livrée), as a page for each restaurant (Hawksmoor) and as PDF files (Hiltl and Le Train Bleu). The Nielsen Norman Group, a research firm on web usability, advises against putting content people need to read online into PDF files and recommends a web page that describes a file when one is needed. Le Train Bleu’s Carte & Menu page is a short web page of links, labeled by meal, in front of its files.

• The menu as text, on a page of its own. Guests can read it on a phone and search engines can read it too. Da Enzo al 29 does it with four tabs.
• The PDF as an extra. Keep it for printing, linked from that page.
• A note when the offer changes. Les Jardins de la Livrée explains that there is no fixed menu and that each service follows the market.
• Allergen information in plain sight. Le Train Bleu links an allergen guide from the block where it takes bookings.
• Prices in text, with the period they apply to. If you publish prices, say until when they are valid.

Restaurant website checklist: phone and desktop

On a phone

• A way to book, or the reason there is none, is visible without scrolling. Hawksmoor, Big Mamma, Roberta’s and Les Jardins de la Livrée do it with a labeled button.
• Icons and fixed tabs are tested at 390 pixels. Le Train Bleu’s calendar icon has no label and Hiltl’s tabs shrink to slivers: if you use either, check that a first-time visitor understands it.
• Buttons are large enough to tap. The web.dev guidance on tap targets suggests about 48 by 48 pixels with some space around them, and Roberta’s four buttons show what that looks like.
• The phone number is a call link. At Les Jardins de la Livrée the Book buttons and the number itself dial the restaurant.
• You have run the booking path yourself, from the first screen to the confirmation, on a real phone.

On a desktop screen

• The opening image or video is large and carries one clear action: the ceiling and the booking tab at Le Train Bleu, the cocktails and Book a table at Hawksmoor.
• The header keeps the main paths. At full desktop width Le Train Bleu shows Gift card, Takeaway, Carte & Menu and Booking as labeled tabs, and Hawksmoor keeps a Book a table pill in its header at every width.
• People appear next to the room and the plate: Les Jardins de la Livrée introduces the two people who welcome and cook, and Big Mamma opens on its cooks.
• Groups, events and gifts are one click from the home page, as at Hawksmoor and Big Mamma.

On both

• The phone and desktop versions hold the same content. Google uses the mobile version to index and rank, so text, headings and image descriptions that exist only on the desktop version do not count.
• The pages are fast. The Core Web Vitals targets are a largest contentful paint within 2.5 seconds, an interaction to next paint of 200 milliseconds or less and a layout shift of 0.1 or less, measured at the 75th percentile of visits and reported for mobile and desktop separately. Opening videos and large dish photos are the usual cause of a slow restaurant home page.
• A looping video can be paused or muted: Roberta’s shows a Pause control and Big Mamma a sound toggle.
• Every photo has a description and fixed dimensions, so the text does not jump when it loads.
• Hours, address, phone, menus and rules are written as text on the page, not only inside an image or a file. Da Enzo al 29 puts its hours next to its no-reservations statement.
• Anything time-limited carries a date and is removed when the date passes: a Christmas offer, a Sunday special, a countdown to a new opening.
• A language switch stays in the header, and each language version is a page of its own.

Other websites for hotels and tourism

A restaurant is often part of a larger property or a trip. For more restaurant examples, see our guides to restaurant website examples and gourmet restaurant websites. For the same exercise on other kinds of business, see our guides to spa and hotel spa websites, designing a hotel, bed and breakfast websites, villa websites and resort websites. The French article Site internet de restaurant : 5 exemples commentés covers restaurants in France, and the page Création de site pour restaurant explains how we build such a site.

Questions about restaurant website design