QR menu design is not a PDF on a phone

When venues first moved their menus onto QR codes, many took the quickest route: they scanned or exported the printed menu as a PDF and linked the code to it. It worked, in a sense. Guests could see the menu. They could also pinch, zoom, scroll sideways, squint at tiny text in two columns and lose their place every time they moved.

A printed menu is designed for a large page held in two hands. A phone is a narrow screen held in one. QR menu design means designing for the phone: a layout that fits the screen, type that can be read at a glance, photographs that help and load quickly, and a structure guests can move around with their thumb. This guide covers why a PDF fails on a phone, and the six design choices that make a digital menu pleasant to read and easy to use. Every figure in it is an example.

A PDF is a fixed page. Whatever size it was designed for, an A4 sheet or a folded menu, it stays that size on a phone. To read it, the guest must zoom in until the text is legible, then move the page around to read each line, each column and each section in turn.

That is slow and frustrating. Two-column layouts, which work well on paper, become a maze on a phone: the guest zooms into one column, reads down, then has to find the top of the next. Small type, which is fine on paper held at reading distance, becomes unreadable without zooming.

PDFs are also slow to load, because the whole document must download before anything appears, and they are hard to update, because every change means making and uploading a new file. Our guide to the menu on your website, not in a PDF covers why a live menu page beats a PDF everywhere, not just at the table.

A phone needs a menu that adapts to the screen rather than one that forces the screen to adapt to it. Text should flow to fit the width, in a single column, at a size that is readable without zooming. Sections should be reachable with a tap. Photographs should fit the screen and load quickly.

This is the principle behind responsive web design: pages that rearrange themselves for the screen they are viewed on. A responsive digital menu looks right on a small phone, a large phone and a tablet, without the guest doing anything.

The six choices below turn that principle into a menu guests enjoy using.

The first choice is the menu layout itself. On a phone, the menu should be a single column, reading from top to bottom, with each dish taking the full width of the screen. Two columns side by side on a phone means each column is too narrow to read comfortably.

Within the column, give each dish a clear block: the name, the description, the price and any marks, in the same order every time. Guests learn the pattern in the first few dishes and can then scan the rest quickly.

Keep enough space between dishes and between sections that guests can tell where one ends and the next begins. On a narrow screen, white space does the job that columns and borders do on paper. Our guide to menu layout: one page, two columns or a folder covers the printed version of the same decisions.

The second choice is how guests move around the menu. On paper, guests can see the whole menu at once and jump to any section with their eyes. On a phone, they see only a few dishes at a time, so they need a way to jump.

Section tabs at the top of the screen, always visible as the guest scrolls, are the most common answer. A guest can tap "Mains" or "Wine" and go straight there, without scrolling past everything above. Tabs should be large enough to tap easily and named in words guests understand.

A search box helps guests who know what they want, and filters help guests with dietary needs rule out dishes quickly. Our guide to a digital menu that loads before the drinks do covers the three taps rule: any dish within about three taps.

The third choice is menu typography: the typefaces, sizes and weights that make text readable on a phone. Small screens, held at arm's length in dim dining rooms, need larger text than many designers expect.

Use a clear typeface for dish names and descriptions, at a size guests can read without zooming. A display typeface can work well for section headings and the venue's name, where its character adds to the feel of the menu, but it should not be used for the text guests need to read quickly.

Use weight and size to separate dish names from descriptions, rather than colour alone. Keep contrast strong: dark text on a light background, or light text on a dark background, never mid-grey on grey. And avoid long passages in capitals or italics, which slow reading on a small screen.

The fourth choice is photographs. QR menu photos can help guests choose, especially for dishes that are hard to picture from a description, and a menu with good photographs often feels more inviting than one without.

But photographs are also the heaviest part of the menu, and too many make it slow and cluttered. Choose them deliberately: the dishes you most want to sell, the dishes guests ask about most, and the dishes that look as good as they taste. A photograph for every dish, including a plain side salad, adds weight without adding much.

