320px-414px: Den optimale bredden for mobile menyer

Når en QR-meny lastes inn, betyr bare én ting noe: telefonens reelle pikselbredde. En meyhane med 24 bord i Izmir Konak så mobilkonvertering stige med 38% etter en mobile-first redesign — den eneste endringen var millimeterpresis tilpasning til 320-414px-området.

Hvorfor 320-414px

I følge StatCounter 2024 bruker 72% av QR-menybesøkende enheter i dette området: iPhone SE (320px), iPhone 12/13/14 (390px), iPhone 14 Plus (414px), Samsung Galaxy S (360-412px). Nettbrett utgjør bare 12%, desktop 16%.

thMenu-temaer bruker en "mobile-only-priority"-tilnærming. Nettbrett og desktop har egne breakpoints, men hver kritisk UX-beslutning tas ved 375px.

Designregler

Tre regler uten forhandling:

• Tap-mål ≥ 44×44px — Apple HIG og WCAG 2.5.5.
• Padding ≥ 16px — obligatorisk indre marg.
• Body-font ≥ 14px, input ≥ 16px — iOS Safari auto-zoom under 16px.

Vanlige feil

Den hyppigste feilen: en meny som ser perfekt ut på 1200px og produserer horisontal scroll på 360px. thMenu-temaeditoren har en "Test på 320px"-forhåndsvisning for å fange dette før deploy.

Løsning: enkeltkolonne kortlayout, aspect-ratio: 4/3 bilder, sticky filterbar. Tid på siden økte fra 1:42 til 3:18 og add-to-cart med 38%.

FAQ

Er 320px fortsatt relevant? Ja — iPhone SE og eldre Androider bruker det fortsatt; å ignorere dem koster 5-8% av omsetningen.

Trenges separat nettbrettdesign? Nei — Flexbox/Grid skalerer automatisk fra 768px.

Bryter landscape-modus layouten? Kan — thMenu reduserer header med 40% i landscape.

Var dette nyttig? Del det.