320px-414px: Mobil Menünün "Sweet Spot" Genişliği ve Tasarım Rehberi

QR menü açıldığında ilk yüklenen şey kullanıcının ekranındaki gerçek genişliktir. İzmir Konak'taki 24 masalı bir meyhanede yapılan mobile-first redesign sonrası mobile conversion %38 arttı; tek değişen, tasarımın 320-414px aralığına milimetrik uyumuydu.

Neden 320-414px Sweet Spot?

StatCounter 2024 küresel raporuna göre QR menü ziyaretçilerinin %72'si bu aralıkta cihaz kullanıyor: iPhone SE (320px), iPhone 12/13/14 (390px), iPhone 14 Plus (414px), Samsung Galaxy S serisi (360-412px). Tabletler yalnızca %12, masaüstü ise restoran ziyaretlerinde sadece %16 paya sahip.

Bu nedenle thMenu temaları "mobile-first" değil "mobile-only-priority" yaklaşımıyla tasarlanmıştır. Tablet ve masaüstü için ayrı breakpoint'ler eklenir ama kritik UX kararları her zaman 375px referansında alınır.

Tasarım Kuralları

320-414px için üç temel pratik kural:

• Tap target ≥ 44×44px — Apple HIG ve WCAG 2.5.5 zorunluluğu. Sepete ekle butonu, kategori chip'leri, dil seçici hep bu boyutta.
• Padding ≥ 16px — kenarlardan iç içerik mesafesi 16px altına düşmez; küçük ekranda nefes alma alanı şart.
• Font ≥ 14px body, 16px input — iOS Safari 16px altı input'ta otomatik zoom yapar; bu kullanıcı için kırıcı bir deneyimdir.

Yaygın Hatalar ve Çözümler

En çok rastlanan hata: 1200px monitorda harika görünen menünün 360px ekranda yatay scroll yapması. thMenu tema editörü "Test on 320px" preview butonuyla bu sorunu deploy öncesi yakalar. Konak meyhanesinde redesign öncesi 12 ürün kartının yan yana sığması beklendiği için font 11px'e iniyor, allergen ikonları kesiliyordu.

Çözüm: tek kolonlu kart layout, aspect-ratio: 4/3 görsel, sticky filter bar (top: 0). Bu üç kural birlikte uygulandığında ortalama "time on page" 1:42'den 3:18'e çıktı, "add to cart" oranı %38 arttı.

SSS

320px hâlâ destekleniyor mu? Evet, iPhone SE 1st/2nd gen ve eski Android cihazlarda hâlâ kullanılıyor; restoran müşteri tabanı geniş olduğu için bu cihazları yok saymak %5-8 ciroyu kaybetmek demek.

Tablet için ayrı tasarım gerekir mi? Hayır, 768px+ için flexbox/grid otomatik genişler; ek tasarım emeği genelde gereksiz. Tüm thMenu temaları bu davranışı varsayılan olarak uygular.

Landscape mod sorun yaratır mı? Yaratabilir — özellikle 414×896 cihaz landscape'te 896×414 olur, sticky header dikey alanı tüketir. thMenu temaları landscape'te header yüksekliğini otomatik %40 küçültür.

Faydalı buldunuz mu? Paylaşın.