Mobile website first, because that is the traffic

The new restaurant website was designed on a large monitor, approved on a laptop and launched on a Friday. On Saturday, the owner opens it on her phone for the first time. The navigation has collapsed into a tiny icon, the menu is a wide table she has to scroll sideways, the photo at the top has cropped the chef's head off and the booking button sits under a cookie banner. Most of the website's visitors will see exactly this. A mobile website is not a smaller version of the real one. For a restaurant, it is the real one.

Most people who visit a restaurant website do it on a phone: choosing somewhere for tonight, checking the menu on the way, looking up the address while walking. They are often in a hurry, sometimes outdoors and usually using one thumb. A website designed for a desktop and squeezed onto a phone serves them badly. One designed for the phone first, and then widened for a desktop, serves almost everyone well.

This guide covers why the phone comes first, what guests do on a restaurant's mobile website, the four elements that break on a small screen every time, and what to test on real phones before launch. Every venue and figure in it is an example.

For most restaurants, most website visitors arrive on a phone. That means the phone version is what most guests judge the venue by. A beautiful desktop design that falls apart on a phone has failed most of its audience, however good it looks in the design meeting.

Designing for the phone first changes the decisions. The first screen has room for only a few things, so you choose the ones that matter: the name, one photo, the booking button. The mobile web rewards that discipline, because what fits on a phone is also what a hurried guest wants to see.

Start every design on a phone-sized screen. Decide what the first screen shows, how the navigation works with a thumb, how the menu reads in a narrow column and how booking works with a few taps. Then widen the design for tablets and desktops, adding space and larger images.

Working this way round is easier than the reverse. A phone design widened for a desktop usually looks clean and spacious. A desktop design squeezed onto a phone usually looks cramped and broken, because it was never meant to fit.

On a restaurant's mobile website, guests do a few things over and over: they look at the menu, they check the prices, they find the address and get directions, they check the opening hours, they call and they book. Few of them read long stories or browse galleries.

Make those few actions easy. Each one should be reachable within one or two taps from the home page, and the most common, the menu and booking, should be visible on the first screen.

On a phone, details can be actions. A phone number should be tappable, so guests can call in one tap. An address should open in a maps app, so guests can get directions without copying and pasting. The booking button should open the booking page directly.

These small touches make a big difference to guests on the move. A guest standing on a street corner who can tap the address and see the walking route is far more likely to arrive than one who has to type the address into a map.

Four elements break on small screens so often that they are worth checking on every restaurant website, every time: the navigation, the menu, images with text on them, and forms and buttons. Each looks fine on a desktop and can fail completely on a phone.

The sections below take each in turn, with what goes wrong and how to fix it. Check all four before any website launches, and again after any redesign.

On a phone, the navigation usually collapses into a menu icon, and the pages guests want can end up hidden inside it, in an order nobody chose. The booking page may be last, or missing; the menu may be buried under a section with a vague name.

Put "Menu" and "Book" first in the mobile navigation, and keep a booking button visible on screen as guests scroll, outside the hidden menu. Use plain page names. Our guide to website pages in the order guests need them covers which pages to list and in what order.

Menus break on phones more than any other page. PDFs open slowly and need pinching and zooming. Menus laid out in several columns, or as wide tables with dishes on the left and prices on the right, either shrink to unreadable text or force guests to scroll sideways.

Lay the menu out in a single column for phones: each dish with its description and price beneath or beside it, sections clearly headed, dietary marks easy to see. Our guide to the menu on your website, not in a PDF covers why the web page beats the file.

Large images at the top of a page, designed for wide screens, are often cropped on phones: the chef's head disappears, the dish slides off the edge, the room becomes a slice of wall. Text written on top of images, such as the venue's name or a slogan, may end up over the busiest part of the picture and become unreadable.

Check how each key image crops on a phone, and choose or adjust images so the important part stays in the middle. Keep important text out of images altogether, or make sure it sits on a plain, dark area with strong contrast.

