Restaurant website design that gets out of the way

A couple standing on a street corner at seven in the evening search for somewhere to eat nearby. They open a restaurant's website on a phone. A full-screen video starts loading, then a pop-up asks them to join the newsletter, then the menu turns out to be a PDF that takes twenty seconds to open, in tiny type. They give up and walk into the place across the road, whose website showed the menu, the address and a "Book a table" button on the first screen. Good restaurant website design gets out of the way.

A restaurant website has a simple job: to help a hungry stranger decide, quickly, whether to come, and then to make it easy to book. Most visitors are on a phone, often in a hurry, and they want a few things: what kind of food, how much it costs, where it is, when it is open and how to book. Every design decision either helps them find those answers or gets in the way.

This guide covers what a restaurant website is for, the design decisions that help, the four fashions that quietly cost bookings and how to test a website the way guests use it. Every venue and figure in it is an example.

A restaurant website is not a brochure or a work of art. It is a tool that turns interest into a visit. People arrive with a question, such as "is this the kind of place we want tonight?", and the website's job is to answer it and then let them book, in as few seconds and taps as possible.

That does not mean the website should look plain. It should look like the venue: its colours, its photos, its voice. But the look serves the job. A beautiful website that hides the menu or the booking button has failed, however much it impressed the designer.

Design that gets out of the way puts the guest's questions first. The first screen says what the venue is, where it is and how to book. The menu is one tap away and readable on a phone. Opening hours and the address are easy to find. Nothing slows the page down or covers it up.

A good test is whether a stranger, handed the website on a phone, can find the menu, the opening hours and the booking page within ten seconds each. If they can, the design is doing its job. If they hesitate, something is in the way.

Design for the hungry stranger: someone who has never visited, is probably on a phone, is often nearby and is deciding between several places. They do not know where your menu is, they will not read long paragraphs and they will leave the moment something is slow or confusing.

Regulars matter too, but they already know the venue and will find what they need. The stranger is the guest the website most has to win, and the one most easily lost.

Most visitors to a restaurant website are on a phone, so the mobile website is the website. Design for the phone first and the desktop second: text large enough to read without zooming, buttons large enough to tap with a thumb, and pages that load quickly on a mobile connection.

The general approach, known as responsive web design, makes a website adapt to the size of the screen. Most modern website tools do this automatically, but check the result on a real phone. A website that looks perfect on a large screen can be awkward and slow on a small one.

The first screen, what a visitor sees before scrolling, carries most of the weight. It should show the venue's name, a line saying what it is, such as "Neighbourhood Italian, open seven days", a photo that shows the food or the room and a clear "Book a table" button.

Everything else can come below. A first screen that answers "what is this place and can I book it?" keeps visitors on the page. One filled with a slogan, a slow video or a pop-up loses many of them before they see anything useful.

The booking button should be visible on every page, and easy to find within a second. On a phone, a button that stays at the bottom or top of the screen as the visitor scrolls means they can book the moment they decide, wherever they are on the site.

Label it plainly: "Book a table" rather than "Reservations" hidden in a menu, or a vague "Visit us". Make it a contrasting colour, so it stands out from the rest of the page. A booking button that is hard to find costs bookings every day.

When a visitor taps "Book a table", the booking page has to open quickly. Booking page speed matters more than almost anything else on the website, because it is the last step before a booking, and the step where impatient guests give up.

Test it on a phone, on a mobile connection rather than the venue's wifi. Count the seconds from tapping the button to seeing available times. If it is slow, or asks for many details before showing whether a table is free, guests will abandon it. Our guide to booking abandonment: where guests give up covers the points where they leave.

Website photos do much of the persuading. A few good photos of real dishes and the real room, taken in good light, tell a visitor more than any description. Use photos of your own food and your own venue, not stock images, which visitors spot at once.

Keep them few and fast. A handful of well-chosen photos, sized for the web so they load quickly, works better than a gallery of fifty. Our guide to food photography on a phone, in a dark room covers how to take them.

