Restaurant Website Design That Turns Visitors Into Orders

Most restaurant websites are built to look like the restaurant. The good ones are built to take an order.

That distinction decides where your revenue goes. A visitor who arrives hungry, can’t find the menu in eight seconds, and gives up doesn’t stop wanting dinner. They open a marketplace app and order the same food from you at a 25% commission. Your website didn’t lose a sale. It handed one to an intermediary and charged you for the privilege.

Restaurant website design is, in practice, conversion design with food photography on it. This guide covers what the page has to show, how fast it has to load, how the menu should be built, and where the order button goes. Once those orders start arriving, the physical side of fulfilling them matters just as much, and that’s covered in our guide to restaurant design for takeout and delivery volume.

Key Takeaways

• Design for phones first. Chowly’s analysis of high-converting restaurant sites puts mobile at more than 70% of restaurant website traffic, citing Toast (Chowly, retrieved 2026-09-29).
• Speed is a conversion feature. Google research found that as page load time goes from one second to five seconds, the probability of a bounce increases by 90% (Google, cited by Beyond Menu, retrieved 2026-09-29).
• Publish the menu as real HTML text, never a PDF or a photograph of a menu. PDFs can’t be searched, indexed, read on a phone without zooming, or tapped to order.
• The commission math is why this matters. Third-party marketplaces typically take 20–30% per order while the average independent restaurant runs a 3–5% net margin, so an order routed through an app can erase its own profit.
• Put an ordering action above the fold on every page, sized for a thumb, and keep checkout to the fewest steps that still capture the address.

What a restaurant website has to do in the first five seconds

A restaurant website has exactly four jobs, and a visitor will judge all four before scrolling: show the menu, make ordering or booking obvious, state the location and hours, and convey what the food is actually like.

The story of the founders, the press quotes and the full-bleed video of the dining room at golden hour are all optional, and on a phone it’s often the thing standing between a hungry visitor and the order button.

The reason the bar is this high is that off-premise ordering has become the default rather than the exception. The National Restaurant Association reports that the majority of restaurant occasions now happen off-premise (cited by Beyond Menu). Your website isn’t a brochure for the dining room anymore. For a large share of visitors, it is the restaurant.

Test yours honestly. Open it on your own phone, on cellular rather than the restaurant’s Wi-Fi, and time how long it takes to place an order. If you can’t do it in under a minute, neither can a customer who doesn’t already know where everything is. MenuTiger’s breakdown of what belongs on a restaurant website is a useful checklist to audit yours against.

Mobile-first restaurant website design is the baseline, not an upgrade

Design for the phone and let the desktop layout follow. Doing it the other way round, building a desktop site and shrinking it, produces the compressed, pinch-to-zoom experience that drives people to apps.

With mobile above 70% of restaurant website traffic (Chowly, citing Toast), the phone layout is the real site. Concretely, that means:

• Tap targets large enough for a thumb, with enough spacing that adjacent menu items aren’t hit by accident.
• Body text readable without zooming, which in practice means a 16px minimum.
• Thumb-friendly navigation positioned within reach, rather than a menu icon in the top corner of a large screen.
• A one-tap click-to-call phone number, because a meaningful share of visitors still want to ring.
• An ordering or reservation button visible above the fold without scrolling, on every page rather than only the homepage.

The last point does the most work. A visitor who lands on your “About” page from a search result should be one tap from ordering, not one tap from the homepage and then another from there.

Page speed is a conversion feature, not a technical detail

Slow restaurant sites lose orders before the menu has rendered. Google’s research is the number worth remembering: as load time moves from one second to five, the probability of a bounce rises by 90% (Google, cited by Beyond Menu).

Chowly’s breakdown of high-converting restaurant websites puts the working threshold at sub-two-second load times, with faster being the competitive standard rather than a luxury. Beyond Menu sets a similar bar, recommending menus that load in under three seconds.

What actually slows restaurant sites down is fairly consistent, and most of it is self-inflicted:

• Uncompressed hero photography, often uploaded straight from a camera at several megabytes per image.
• Background video on the homepage, which costs more load time than any other single element and converts nobody.
• Menus delivered as PDFs or image files, which force a second download before a customer can read anything.
• Embedded third-party widgets: review carousels, social feeds and chat bubbles, each adding scripts that block rendering.

Compress the images, drop the video, and the majority of restaurant sites clear the two-second bar without any other work.

Your menu should be HTML text, not a PDF or a photo

This is the single most common failure in restaurant website design, and it’s entirely fixable.

A menu published as real HTML text can be read on any screen size without zooming, indexed by search engines so your dishes show up in searches for them, read aloud by screen readers, and, most importantly, wired directly to an ordering flow so a customer can tap an item into a cart. A PDF does none of that. A photograph of a printed menu does less.

Build the menu page with:

• Clear category organization, so a visitor scanning for entrées isn’t reading through cocktails.
• Visible pricing on every item. Hidden or omitted prices are an abandonment trigger, not an air of exclusivity.
• Simple, obvious modifiers. Confusing modifier flows are one of the most cited reasons customers bail mid-order.
• Accurate availability. A menu listing dishes you stopped serving in spring is worse than no menu.

