Restaurant website design that converts bookings

Decide what the site is for before anyone opens a design toolLink

A restaurant website has one job: turn a curious phone visitor into a booked table.

Most restaurant websites fail because they were briefed as a brochure. They open with a full-screen video, hide the menu behind an animation, put the address in the footer and treat booking as a link in a burger menu. Meanwhile the visitor is standing on a pavement with four per cent battery, trying to find out whether you are open and whether you have a table at seven.

Write the brief as a list of questions a guest needs answered in under ten seconds: what kind of food, how much, are you open, where are you, can I book. Every design decision then becomes easy to judge — it either speeds that up or it does not.

• Cuisine and price level clear from the first screen.
• Today's opening hours, including the kitchen, visible without scrolling far.
• Book a table reachable from every screen on mobile.
• Address with a tap-to-directions link and a tap-to-call number.

Design for a phone on a slow connectionLink

Three quarters of restaurant traffic is mobile, and much of it is impatient.

Restaurant browsing happens in transit, often on a patchy signal, frequently within an hour of eating. That makes weight and speed a commercial issue rather than a technical one: every extra second before the page is usable loses a share of visitors, and the ones you lose are the ones closest to booking.

Practically, that means compressed and correctly sized images, no autoplaying hero video, real text instead of pictures of text, and tap targets a thumb can hit. Test on an actual mid-range phone on mobile data, not on a designer's desktop over office wifi.

• Largest image on the page under 200KB, served in a modern format.
• No full-screen video hero; a still photograph converts as well and loads instantly.
• Sticky booking button on mobile, thumb-height and always visible.
• Readable body text at 16px or larger, with real contrast.

Put the menu on a page, never in a PDFLink

The menu is the most visited page on a restaurant site. Treat it accordingly.

PDF menus are the single most common and most expensive mistake in restaurant web design. They pinch-zoom badly on phones, are largely invisible to search engines, cannot be read aloud by assistive technology, and go stale because updating them is a chore that requires the designer.

Publish menus as ordinary web pages with headings, dish names, descriptions, prices and dietary markers as text. Give each distinct menu its own page — à la carte, set lunch, Sunday, tasting, kids, drinks — so each can rank for the search that matches it and be linked directly from social posts and ads.

• One page per menu, each with its own title, URL and photography.
• Prices and dietary information as text, kept current by someone in the business.
• Menu and MenuItem structured data so search engines can display dishes and prices.
• A booking call to action at the bottom of every menu page.

• The full argument is in the menu SEO guide

Shorten the booking path to as few taps as possibleLink

Most lost bookings are lost between the button and the confirmation.

Count the taps from your homepage to a confirmed table. If it is more than four, you are leaking covers. The usual culprits are a booking widget that loads slowly in an iframe, a date picker that defaults to a month away, required fields nobody needs, and a mandatory account before a first-time guest can reserve anything.

Keep the widget on your own domain, default to today and the next available time, ask only for what service genuinely needs, and be honest about deposits and cancellation up front rather than at the last step. If you take large-party or event enquiries, give those their own short form instead of pushing them through the table widget.

• Booking widget embedded on your own site, not a redirect to a third-party page.
• Sensible defaults: today, next available slot, most common party size.
• Deposit and cancellation terms stated before the guest enters card details.
• A separate enquiry form for private hire, large groups and events.

Use real photography and real proofLink

Guests are deciding whether this is somewhere they want to sit.

Stock imagery reads as a warning. Commission a half-day shoot of the food you actually serve, the room as it looks when it is full, and the team — then refresh it seasonally. Photograph the dishes people order most, not only the ones the chef is proudest of.

Alongside the pictures, show current evidence: recent review quotes with their source, awards with dates, and press coverage that is still relevant. Do not mark up review ratings you cannot verify on your own site; it breaches search guidelines and risks manual action.

• Real photography of the dishes, room, garden and team, updated each season.
• Descriptive alt text on every image so the page is accessible and indexable.
• Recent review quotes attributed to the platform they came from.
• Awards and press dated, so nothing looks like it is from 2019.

Build it so search engines and AI answers can read itLink

Design and discoverability are the same project, not two phases.

A beautiful site that search engines cannot parse simply costs you the traffic a plainer one would have earned. Restaurant sites need the basics done properly: one clear H1 per page, unique titles and descriptions, server-rendered content rather than text that only appears after JavaScript runs, and structured data for the restaurant, its menus, hours, price range and FAQs.

Increasingly it also needs to be readable by AI answer engines, which quote sites that state facts plainly — cuisine, hours, location, price range, booking policy — in text near the top of the relevant page. Accessibility work pulls in the same direction: proper headings, labels, contrast and keyboard navigation help every reader, human or machine.

• Server-rendered pages, unique titles under 60 characters, descriptions of 140 to 160.
• Restaurant, Menu, OpeningHours and FAQPage structured data.
• Location pages for each site if you run more than one venue.
• Accessibility basics: labels, contrast, focus states, keyboard navigation.

• We build sites like this — see restaurant web design
• and pair them with restaurant SEO