Když se QR menu načte, záleží jen na jedné věci: skutečné pixelové šířce telefonu. Meyhane s 24 stoly v Izmir Konak zaznamenala nárůst mobilní konverze o 38% po mobile-first redesignu — jedinou změnou bylo milimetrové přizpůsobení rozsahu 320-414px.
Proč 320-414px
Podle StatCounter 2024 používá 72% návštěvníků QR menu zařízení v tomto rozsahu: iPhone SE (320px), iPhone 12/13/14 (390px), iPhone 14 Plus (414px), Samsung Galaxy S (360-412px). Tablety jen 12%, desktop 16%.
Témata thMenu používají přístup "mobile-only-priority". Tablet a desktop mají vlastní breakpointy, ale každé kritické UX rozhodnutí se posuzuje při 375px.
Pravidla designu
Tři nepřekročitelná pravidla:
- Tap-cíle ≥ 44×44px — Apple HIG a WCAG 2.5.5.
- Padding ≥ 16px — povinný vnitřní okraj.
- Body font ≥ 14px, input ≥ 16px — iOS Safari auto-zoom pod 16px.
Časté chyby
Nejčastější chyba: menu dokonalé na 1200px způsobí horizontální scroll na 360px. Editor motivů thMenu nabízí náhled "Test na 320px" pro odhalení před nasazením.
Řešení: karty v jednom sloupci, obrázky aspect-ratio: 4/3, sticky filtrovací lišta. Čas na stránce se zvýšil z 1:42 na 3:18 a add-to-cart o 38%.
FAQ
Je 320px stále relevantní? Ano — iPhone SE a starší Androidy ho stále používají; ignorování stojí 5-8% tržeb.
Potřebuji samostatný design pro tablet? Ne — Flexbox/Grid se automaticky škáluje od 768px.
Rozbíjí landscape režim layout? Může — thMenu zmenší hlavičku o 40% v landscape.
Bylo to užitečné? Sdílejte to.
Související články
Co je QR menu? Kompletní průvodce pro restaurace
QR menu umožňuje hostům okamžitý přístup k vašemu jídelníčku přes smartphone — b…
Přechod z papírového na digitální QR menu: průvodce krok za krokem
Chcete zavést QR menu, ale nevíte, kde začít? Tento průvodce pokrývá fotografová…
Geo-cílené QR menu: různé jazyky podle IP návštěvníka
Jak 180místný all-inclusive resort v Antalyi směruje stejný QR kód na turecké, n…