How to design a digital menu that reads well on mobile

A menu on a phone should answer three questions quickly: what is available, what does it include and how much does it cost? Photography and colour help when they support those answers. If guests have to hunt for prices or guess what a dish contains, appearance alone is not enough.

Start with the information structure, then move to decoration. The following process works for restaurants, cafés and hotels when adapted to the way the venue actually operates.

Use category names people recognise

“Coffee”, “Breakfast”, “Salads” and “Cocktails” help visitors predict what they will find. A creative name can add character, provided it does not require decoding before someone can locate a drink or dish.

Avoid placing everything in a large “Other” category. If a section becomes unwieldy, consider whether it contains clear subgroups. Keep the hierarchy shallow and understandable: choosing a drink should not require opening several levels of navigation.

Keep the information order consistent

Use the same pattern for each product: name, short description, available option or size, and price. If quantities or units vary, make clear what the displayed price covers.

A hypothetical example is “Homemade lemonade — 300 ml”, followed by the actual ingredients and the correct price. “Homemade” belongs in the description only if it accurately describes the product. A consistent structure also makes later updates easier.

Someone checking the menu should be able to compare two similar items without reconstructing the meaning of each listing. Avoid putting the portion size in the title for one item and hiding it at the end of a long paragraph for another.

Write descriptions that help guests choose

A description should add information beyond the product name. Preparation method, main ingredients, portion size or a meaningful difference from a similar option can all be useful.

• Put information that affects the order first.
• Use familiar words and short sentences.
• Avoid repeating adjectives that could describe every product.
• Confirm the wording with the kitchen or bar before publishing it.

Ingredient and dietary information must be accurate. Do not fill gaps by guessing from a dish name or photograph.

Read the menu on a genuinely small screen

Check that paragraphs do not require repeated sideways movement and that larger text does not hide prices. The W3C guidance on content reflow explains why adapting to the available width matters.

Also test category navigation, language selection and the route back to the list. Small controls placed close together are harder to select, especially when someone holds the phone in one hand. A successful desktop review does not replace these mobile checks.

Give images a clear job

Choose photographs that show the actual product and help people understand what they are ordering. Not every item needs a photograph, particularly if the available images are inconsistent or do not accurately represent the portion.

Keep useful information in text as well. A price shown only inside a photograph is harder to update and access in different ways. Check image file sizes over an ordinary mobile connection, too.

Establish a simple update process

Maintain one approved list of products, descriptions and prices. When something changes, record the category and languages affected. Open the public menu after the update to confirm the result.

If you serve international guests, read our guide to translating a menu into English. If you are starting from an existing file, the PDF versus web menu comparison can help you plan the transition.

Try three small tasks

Ask a colleague who did not build the menu to find a coffee, compare two dishes and change the language. Let them work without instructions. Note where they stop or go back.

Those moments identify specific improvements. Make the changes, repeat the exercise and keep the structure that proves easier for the people using it.