Keep photography deliberate here. Real food photography placed near ordering actions supports the decision; a gallery of every dish slows the page and pushes the order button further down. For a wider view of how the menu page fits the rest of the site, MenuTiger’s guide to building a restaurant website walks through the full page structure.

Where the order button goes

Above the fold, on every page, in a colour nothing else on the site uses.

The ordering action should be the most visually prominent element on the page, and it should not move. Persistent ordering access, meaning a button that stays reachable as the visitor scrolls the menu, removes the most common friction point, which is deciding to order halfway down a long menu and then having to hunt for how.

A few rules that hold across most restaurant sites:

• One primary action per page. If “Order Online,” “Book a Table” and “Join Our Newsletter” are all styled as primary buttons, none of them is.
• Label it with the verb the customer is thinking. “Order Online” and “Order Pickup” outperform “Get Started.”
• Don’t bury it behind a menu download. The path from menu item to cart should have no intermediate page.
• Repeat it at the end of the menu, where a decided customer is looking for it.

Designing checkout so people finish the order

Checkout is where a designed site and a pretty site separate. Everything before this point generated intent; this is where intent turns into revenue or evaporates.

The abandonment triggers are well documented and mostly avoidable: forced account creation, hidden fees appearing at the final step, excessive checkout steps, cluttered screens, and no confirmation that the order actually went through (Beyond Menu).

Build against each of them:

• Offer guest checkout. Requiring an account before a first order is the highest-friction thing a restaurant site can do.
• Show the full price early, including delivery and service fees. Surprise fees at step four cost more orders than the fees themselves ever earn.
• Support saved payment methods and contact auto-fill for returning customers, which is what makes a second order nearly frictionless.
• Use a visible progress indicator, so a customer on a phone knows how many steps remain.
• Confirm immediately and clearly, with an order summary and a realistic time estimate. Reassurance after payment is what produces the confidence to order again.
• Make reordering easy. For a regular, “order my usual again” should be one screen.

Location, hours and phone number are the most-searched details on the site

These are unglamorous and they get looked up constantly. Put them where people expect them and keep them consistent.

Place location and hours in the footer of every page, not only on a contact page. Make the phone number a tappable link rather than plain text. Embed a map rather than describing the cross-streets. And keep holiday hours current. An incorrect hours listing generates a specific kind of customer anger that outlives the visit.

This matters beyond convenience. Hours, address and phone number are the details search engines surface directly in results, and inconsistency between your site and your listings weakens both.

The commission math behind direct ordering

Restaurant website design has a measurable financial argument behind it, and it’s worth stating plainly because it justifies the budget.

Third-party platforms generally charge 20–30% per order, with DoorDash’s marketplace delivery commission ranging from 15% on its Basic plan to 30% on Premier, and Uber Eats in a similar 15–30% band depending on tier. Against an average independent-restaurant net margin of 3–5%, a 25% commission doesn’t reduce the profit on that order. It eliminates it.

The honest version of this argument is not that marketplaces are bad. They bring reach you cannot buy yourself, and a new customer acquired at 25% who later orders directly was worth acquiring. The point is that a regular who already knows your name should never be routed through a commission. Chowly’s analysis, citing Toast, reports that more than 82% of diners express a preference for ordering directly, with over a third specifically preferring a restaurant’s own website or app. The demand for direct ordering exists. The website is what converts it.

Frequently asked questions about restaurant website design

How fast should a restaurant website load?

Under two seconds is the working standard for high-converting restaurant sites (Chowly), and Beyond Menu recommends menus load in under three. The reason is Google’s finding that bounce probability rises 90% as load time moves from one second to five. Compressed images and no background video get most restaurants there.

Should my restaurant menu be a PDF?

No. A PDF menu can’t be indexed by search engines, can’t be read comfortably on a phone, can’t be read by screen readers, and can’t be tapped to add an item to a cart. Publish the menu as HTML text with visible prices and clear categories.

What should be above the fold on a restaurant homepage?

An ordering action, and enough context to know what kind of restaurant this is. Location, hours and the menu link should be reachable without hunting. Full-screen video and long brand narratives push all of that below the fold on a phone.

Is it worth building a website if I already sell on delivery apps?

Yes, on margin alone. Marketplaces take roughly 20–30% per order against a 3–5% typical net margin, so direct orders are disproportionately valuable. The apps are useful for discovery; the website is what stops your existing regulars from arriving through a commission.

How many steps should restaurant checkout have?

As few as capture the order and the address. Offer guest checkout, auto-fill returning customers, show the full price including fees before the final step, and confirm clearly once payment goes through.

Where to start

If you’re auditing an existing site, work in this order: time it on a phone over cellular, convert any PDF menu to HTML text, compress the images, then put a persistent ordering button above the fold on every page. Those four changes fix most of what costs restaurants direct orders, and none of them requires a rebuild.

If you’re starting from nothing rather than auditing, MenuTiger’s walkthrough of setting up a restaurant website covers the groundwork before any of the conversion work above applies.

A redesign is worth it when the underlying platform can’t support HTML menus or native ordering — at that point you’re fighting the tooling rather than the design. Either way, the test stays the same: can a hungry stranger on a phone place an order in under a minute?