A restaurant menu page works on phones when the menu is real text on the page, not a PDF or a photo. Lay it out in one column, in short sections that follow the order of a meal, with a row of links that jump to each section, and give every dish a name, a one-line description, a price and any dietary markers, explained in a key at the top. Set descriptions at 16px or larger with strong contrast, and update the page the same day the printed menu changes.
This guide covers only the menu page. For the rest of the site (hours, location, booking, photos and your Google listing), see our list of restaurant website must-haves. If you'd rather have the layout done for you, FNJ's AI builder for restaurant websites designs the menu page at phone width as well as tablet and desktop.
Text vs a PDF vs a photo of the menu
The quickest way to get a menu online is to upload the printed one as a PDF or snap a photo of it. It's also the version that works worst on a phone.
| Text on the page | Photo or image | ||
|---|---|---|---|
| Reading on a phone | Reflows to fit the screen | Pinch, zoom and scroll sideways | Pinch and zoom, often blurry |
| Opening it | Instant, part of the page | A download or a separate viewer | A large file on mobile data |
| Search engines | Read every dish and price | Indexed as a separate file, if at all | Text in images is hard to read |
| Screen readers | Read it in order | Depends on how the PDF was made | Nothing to read without a full text version |
| Browser translation | Works with the translate button | Often doesn't | Doesn't |
| Changing a price | Edit one line | Re-export and re-upload | Reprint and re-photograph |
A PDF still has a place: a print-ready version of a group menu, a catering list or an event package. Offer it as a secondary link at the bottom of the text menu, labeled with the file type and size so nobody taps it by surprise: "Group menu (PDF, 300 KB)".
Structure the page the way people order
Follow the order of the meal
Arrange sections the way people order: snacks or small plates, starters (or appetizers), mains, sides, desserts, then drinks. Keep section names plain. "Mains" works. "From the Fire" makes people guess, unless you add a plain subtitle underneath ("Grilled meat and fish").
Keep separate menus clearly separate
If lunch, dinner, brunch and drinks are genuinely different menus, put a row of buttons at the top (Lunch, Dinner, Brunch, Drinks) and say when each is served, such as "Dinner, Tuesday to Saturday, 6–10 pm". Give each menu its own address, either a separate page or a section with its own anchor, so you can send someone a direct link to the brunch menu. If the menus mostly overlap, use one menu and mark the exceptions ("dinner only").
Add a jump bar to long menus
Once a menu runs past a few phone screens, add a row of section links near the top (Starters, Mains, Desserts, Drinks) that jump to each heading. Make each link a comfortable target for a thumb, not a tiny line of text.
Don't collapse everything
Accordions look tidy, but they hide prices and make people open and close sections to compare dishes. Leave the food sections open; collapsing suits a long wine list, where most guests want one category.
Anatomy of a menu item
Each dish needs four things: a name, a short description, a price and its markers.
Charred hispi cabbage · 9
Miso butter, crispy shallots, sesame · V
Guidelines that hold up:
- Name first, in bold or a size up. It's what people scan for.
- One line of description, roughly 6 to 15 words. Name the ingredients that define the dish and anything a guest wouldn't expect, such as heat, raw fish or nuts.
- Cut empty adjectives. "Delicious" and "mouth-watering" take space and tell nobody anything. "Braised for eight hours" is a detail; "delicious" is a claim.
- Explain unfamiliar names briefly: "Tteokbokki (spicy rice cakes)".
- Put variants on the same line: "Small 8 / Large 14", or "Add grilled chicken +4".
- If you use "MP" for market price, explain it in the key and say how guests can find today's price.
Prices: show them, and format them the same way
Show prices on the web menu. A menu without prices sends people to review sites to guess, and some will guess high and go elsewhere.
- Put the price right after the dish name, on the same line. On a narrow screen, dotted leader lines running to a right-aligned price break awkwardly when a long name wraps; a price that follows the name always stays attached to its dish.
- Pick one format and stick to it: "9", "9.00" or "$9", not a mix.
- Explain charges added to the bill, such as a service charge, cover charge or tax, at the top of the menu rather than in small print at the bottom.
- Check local rules on price display. Whether prices must include tax or service varies by country and region. This is general information, not legal advice.
Dietary labels and allergens
Clear dietary markers save guests and staff a lot of questions.
- Use a small set of markers, such as V (vegetarian), VG (vegan), GF (gluten-free) and N (contains nuts). Five or six is plenty.
- Put the key at the top of the menu, not only at the bottom where people find it after they've chosen.
- Use letters or words, not color alone. A green dot means nothing to a color-blind guest or a screen reader. The W3C's guidance on use of color explains why color should never be the only signal.
- Be precise about what a marker promises. If your kitchen can't prevent cross-contact, say "made without gluten-containing ingredients" rather than implying a guarantee, and add a line asking guests to tell staff about allergies.
- Know your obligations. Many countries regulate how food businesses declare allergens, and the rules differ. Check the requirements where you operate; this is general information, not legal advice.
Readable type on a phone
Design the menu at a phone width of about 390px first, then check it on tablet and desktop.
- One column on phones. A two-column menu becomes two strips of tiny text on a narrow screen.
- Descriptions at 16px or larger, dish names a step bigger or bolder, section headings clearly larger again.
- Strong contrast. Thin text on a tinted or textured background is hard work on a small screen. WCAG asks for a contrast ratio of at least 4.5:1 for normal text.
- No script fonts for dish names. Save decorative type for the page heading, if you use it at all.
- Room between dishes, so each one reads as a unit with clear space before the next.
- Don't disable zoom. Some guests will want to enlarge the text, and the page should let them.
Photos on the menu page
A menu page isn't a gallery. Add a few compressed images of signature or unfamiliar dishes, never let one push the first prices off the first screen, and give each alt text that names the dish.
Keeping the menu current
The menu changes more than any other page, so the update routine matters as much as the design.
- One person owns it and updates the web menu the same day the printed menu changes.
- Retire old copies. Delete outdated PDFs from your site rather than just unlinking them, since search engines can keep showing an old file.
- For dishes that change daily or weekly, use a short "This week" section at the top instead of rewriting the whole menu, or label the page honestly: "Our menu follows the seasons; this is a recent example."
- Long-gone dishes come off. If something has been unavailable for a month, remove it.
- Check it on your phone after every change. A long new dish name can break a line you didn't expect.
Make the menu easy to find
Give the page a plain search title, such as "Menu | [Restaurant name], [neighborhood]", and a description that names your cuisine. Use a real heading for each section so search engines and screen readers understand the structure. Schema.org's Menu and MenuItem types are an optional extra; clear visible text matters more.
Menu page checklist
- Menu as text on the page; any PDF only a secondary download
- Sections in meal order, plain names, a jump bar if it's long
- Separate menus labeled with when they're served, each with its own link
- Every dish has a name, a one-line description and a price
- Consistent price format, extra charges explained at the top
- A few dietary markers, keyed at the top, never color alone
- One column on phones, 16px descriptions, strong contrast, zoom left on
- A few compressed photos with alt text, none pushing prices down
- One owner and a same-day update routine
For a broader pass over the whole site, our website accessibility checklist covers headings, link text and keyboard use.
Designing your menu page with FNJ
FNJ's AI website builder designs a restaurant site, menu page included, at phone, tablet and desktop widths from your description and a reference you like. Paste in your current menu and ask for a menu page; you can then change dishes and prices on the canvas or by asking in plain words ("move desserts above drinks", "add a GF marker to the risotto"). There's no CMS, so publishing a change means exporting the site again, or pushing it to a branch of your GitHub repository and merging it so a Git-connected host redeploys (see how code export works). Start with FNJ's AI website builder for restaurants.
Frequently asked questions
Should a restaurant menu on a website be a PDF?
Not as the main version. Put the menu on the page as text so it fits phone screens, loads instantly and can be read by search engines and screen readers. Offer a PDF only as a secondary download for things like group or catering menus.
What should each dish on an online menu include?
The dish name, a one-line description of its defining ingredients, the price and any dietary markers. Keep descriptions to roughly 6 to 15 words and cut empty adjectives like "delicious".
How should dietary labels be shown on an online menu?
Use a small set of letter markers such as V, VG and GF, explain them in a key at the top of the menu, and never rely on color alone. Be precise about what each marker promises, and invite guests to tell staff about allergies.
What font size should a restaurant menu use on a phone?
Aim for descriptions of at least 16px, with dish names larger or bolder and section headings larger again. Keep strong contrast and avoid script fonts for dish names so the menu stays readable outdoors.
How often should a restaurant update its online menu?
Every time the printed menu changes, on the same day. Give one person responsibility for it, and use a short "This week" section for dishes that change often.