Keep photographs honest, well lit and cropped to show the dish clearly. Size them for a phone screen so they load quickly. And make sure each photograph matches the dish as it is served today; a photograph of last season's version disappoints guests when the plate arrives.

The fifth choice is how prices and options appear. On a phone, the price should sit with the dish, in the same place for every dish, so guests can find it without searching. Some menus put it after the name, some on the right of the dish block; either works if it is consistent.

Options need care on a small screen. A dish with sizes, extras or required choices should show them clearly when the guest opens the dish, with the price of each option visible as it is chosen. Required choices should be obvious, and optional extras clearly optional.

Decide whether to show currency signs. Many menus leave them out to keep prices quieter on the page; as long as the currency is obvious from the venue, nothing is lost. Our guide to menu descriptions that sell without adjectives covers the words that sit beside the price.

The sixth choice is the look of the menu: the colours, typefaces and details that make it feel like the venue rather than a generic template. A digital menu that looks like every other venue's tells guests nothing about the place they are in; one that carries the venue's own character feels like part of the experience.

Use the venue's own colours and typefaces where they work on a phone, its logo at the top and perhaps a small detail, a pattern or an illustration, that echoes the printed menu or the room. Keep it restrained: the look should frame the food, not compete with it.

Some venues offer a dark version of the menu for evening service, which can be easier on the eyes in a dim room and suits some venues' character. Whatever the look, test it at a table in the light guests will actually use it in.

Allergen and dietary information is often clearer on a phone than on paper, because it can sit inside each dish rather than crowding the page. A short mark beside the dish name, with the full information a tap away, keeps the menu readable while making the information easy to find.

Filters make it more useful still. A guest who needs to avoid an allergen, or wants only vegetarian dishes, can filter the menu and see only what suits them. But a filter is only as good as the information behind it, so the allergen and dietary details must be accurate and up to date.

Include a short note reminding guests to tell their server about allergies, because a filter cannot know about cross-contact in the kitchen or a guest's particular needs.

Descriptions on a phone should be shorter than many printed descriptions, because long paragraphs are hard to read in a narrow column. Lead with the most important words, the main ingredient and the method, so a guest skimming the list understands the dish from the first line.

If a dish needs more detail, put it behind a tap: the full description, the ingredients and the allergens in the dish's own view. The list stays short and scannable; the detail is there for guests who want it.

Keep descriptions consistent in length and style across the menu, so the list looks orderly and guests can compare dishes easily.

A digital menu can do something a PDF cannot: change during service. Dishes that have sold out can be marked or removed at once, specials can be added for the evening and prices can be updated without reprinting anything.

Design for those changes. A sold-out dish can be shown as sold out rather than disappearing, so guests who saw it earlier understand what happened. Specials can sit in their own section near the top, where guests see them first. And every change should happen in one place and reach every version of the menu.

A digital menu that is always current is one of the strongest reasons for guests to use it. A digital menu that still offers yesterday's specials is one of the strongest reasons for them not to.

Test the menu the way guests use it: on a phone, at a table, in the evening light, with one hand. Try finding a particular dish, a vegetarian main, the house white, a dessert to share. Note every moment of hesitation, every bit of text you have to squint at, every button you miss.

Test on several phones, including a small, older one, because not every guest has the latest model. Test on mobile data at the back of the room, not only on the office wifi. And ask a few people who have never seen the menu to use it while you watch, without helping.

Watch how guests use it once it is live, too. If many guests open the menu but few go past the first section, or guests keep asking servers questions the menu should answer, the design needs another look.

Most venues keep a printed menu alongside the digital one, for guests who prefer paper and for the table on the night the wifi fails. The two should share their content, the same dishes, descriptions, prices and allergens, while each has a layout suited to its medium.

The printed menu can keep its columns, its generous page and its careful typography. The digital menu takes the same content and lays it out for a phone. When a dish or a price changes, it should change in both at once, from the same source, so they never disagree.