Forms and buttons are where bookings are won or lost on a phone. Buttons that are too small, or too close together, get mis-tapped. Forms with many fields, small boxes or awkward date pickers are tiring with a thumb. A booking widget squeezed into a box narrower than the screen can hide its own buttons.

Make buttons large enough to tap easily and well spaced. Keep forms short. Test the date and time pickers on a phone. Check that any embedded booking form fits the screen, scrolls properly and lets guests finish without zooming.

Mobile booking deserves the most care of all, because it is where interest becomes a reservation. The booking page should show available times quickly, let guests choose with a few taps and ask for only the details needed to confirm.

Test it as a guest would, on a phone, with one thumb: choose a date, a time and a party size, enter your details and finish. If anything is fiddly, fix it. Our guide to mobile booking: thumbs, not mice covers the details of booking on a small screen.

Text on a phone must be large enough to read without zooming and dark enough against its background to read outdoors. Body text that looks elegant at a small size on a desktop can be unreadable on a phone held at arm's length on a sunny street.

Choose a comfortable text size for phones, keep lines short and use strong contrast between text and background. Avoid thin, light fonts for anything guests need to read, especially prices and opening hours.

Phones are often on slower connections than desktops, so website speed matters more on mobile. Large images, background video and heavy widgets that load quickly on office wifi can take many seconds on a mobile signal, and guests do not wait.

Test speed on a phone with wifi off, and fix the biggest causes first: oversized images and unnecessary scripts. Our guide to website speed: the three second rule on 4G covers how to test and what to fix.

On a phone, every page is seen one narrow screen at a time, so the order of what is on each page matters. Put the most important information at the top: on the menu page, the menu; on the find-us page, the address and a map link; on every page, a way to book.

Keep pages short where you can. A long page that is easy to read on a desktop can feel endless on a phone. Breaking content into clear sections with headings helps guests find what they need as they scroll.

Restaurant website design for phones has to work for thumbs. Most people hold their phone in one hand and tap with their thumb, which reaches the middle and bottom of the screen more easily than the top corners. A booking button at the bottom of the screen is often easier to tap than one in the top corner.

Think about where the most important buttons sit, and make sure they are easy to reach. Our guide to restaurant website design that gets out of the way covers the wider design choices.

Not every guest has the latest large phone. Smaller and older phones have narrower screens, less memory and slower processors, and a website that works on a new phone can be cramped or slow on an old one.

Test on a small or older phone as well as a new one. If the website works well on the smallest screen you can find, it will work well on the rest.

Guests often look at restaurant websites outdoors, where bright sunlight washes out low-contrast designs. Pale grey text on white, or delicate colours, can become invisible. Some guests also use dark mode, which some websites handle badly.

Check the website outside on a sunny day, and on a phone with dark mode switched on. Strong contrast and simple colours survive both; subtle designs may not.

Before any restaurant website launches, test on a phone:

Design tools can show a website at phone size, but they do not show how it feels on a real phone. Test on real devices: at least one recent phone, one older or smaller phone and, if possible, phones of the two main types, because browsers behave slightly differently.

Test in real conditions too: outdoors, on a mobile connection and with one hand. Problems that never appear on a desk, such as a button you cannot reach or a page too slow on a weak signal, show up at once.

Ask someone who has never seen the website to use it on their own phone while you watch. Ask them to find the menu, check a price, find the address and book a table. Do not help or explain.

Where they hesitate, tap the wrong thing or give up is exactly where guests will too. A short test with two or three strangers before launch catches problems no designer will notice, because designers already know where everything is.

Keep checking after launch. New photos, new sections, a new widget or an update to the website builder can break the mobile version without anyone noticing on a desktop. Check the website on a phone once a month and after every change.

Make it part of the monthly website check: the menu, the hours, the booking link and the whole site on a phone. It takes ten minutes and catches problems before guests find them.