The menu is the most visited part of most restaurant websites. Put it on a web page, not in a PDF, so it loads quickly, reads easily on a phone and can be updated in minutes when a dish changes. Include prices, because visitors use them to decide whether the venue suits them.

Keep it current. A menu online that does not match the menu in the room disappoints guests and creates awkward moments at the table. Our guide to the menu on your website, not in a PDF covers why the web page wins.

Opening hours and the address should be easy to find, as text rather than inside an image, so they can be read on any screen, copied and found by search engines. Put them in the footer of every page, and on a short contact or visit page.

Add a link that opens the address in a maps app, so a guest standing on a street corner can find you in one tap. Make sure the hours match those on your Google Business Profile and social media, so guests never arrive at a locked door.

Choose type and colour for reading first, style second. Text should be large enough to read on a phone and dark enough against its background to read in sunlight. Thin, pale or decorative fonts may look elegant on a designer's screen and be unreadable on a phone in the street.

Use the venue's brand colours, consistently, but keep enough contrast between text and background. The booking button should stand out from everything else. A website in the venue's own colours, easy to read, feels both distinctive and welcoming.

The first fashion that costs bookings is the full-screen video on the home page. It looks impressive on a fast computer. On a phone, on a mobile connection, it takes time to load, uses the visitor's data and often hides the information they came for behind a moving picture.

If you want video, keep it short, light and below the first screen, or offer it as something to tap rather than something that plays automatically. The first screen should answer the visitor's questions before it entertains them.

The second fashion is the PDF menu. It is easy to upload, so it remains common, but on a phone it is slow to open, hard to read, impossible to search and often out of date. Many visitors give up before it loads.

Replace it with a menu on a web page. If you also want a printable version, offer the PDF as an extra, not as the only way to see the menu.

The third fashion is the pop-up: a box that covers the page as soon as a visitor arrives, asking them to join the newsletter, take a discount or accept a message. On a phone, pop-ups can be hard to close and can hide the whole page.

A hungry stranger who arrives to check the menu and is met by a pop-up may simply leave. If you want visitors to join a list, offer it calmly at the bottom of the page or after a booking, when they have shown interest, not before they have seen anything.

The fourth fashion is style over legibility: very thin fonts, low-contrast text, navigation hidden behind mysterious icons, pages that scroll sideways or animate as you move. Each choice may look modern, and each makes the website harder to use.

Ask whether every design choice helps a visitor find what they want. If it makes the menu, the hours or the booking button harder to find or read, it is costing you bookings, however fashionable it is.

Most restaurant websites need only a few pages: a home page, the menu, a page for booking, a page about the venue and a contact or visit page with the address and hours. More pages mean more places for visitors to get lost, and more pages to keep up to date.

Keep the navigation short and plainly labelled, with the booking button always visible. Our guide to the restaurant website that only needs five pages covers what each one should contain.

An accessible website works for everyone, including people with poor eyesight, people using screen readers and people on old phones. Good contrast, readable text sizes, descriptions on images, clear link labels and pages that work without fancy effects make the website easier for all visitors, not only those with particular needs.

Accessibility is also good design. A website that a screen reader can navigate is usually one that a hurried visitor on a phone can navigate too.

Every page should load quickly, not only the booking page. Slow websites lose visitors, especially on phones. The usual causes are large images, autoplaying video, too many scripts and slow hosting.

Size images for the web, avoid autoplaying media and remove anything the website does not need. Check the speed on a phone from time to time, because websites tend to get slower as things are added over the years.

Many guests never reach the website. They find the venue on a maps app or a search result and book from there. That makes the website and the Google listing two halves of the same front door, and they should agree: the same hours, the same menu, the same booking link.

Keep both up to date together. Our guide to your Google Business Profile is the real homepage covers the listing that many guests see before the website.

There are two ways to connect a website to a booking page: embed the booking form on the website, so guests book without leaving it, or link to a separate booking page. Embedded booking keeps guests on your site and feels seamless; a link is simpler to set up and to maintain.

