SiteSmith

Restaurant menus online: what diners need on their phone

SiteSmith · · 5 min read

The best restaurant menu on a website is a plain text menu on its own page: dish names, short descriptions, prices, and clear marks for common dietary needs, readable on a phone without pinching or zooming. A PDF or a photo of the printed menu is the most common mistake restaurants make online, and it is an easy one to fix.

Why text beats a PDF or a photo

A PDF menu was made for paper. On a phone it opens in a separate viewer, or downloads to a folder the diner never finds, and then needs zooming and side-scrolling to read. A photo of the printed menu is even worse: blurry, tiny, and unreadable for anyone using a screen reader.

A text menu on the page fixes all of that:

  • It reads well on any phone, at any text size the diner has chosen.
  • It loads faster than a large PDF.
  • You can change one price or one dish in a minute, without redesigning a file.
  • Google can read the dishes, so someone searching for "fish tacos near me" can see that you have them. Nobody can promise that will put you at the top, but a PDF hides your dishes from that search altogether.
  • Screen readers can read it aloud for people with low vision.

If you want a printable version for catering or takeout, offer the PDF as an extra link below the text menu, not instead of it. More on the general question in including your price list as a PDF vs a web page.

How to lay out the menu page

Keep the same order as your printed menu, so staff and regulars recognize it:

  • Section headings a thumb can find: Starters, Salads, Pasta, Mains, Sides, Desserts, Drinks
  • One line per dish name, bold, followed by a short description
  • The price at the end of the line or right below it
  • Dietary marks after the name, with a key at the top: V for vegetarian, VG for vegan, GF for gluten-free, or whatever you use

Descriptions should tell the diner what they will get, not show off. "Grilled half chicken, lemon and oregano, roasted potatoes, Greek salad" helps more than "A celebration of the Mediterranean sun". Name the main ingredients and anything that might surprise someone (spicy, contains nuts, raw egg).

If you have separate menus (lunch, dinner, brunch, drinks, kids, happy hour), put them on the same page with a small set of buttons or links at the top that jump to each one, and say the times each menu is served.

Prices: show them

Some restaurants leave prices off the website. Diners almost always want them, to know if this is a weeknight place or a special-occasion place. Showing prices also saves your staff from "how much is the steak?" calls. Keep them current: a diner who reads one price online and pays another at the table feels misled, even if the difference is small.

If prices change often, many restaurants write "Prices may change with the season" at the top, and update the page when the printed menu is reprinted. Market-price items can simply say "market price".

Allergies and dietary needs

People with food allergies and dietary restrictions check the menu before they come, and they often choose the restaurant that makes it easy. What helps:

  • Clear marks for vegetarian, vegan and gluten-free dishes, with a key
  • A note on common allergens in dishes where they are not obvious (nuts in a pesto, fish sauce in a salad dressing)
  • A sentence about your kitchen: "Please tell your server about any allergy. Our kitchen handles nuts, shellfish and wheat, so we cannot promise any dish is free of traces."
  • Whether you can adapt dishes: "Most pasta dishes can be made with gluten-free pasta"

What you say about allergens may also be shaped by local health rules; if you are unsure, check with your local health department.

Specials and seasonal changes

Daily specials and seasonal dishes are a reason to come back, and a reason the menu page goes out of date. Two simple habits:

  • Keep the regular menu as the main page content, and add a small "This week" section at the top for specials, with the date. Remove it when it passes.
  • If specials change every day and you post them on Instagram or Facebook, link to that account from the menu page instead of trying to keep the website current daily.

Seasonal menus should say the season. "Summer menu" in November makes the whole site look abandoned.

Hours, location, and ordering on the same page

A diner reading the menu is close to deciding. Put the next step right there:

  • Hours for each menu (brunch only on weekends, kitchen closes earlier than the bar)
  • The address and a map link
  • "Book a table" linking straight to your reservation service (OpenTable, Resy, Tock or your own)
  • "Order pickup" or "Order delivery" linking to your ordering system or the delivery apps you use
  • The phone number, tappable, for people who prefer to call in an order

If you use a third-party ordering service, open its link yourself regularly. Ordering pages move when services update, and a broken "Order now" button on a Friday is a lost order. If you use your own ordering through a system like Toast or Square, link to that first, before the delivery apps that charge you commission; taking payments on a website without an online store has the general idea.

For the rest of a restaurant site (home page, photos, about and contact), see what a restaurant website needs.

Check your menu page tonight

  • Open your website on your phone. Can you read the menu without zooming?
  • Are the prices the same as on the printed menu?
  • Are vegetarian, vegan and gluten-free dishes marked, with a key?
  • Is there an allergy sentence where people will see it?
  • Does every seasonal item belong to this season?
  • Do the reservation and ordering buttons go to the right place?

If your menu is stuck in a PDF and your builder makes text menus painful, you can see your site rebuilt first with the menu as readable text, then decide.

Keep reading