Wanneer een QR-menu laadt, telt alleen de werkelijke pixelbreedte van de telefoon. Een meyhane met 24 tafels in Izmir Konak zag mobiele conversie met 38% stijgen na een mobile-first redesign — de enige wijziging was millimeter-precieze aanpassing aan het bereik 320-414px.
Waarom 320-414px
Volgens StatCounter 2024 gebruikt 72% van QR-menubezoekers apparaten in dit bereik: iPhone SE (320px), iPhone 12/13/14 (390px), iPhone 14 Plus (414px), Samsung Galaxy S (360-412px). Tablets zijn slechts 12%, desktop 16%.
thMenu-thema's gebruiken een "mobile-only-priority" aanpak. Tablet en desktop hebben eigen breakpoints, maar elke kritieke UX-beslissing wordt op 375px beoordeeld.
Ontwerpregels
Drie niet-onderhandelbare regels:
- Tap-targets ≥ 44×44px — Apple HIG en WCAG 2.5.5.
- Padding ≥ 16px — verplichte binnenmarge.
- Body-lettertype ≥ 14px, input ≥ 16px — iOS Safari zoomt automatisch onder 16px.
Veelgemaakte fouten
Meest voorkomende fout: een menu dat perfect lijkt op 1200px maar horizontaal scrollt op 360px. De thMenu-thema-editor bevat een "Test op 320px" voorbeeld om dit te ontdekken vóór deploy.
Oplossing: kaarten in één kolom, aspect-ratio: 4/3 afbeeldingen, sticky filterbalk. Tijd op pagina ging van 1:42 naar 3:18 en add-to-cart steeg 38%.
FAQ
Is 320px nog relevant? Ja — iPhone SE en oudere Androids gebruiken dit nog; ze negeren kost 5-8% van de omzet.
Is een apart tablet-ontwerp nodig? Nee — Flexbox/Grid schaalt automatisch vanaf 768px.
Breekt landscape-modus de layout? Kan — thMenu verkleint de header met 40% in landscape.
Was dit nuttig? Deel het.
Gerelateerde artikelen
Wat is een QR-menu? De complete gids voor restaurants
Een QR-menu geeft gasten direct toegang tot uw menukaart via hun smartphone — zo…
Van papieren menukaart naar digitaal QR-menu: stap voor stap
Wilt u overstappen op QR-menu's maar weet u niet waar te beginnen? Deze gids beh…
Geo-gerichte QR-menu's: verschillende talen serveren op basis van bezoeker-IP
Hoe een 180-stoelen all-inclusive resort in Antalya dezelfde QR routeert naar Tu…