7 Golden Rules of Mobile Menu Design

A mobile menu is not a desktop menu shrunk down. The smaller screen, often slower connection, and one-handed use bring constraints that need design decisions of their own. The seven rules below cover the mobile menu design choices that most directly move average ticket size and customer satisfaction — with specifics, not platitudes.

1. Body text never below 16 pixels

Sixteen pixels (or 1 rem in CSS) is the minimum readable body text size on phones. Below that, users pinch-to-zoom — which throws off categories, scroll, and accidental taps. Use 16-18 px body, 18-22 px product names, 22-28 px category titles for a clean hierarchy.

Secondary info (allergens, calories) can drop to 14 px, but pair small text with high contrast. Light gray on lighter gray reads beautifully in Figma and disappears in sunlight on a phone screen.

2. Touch targets minimum 44 × 44 px

Apple's HIG and Google Material both call for 44 × 44 px minimum touch targets. The rule applies not only to buttons but to product cards, category tabs, and price chips. Smaller targets push "mis-tap" rates up by 15-23%.

Where category tabs scroll horizontally, leave at least 8 px of breathing room between tabs. Adjacent tabs cause "one tap, wrong tab" errors that frustrate users into giving up.

3. Build hierarchy as F-pattern, not Z-pattern

Mobile reading is vertical, not horizontal. Users scan top-to-bottom. Put featured items at the very top, make category navigation sticky so it stays visible during scroll. If a customer can't grasp the menu's logic in five seconds, the back button wins.

Don't pile entire categories end-to-end. Show 6-8 items per category and offer "Show more" — the psychological wall of a 50-item list pushes guests to ask the server instead.

4. WebP/AVIF images and lazy loading

Photos are the strongest selling tool in a menu and the biggest performance trap when handled poorly. WebP is 30% smaller than PNG and 25-35% smaller than JPG; AVIF is another 15-20% smaller again. Every modern browser supports both.

Lazy loading is non-negotiable: images shouldn't download until the user opens the category. Use the native <img loading="lazy"> attribute, not background-image hacks.

5. The three-second rule

Largest Contentful Paint (LCP) on a mobile menu should clear in under 3 seconds. 3-5 seconds is borderline; over 5 you lose customers. Use WebP/AVIF for hero images, async font loading, and a JavaScript bundle under 150 KB.

Café Wi-Fi is rarely reliable. Test with throttled 3G in Chrome DevTools — that's where the real customer experience lives.

6. Color palette of 4-5 max

More colors equal more cognitive load. One brand color, one secondary, one accent, plus black and white is enough. A light background reads as more hygienic; if you go dark, use matte black on OLED for less eye strain.

Allergen icons should rely on shape and color together, not color alone — roughly 1 in 12 men is red-green colorblind.

7. One-handed usability check

Use your phone in your left, then right hand, navigating the menu with one thumb. Is the cart button in the upper corner? That's outside thumb reach. Put critical actions in the bottom half — the thumb zone rule.

Mobile-first platforms like thMenu default to these patterns; if you write custom themes or CSS, verify them yourself. A well-tuned mobile menu lifts orders by 12-18%; a poorly tuned one pushes guests back to the server and erases the digital advantage.

Found this helpful? Share it.