Our guide to the QR code menu, five years on covers what has worked for venues using both, and our guide to the table QR code: sticker, stand or menu card covers how guests find the digital one.

Good QR menu design works for guests who use their phones in different ways. Guests who enlarge text on their phones should see the menu grow with it, not break. Guests using screen readers need clear headings, labelled buttons and dish names read in a sensible order.

Never rely on colour alone. A dish marked vegan only by a green leaf is hard to read for guests who do not see colour well; add a letter or a word. Keep tap targets large, contrast strong and motion to a minimum, because animations that look smooth to one guest can be distracting or uncomfortable for another.

Drinks lists can be long, and on a phone a long list is hard to browse. Group drinks clearly, by type, by colour of wine or by style of cocktail, and let guests jump between groups with tabs, just as they do between food sections.

Show what guests need to choose: the size or measure, the price for each size, and for wine, a word or two on the style. A wine list of fifty bottles is easier to use on a phone when guests can go straight to the reds and see a short note beside each.

Set menus and tasting menus need their own design on a phone. Show the price and what it includes first, then each course in order, with any choices within a course clearly marked. Guests should understand the whole offer before they read the detail.

If a set menu has supplements, such as a premium main for an extra charge, show them clearly beside the dish, so guests are never surprised on the bill.

An invented bistro's QR code opens a PDF of its two-column printed menu. Guests zoom and scroll sideways to read it, servers explain the dishes at most tables, and many guests ask for the paper menu instead.

The bistro replaces the PDF with a live digital menu laid out for phones: a single column, section tabs at the top, a search box and filters for dietary needs. Dish names use a clear typeface at a comfortable size, with the bistro's own display typeface for section headings. Photographs appear for ten dishes, resized for phones. Each dish shows its price in the same place, with options and allergens a tap away.

Within a few weeks, far more guests use the digital menu, fewer ask for paper, and servers spend less time explaining. Guests begin opening the dessert section on their own, and dessert orders rise a little.

In servearound, the menu guests open from a table's QR code, or the venue's menu page, is a live page laid out for a phone, not a PDF, with category tabs, search, filters for dietary needs and allergens, and each dish's photographs, options, ingredients and tags a tap away. The same dishes, descriptions and prices feed the venue's print designs and digital menu boards, so print and digital never disagree.

The digital menu's look is the venue's own: typefaces for headlines and reading, how dish names sit, card styles, category tabs, a line or dots between a dish and its price, dividers between dishes, numbered dishes, price colours and whether the currency sign shows, with art across the top or a pattern under the page. Changes are published when they are ready, and each published version is kept. See the menus module.

It is a fixed page, so guests must zoom and scroll sideways to read it. It is also slow to load and hard to update.

A single column that flows to fit the screen, with each dish in a clear block and space between dishes and sections.

With section tabs that stay visible as they scroll, plus search and dietary filters, so any dish is a few taps away.

Large enough to read without zooming, at arm's length, in the dining room's evening light. Test it at a table.

No. Use photographs for the dishes where they help most, resized for phones, so the menu stays fast and uncluttered.

In the same place for every dish, with option prices shown as guests choose them.

Use your own colours, typefaces and a restrained detail or two, while keeping the text readable and the food the focus.

As short marks beside dishes, with full details a tap away, plus filters and a note asking guests to tell their server about allergies.

Many venues keep one for guests who prefer paper. Keep both fed from the same content so they never disagree.

QR menu design is not a PDF on a phone. A PDF is a fixed page that makes guests zoom, scroll sideways and squint; a phone needs a menu that flows to fit the screen. Six choices make the difference: a single-column menu layout, navigation with tabs, search and filters, menu typography sized for small screens and dim light, QR menu photos used sparingly and sized for phones, prices and options shown consistently, and a look that is recognisably your venue.

Put allergen marks beside dishes with detail a tap away, write short descriptions that lead with the dish, keep sold-out dishes and specials current during service, and test the menu on real phones at real tables in the evening light. Keep print and digital fed from the same content, so guests who prefer either get the same, accurate menu.