Restaurant Menus Online: HTML Pages vs PDFs

Three ways to put a menu online

Phones

A printed menu is designed for a page held at arm's length. Shrunk to a phone screen, it becomes small text that has to be pinched and dragged around. An HTML menu reflows to the width of the screen, so the text stays readable and prices line up with dishes. On a phone, that difference is often the difference between a guest reading your menu and a guest giving up.

Accessibility

Screen readers read text. A photo of a menu contains no text at all, and a PDF exported from a design program may not either unless it was prepared carefully. WCAG 2.2 requires text alternatives for non-text content and content that can be presented in different ways without losing information ^[1]. An HTML menu with a heading for each section and prices in text meets those needs naturally. The Department of Justice's guidance on web accessibility applies to businesses open to the public, including food and drink establishments ^[2]. Our ADA guide has more.

Search

Google lists Adobe Portable Document Format (.pdf) among the file types it can index ^[3], so a PDF menu can appear in search. But an HTML menu sits inside your site, shares its navigation and booking buttons, and is easier to link from your Google Business Profile. Google's local business structured data has a menu property for "the fully-qualified URL of the menu" ^[4], and an HTML menu page is a clean address to point it at.

Updates

A PDF menu has to be edited in a design program, exported and uploaded each time something changes. That process is slow enough that menus fall behind. An HTML menu can be edited directly: change a price, hide a sold-out dish, add a special. When the menu on the site matches the menu in the room, guests are not surprised by the bill.

Notices that must stay visible

Some menus carry required notices. Chains of 20 or more locations under the same name that offer substantially the same menu items, and restaurants that register voluntarily, are covered by the FDA menu labeling rule, which includes "menus on the Internet" and requires a set calorie statement ^[5]. Massachusetts requires a fixed food allergy notice on menus, and its health department counts online menus as printed menus ^[6]. California's rules call for a mandatory fee and its purpose to be shown on menus that display prices, and Massachusetts guidance asks for fees inside menu prices ^{[7] [8]}. These notices are easier to keep in the right place on an HTML page than inside a separate PDF file.

How to structure an HTML menu

1. One section per service. Brunch, lunch, dinner, drinks and desserts, each with its own hours.
2. A short jump list at the top. So a guest looking for drinks can skip straight there.
3. Clear headings. Each category is a heading, which helps screen readers and search engines.
4. Dish, description, price. Keep descriptions short and line prices up.
5. Dietary marks explained in text. A small legend at the top, with words, not only icons or colors.
6. Notices near the top. Allergen statements, consumer advisories, fee disclosures and calorie statements where they apply.
7. A booking or ordering button. The menu page is where many guests decide.
8. A print view. Styled for paper, so you never need a separate PDF.

When a PDF still makes sense

PDFs have a place for documents that are meant to be downloaded and kept: an event package, a catering order form or a wine list with hundreds of bottles that guests browse at leisure. Even then, offer the key information on an HTML page first and the PDF as an extra.

If you do publish a PDF, export it with a real text layer, give it a meaningful title, and update it at the same time as the HTML menu.

Moving from PDF to HTML

Converting a menu is mostly careful copying: transferring the text accurately, setting up the sections and checking every price. Our menu page design service covers the conversion and the editing tools.

Frequently asked questions