320px-414px: A mobil menü optimális szélessége (sweet spot)

Amikor egy QR-menü betöltődik, csak egy dolog számít: a telefon valós pixelszélessége. Egy 24 asztalos meyhane Izmir Konak-ban 38%-os mobilkonverzió-növekedést ért el mobile-first újratervezés után — az egyetlen változtatás a 320-414px tartományhoz való milliméteres illeszkedés volt.

Miért 320-414px

A StatCounter 2024 szerint a QR-menü látogatók 72%-a ezt a tartományt használja: iPhone SE (320px), iPhone 12/13/14 (390px), iPhone 14 Plus (414px), Samsung Galaxy S (360-412px). A táblagépek csak 12%, az asztali számítógép 16%.

A thMenu témái "mobile-only-priority" megközelítést használnak. A táblagépnek és asztali gépnek saját breakpointjai vannak, de minden kritikus UX-döntés 375px-en születik.

Tervezési szabályok

Három alkudozhatatlan szabály:

• Érintési célok ≥ 44×44px — Apple HIG és WCAG 2.5.5.
• Padding ≥ 16px — kötelező belső margó.
• Body betűtípus ≥ 14px, input ≥ 16px — iOS Safari automatikus zoom 16px alatt.

Gyakori hibák

A leggyakoribb hiba: a menü 1200px-en tökéletes, de 360px-en vízszintes görgetést produkál. A thMenu téma-szerkesztő tartalmaz egy "Teszt 320px-en" előnézetet a deploy előtti felfedezéshez.

Megoldás: egyhasábos kártyaelrendezés, aspect-ratio: 4/3 képek, sticky szűrősáv. Az oldalon töltött idő 1:42-ről 3:18-ra nőtt, az add-to-cart 38%-kal.

GYIK

A 320px még mindig releváns? Igen — az iPhone SE és a régebbi Androidok még használják; figyelmen kívül hagyásuk a bevétel 5-8%-ába kerül.

Kell külön táblagép-terv? Nem — a Flexbox/Grid 768px-től automatikusan skálázódik.

A fekvő mód tönkreteszi az elrendezést? Megteheti — a thMenu 40%-kal csökkenti a fejlécet fekvő módban.

Hasznosnak találtad? Oszd meg.