Many guests on phones never reach the website at all. They see the venue in a maps app or search result, tap to call, tap for directions or tap the booking link. That listing is part of the mobile experience, and it should link to the same booking page and show the same hours as the website.

Check the listing on a phone too. Our guide to your Google Business Profile is the real homepage covers what guests see there.

A mobile website that is accessible works better for everyone. Good contrast, readable text sizes, descriptive link labels, images with descriptions and buttons large enough to tap all help guests with disabilities and guests in a hurry alike.

Screen readers on phones read the page aloud in order, so a clear structure with headings and plain labels makes the website usable by guests who cannot see the screen. Testing with the phone's own screen reader for a few minutes shows where the structure is unclear.

Group organisers increasingly plan on their phones too. A group or private dining section that works on a phone, with the number of guests you can seat, the menus available and a tappable phone number or a short enquiry form, makes it easy for them to get in touch from wherever they are.

Avoid sending group enquiries to a PDF brochure or a long form. A short form that fits the screen, and a promise of a quick reply, wins more group bookings than a beautiful document nobody can read on a phone.

Cookie banners and other notices take up far more of a phone screen than a desktop one, and they often cover the booking button. Where a notice is needed, keep it small, place it at the bottom of the screen and make it easy to dismiss.

Check how the website looks on a phone the first time someone visits, with every notice showing. If the first screen is mostly notices, guests see a wall of text instead of the venue.

A guest on a phone looking for directions wants one tap to their maps app, not an embedded map that is fiddly to zoom on a small screen. A link that opens the address in the phone's own maps app gives them walking or driving directions at once.

If you show a map on the page, keep it simple and add a clear link to open it in the maps app. Make sure the pin is in the right place, especially if the entrance is round the corner from the address.

An invented bistro's website was designed on a desktop and never tested on a phone. When the owner finally checks it, the menu is a three-column layout that shrinks to tiny text, the booking button is hidden in the navigation icon and the home page photo crops the dining room to a corner of the ceiling.

The bistro rebuilds the mobile version first: a single-column menu, a booking button that stays at the bottom of the screen, "Menu" and "Book" at the top of the navigation, a photo chosen to crop well and a tappable phone number and address. It tests on three phones and with two strangers before relaunching. Bookings from the website rise, and fewer guests call to ask where the menu is.

servearound does not build the venue's own website, but the two guest pages it provides are made for phones first. The booking page on servearound.com shows party size, a strip of dates, available times as buttons and a short form, with the guest confirming their email by a six-digit code, and it can be linked from the website or embedded on it as a widget.

The menu page on servearound.com, and the menu guests open from the table's QR code, show the dishes with their photos, prices and allergens on a phone-sized page, with filters for dietary needs and allergens. Reservation analytics show bookings from the booking page and from the embedded widget separately. See the reservations module and the menus module.

Because most restaurant website visitors are on phones, so the phone version is what most guests see.

Look at the menu and prices, find the address, check the hours, call and book.

The navigation, the menu, images with text on them, and forms and buttons.

A single column, with each dish's description and price, readable without zooming.

Somewhere always visible and easy to reach with a thumb, often fixed at the bottom of the screen.

On real phones, outdoors, on a mobile connection and with a stranger trying to book.

Yes. If the website works on a small or older phone, it will work on the rest.

Monthly, and after any change to the website.

For a restaurant, the mobile website is the real website, because that is where most of the traffic is. Design for the phone first: a first screen with the name, a photo and a booking button; "Menu" and "Book" first in the navigation; a tappable phone number and an address that opens in a map. Then widen the design for larger screens.

Check the four elements that break every time: the navigation, the menu, images with text on them, and forms and buttons. Make mobile booking work with one thumb, keep text readable in sunlight and keep the site fast on a mobile signal. Test on real phones, outdoors and with strangers before launch, and keep checking every month after it.