Either can work, as long as the booking flow is quick, works on a phone and matches the look of the website. Our guide to online booking on your own site, start to finish covers the set-up.

Test the website the way guests use it: on a phone, on a mobile connection, as a stranger. Time how long it takes to find the menu, the opening hours and the booking page, and to complete a booking. Note anything slow, confusing or hidden.

Ask someone who has never seen the website to try it while you watch, without helping. Where they hesitate is where guests give up. Our guide to eight restaurant website mistakes still common covers what testers most often find.

When redesigning a restaurant website, keep what works. Keep the addresses of pages that people and search engines know, or redirect them to the new pages, so links and search results do not break. Keep the booking link working throughout.

Change one thing at a time where you can, and test after each change. A redesign that looks better but makes booking harder has made the website worse, and it is far easier to catch that in testing than in a month of falling bookings.

Groups and private dining are valuable bookings, and they need a clear route on the website: a short section explaining what you offer for groups, how many you can seat and how to enquire, with a phone number or email that someone answers quickly.

A group organiser comparing several venues will often choose the one that answers first. A website that makes the group enquiry obvious, and a team that replies the same day, wins those bookings.

A website that was right a year ago may be wrong today: an old menu, last season's hours, a photo of a dish no longer served, an event that has passed. Each out-of-date detail makes guests wonder what else is wrong.

Check the website once a month, alongside the Google listing and social profiles: the menu, the hours, the booking link and the photos. A website that is always current is one guests can trust.

The about page is where guests go to learn who is behind the venue: the owners, the chef, the story and what the place cares about. Keep it short, warm and true, with a photo of the people.

Guests who feel they know the people behind a restaurant are more likely to choose it, and to forgive the occasional slow night. A few honest paragraphs and a good photo are enough.

An invented bistro's website opened with a full-screen video, a newsletter pop-up and a menu in a PDF. Its owner tests it on a phone as a stranger: forty seconds to find the menu, and the booking button hidden in a menu icon. The bistro redesigns. The first screen now shows the name, a line about the food, one photo and a "Book a table" button that stays on screen as visitors scroll.

The menu becomes a web page, the pop-up goes, the video moves below the first screen and the hours and address appear on every page with a maps link. A stranger can now find the menu in three seconds and book in under a minute, and the bistro sees more bookings from its own website within weeks.

servearound does not build restaurant websites, but its booking page is designed to sit alongside one. Each venue's booking page runs at its own address on servearound.com and can also be embedded on the venue's own site as a widget, so guests can book without leaving the website, and the booking page editor offers the venue's logo and brand colours, set once under Branding, so the booking page can match the site.

The booking page is built for phones, with party size, a strip of dates, available times as buttons and a short form, and the venue's menu page on servearound.com shows the live menu as a web page rather than a PDF, with a dish taken off as soon as it is marked sold out. Reservation analytics show bookings from the booking page and the embedded widget as separate sources, which shows how many guests book on your own site. See the reservations module and Campaigns.

Helping a hungry stranger decide quickly whether to come, and then making it easy to book.

The venue's name, what it is, a photo and a clear "Book a table" button.

Phones. Most visitors are on one.

As an extra only. The main menu should be a web page.

Not on arrival. Offer sign-ups calmly, at the bottom of the page or after a booking.

Fast enough that guests see available times within a few seconds on a phone.

Either can work, as long as it is quick on a phone and matches the website.

On a phone, as a stranger, timing how long it takes to find the menu, the hours and the booking page.

Restaurant website design should get out of the way. Design for the hungry stranger on a phone: a first screen with the venue's name, what it is, a photo and a "Book a table" button; a booking button visible on every page; a menu as a web page; and the hours and address as text, with a maps link. Make the booking page fast, use a few real photos and choose type and colour that are easy to read.

Avoid the four fashions that cost bookings: full-screen video, PDF menus, pop-ups on arrival and style over legibility. Keep the navigation to a few pages, make the site accessible and fast, keep it consistent with your Google listing and test it regularly on a phone, as a stranger, timing how long it takes to find the menu and book.