320px-414px: Mobiilivalikon paras leveys (sweet spot)

Kun QR-valikko latautuu, vain yksi asia merkitsee: puhelimen todellinen pikseliperusteinen leveys. Izmir Konakin 24-pöytäinen meyhane sai mobiilikonversion nousemaan 38% mobile-first-uudistuksen jälkeen — ainoa muutos oli millimetritarkka sopiminen 320-414px alueeseen.

Miksi 320-414px

StatCounter 2024 mukaan 72% QR-valikon kävijöistä käyttää tämän alueen laitteita: iPhone SE (320px), iPhone 12/13/14 (390px), iPhone 14 Plus (414px), Samsung Galaxy S (360-412px). Tabletit vain 12%, työpöytä 16%.

thMenu-teemat käyttävät "mobile-only-priority"-lähestymistapaa. Tabletilla ja työpöydällä on omat breakpointit, mutta jokainen kriittinen UX-päätös tehdään 375px:llä.

Suunnittelusäännöt

Kolme neuvottelematonta sääntöä:

• Kosketuskohteet ≥ 44×44px — Apple HIG ja WCAG 2.5.5.
• Padding ≥ 16px — pakollinen sisämarginaali.
• Body-fontti ≥ 14px, input ≥ 16px — iOS Safari automaattinen zoom alle 16px.

Yleiset virheet

Yleisin virhe: valikko näyttää täydelliseltä 1200px:llä mutta aiheuttaa vaakatason vierityksen 360px:llä. thMenu-teemaeditorissa on "Testaa 320px:llä" -esikatselu virheiden havaitsemiseksi ennen julkaisua.

Ratkaisu: yksisarakkeinen korttilayout, aspect-ratio: 4/3 kuvat, sticky-suodatinpalkki. Sivulla vietetty aika nousi 1:42 → 3:18 ja add-to-cart 38%.

UKK

Onko 320px edelleen relevantti? Kyllä — iPhone SE ja vanhemmat Androidit käyttävät sitä yhä; niiden ohittaminen maksaa 5-8% liikevaihdosta.

Tarvitaanko erillinen tabletti-suunnittelu? Ei — Flexbox/Grid skaalautuu automaattisesti 768px:stä alkaen.

Rikkooko landscape-tila layoutin? Voi — thMenu pienentää otsikkoa 40% landscape-tilassa.

Oliko tästä hyötyä? Jaa se.