320px-414px: Mobilmenyns optimala bredd (sweet spot)

När en QR-meny laddas är det bara en sak som spelar roll: telefonens verkliga pixelbredd. En meyhane med 24 bord i Izmir Konak såg mobil konvertering stiga med 38% efter en mobile-first omdesign — den enda förändringen var millimeterprecis anpassning till 320-414px-området.

Varför 320-414px

Enligt StatCounter 2024 använder 72% av QR-menybesökare enheter i detta område: iPhone SE (320px), iPhone 12/13/14 (390px), iPhone 14 Plus (414px), Samsung Galaxy S (360-412px). Surfplattor utgör bara 12%, skrivbord 16%.

thMenu-teman använder en "mobile-only-priority"-strategi. Surfplatta och skrivbord har egna brytpunkter, men varje kritiskt UX-beslut fattas vid 375px.

Designregler

Tre icke förhandlingsbara regler:

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

Vanliga misstag

Det vanligaste misstaget: en meny som ser perfekt ut på 1200px men producerar horisontell scroll vid 360px. thMenu-temaredigeraren har en "Testa på 320px"-förhandsvisning för att upptäcka detta före deploy.

Lösning: enpelars kortlayout, aspect-ratio: 4/3 bilder, sticky filterrad. Tid på sidan ökade från 1:42 till 3:18 och add-to-cart med 38%.

FAQ

Är 320px fortfarande relevant? Ja — iPhone SE och äldre Androider använder fortfarande detta; att ignorera dem kostar 5-8% av omsättningen.

Behövs separat surfplattedesign? Nej — Flexbox/Grid skalas automatiskt från 768px.

Bryter landskapsläge layouten? Kan — thMenu minskar header med 40% i landskap.

Var detta hjälpsamt? Dela det.