320px-414px: Optymalna szerokość mobilnego menu (sweet spot)

Gdy menu QR się ładuje, liczy się tylko jedno: rzeczywista szerokość telefonu w pikselach. Meyhane na 24 stoły w Izmir Konak odnotował wzrost mobilnej konwersji o 38% po przeprojektowaniu mobile-first — jedyną zmianą było milimetrowe dopasowanie do zakresu 320-414px.

Dlaczego 320-414px

Według StatCounter 2024, 72% odwiedzających menu QR używa urządzeń w tym zakresie: iPhone SE (320px), iPhone 12/13/14 (390px), iPhone 14 Plus (414px), Samsung Galaxy S (360-412px). Tablety to tylko 12%, desktop 16%.

Motywy thMenu stosują podejście "mobile-only-priority". Tablet i desktop mają własne breakpointy, ale każda krytyczna decyzja UX jest podejmowana przy 375px.

Zasady projektowania

Trzy niepodlegające negocjacjom zasady:

• Cele dotyku ≥ 44×44px — wymóg Apple HIG i WCAG 2.5.5.
• Padding ≥ 16px — obowiązkowy margines wewnętrzny.
• Font body ≥ 14px, input ≥ 16px — iOS Safari auto-zoom poniżej 16px.

Najczęstsze błędy

Najczęstszy błąd: menu idealne na 1200px powoduje poziomy scroll przy 360px. Edytor motywów thMenu zawiera podgląd "Test na 320px" do wykrycia tego przed deploymentem.

Rozwiązanie: karty w jednej kolumnie, obrazy aspect-ratio: 4/3, sticky pasek filtrów. Czas na stronie wzrósł z 1:42 do 3:18, a add-to-cart o 38%.

FAQ

Czy 320px jest nadal istotne? Tak — iPhone SE i starsze Androidy nadal go używają; ignorowanie kosztuje 5-8% przychodu.

Czy potrzebny jest osobny projekt na tablet? Nie — Flexbox/Grid automatycznie skaluje się od 768px.

Czy tryb poziomy psuje układ? Może — thMenu zmniejsza nagłówek o 40% w trybie poziomym.

Czy to było pomocne? Udostępnij.