Restaurant website design: the reserve button

A restaurant website is often built on a laptop by someone who knows the room. On a phone, the first screen stacks a photo, a welcome line, a cookie notice and the header. The notice can sit across the bottom of the screen, and the reserve or order button sits under it, so the diner sees the label and cannot tap it. Hours often sit in the footer, which may still show last month's schedule. A menu saved as a PDF is hard to scan for prices on a phone. Each one sends a hungry visitor to the next restaurant in the list.

• On a phone at lunch, can you read the hours without scrolling to the footer?
• Does a cookie or consent banner cover the reserve or order button?
• Is the menu text on the page, or a PDF that is hard to read on a phone?
• Does the reservation form offer a party of six, or stop at four?
• If ordering goes to another site, does its name and logo match yours?

The first screen of a restaurant site has a short job: tell a hungry person that the place is open, where it is and what they can do next. The photo usually takes most of it. A cookie or consent banner, if you have one, arrives at the same moment. On a phone the banner can cover the bottom of the screen, which is where the reserve button often sits. Look at the hours and the button on a phone with a fresh browser, so the banner shows. If you cannot read the hours or tap the button with the banner open, a diner cannot either.

Two details lose the diner after they have already decided to come. A menu saved as a PDF makes the diner open a separate file, which is harder to scan for prices than text on the page. A menu typed into the page can be read, searched and shared. The reservation widget is the second place. Some widgets list party sizes in fixed steps, such as one to four and then eight. A group of six sees no option that matches and assumes the restaurant does not take them. Select the largest group you seat and check that the widget offers it.

Many restaurants send online orders to a third-party ordering page. That page may carry a different name, a logo the diner does not recognize and its own hours. A diner who taps Order and lands on an unfamiliar name may stop, unsure whether they are still in the right place. The same is true of a reservation tool that opens in a pop-up window. Tap your own order link from a phone and check the name, the hours and the menu on the other side. Note the step where the page changes, because that handoff is where a diner decides whether to trust it.

Restaurant sites change with the seasons, the holidays and the staffing. A new menu file, a holiday hours notice or a new ordering link can move the reserve button, the hours or the party sizes. Run the same diner after each change, and check the first screen with the banner open. A changed menu file is enough to bring back a problem you had already fixed.