320px-414px: Die Sweet-Spot-Breite mobiler Restaurantmenüs

Wenn ein QR-Menü geladen wird, zählt nur eines: die echte Pixelbreite des Telefons. Ein 24-Tisch-Meyhane in Izmir Konak verzeichnete nach einem Mobile-First-Redesign einen 38% höheren Mobile-Conversion — der einzige Unterschied war millimetergenaue Passung auf 320-414px.

Warum 320-414px der Sweet Spot ist

StatCounter-Daten 2024 zeigen: 72% aller QR-Menü-Besucher nutzen Geräte in diesem Bereich — iPhone SE (320px), iPhone 12/13/14 (390px), iPhone 14 Plus (414px), Samsung Galaxy S (360-412px). Tablets machen nur 12%, Desktop 16% aller Restaurantbesuche aus.

Deshalb arbeiten thMenu-Themes nicht "Mobile-First", sondern "Mobile-Only-Priority". Tablet und Desktop bekommen Breakpoints, aber jede kritische UX-Entscheidung wird bei 375px getroffen.

Designregeln

Drei unverhandelbare Regeln für 320-414px:

• Tap-Targets ≥ 44×44px — Apple HIG und WCAG 2.5.5 Pflicht.
• Padding ≥ 16px — kein Inhalt darunter, sonst wirkt das Layout erdrückend.
• Body-Font ≥ 14px, Input ≥ 16px — iOS Safari zoomt bei kleineren Inputs automatisch.

Häufige Fehler

Der häufigste Fehler: Ein Menü, das auf 1200px perfekt aussieht, verursacht bei 360px horizontales Scrollen. Der thMenu-Theme-Editor bietet eine "Test auf 320px"-Vorschau, um das vor dem Deploy zu finden.

Die Lösung: einspaltiges Karten-Layout, aspect-ratio: 4/3 Bilder, sticky Filterleiste. Das verlängerte die Verweildauer von 1:42 auf 3:18 und brachte +38% Add-to-Cart.

FAQ

Ist 320px noch relevant? Ja — iPhone SE 1./2. Gen und ältere Androids nutzen es weiterhin; ignoriert man sie, verliert man 5-8% Umsatz.

Braucht es ein separates Tablet-Design? Nein — Flexbox/Grid skaliert bei 768px+ automatisch.

Bricht Landscape das Layout? Kann passieren — thMenu schrumpft Header in Landscape um 40%.

Hilfreich? Teilen Sie es.