Quando un menu QR si carica, conta solo una cosa: la larghezza reale in pixel del telefono. Un meyhane di 24 tavoli a Izmir Konak ha visto la conversione mobile salire del 38% dopo un redesign mobile-first — l'unico cambiamento è stato l'adattamento millimetrico al range 320-414px.
Perché 320-414px
Secondo StatCounter 2024, il 72% dei visitatori di menu QR usa dispositivi in questo range: iPhone SE (320px), iPhone 12/13/14 (390px), iPhone 14 Plus (414px), Samsung Galaxy S (360-412px). I tablet sono solo il 12%, il desktop il 16%.
I temi thMenu seguono un approccio "mobile-only-priority". Tablet e desktop hanno breakpoint propri, ma ogni decisione UX critica si valuta a 375px.
Regole di design
Tre regole non negoziabili:
- Tap-target ≥ 44×44px — Apple HIG e WCAG 2.5.5.
- Padding ≥ 16px — margine interno obbligatorio.
- Font body ≥ 14px, input ≥ 16px — iOS zoomma auto sotto i 16px.
Errori comuni
L'errore più frequente: un menu perfetto su 1200px che produce scroll orizzontale a 360px. L'editor thMenu include un'anteprima "Test su 320px" per intercettarlo prima del deploy.
Soluzione: card layout a colonna singola, immagini aspect-ratio: 4/3, filtro sticky. Il tempo sulla pagina è passato da 1:42 a 3:18 e l'add-to-cart è salito del 38%.
FAQ
320px è ancora rilevante? Sì — iPhone SE e Android datati lo usano; ignorarli costa il 5-8% del fatturato.
Serve un design separato per tablet? No — Flexbox/Grid scala automaticamente da 768px.
Il landscape rompe il layout? Può — thMenu riduce l'header del 40% in landscape.
Ti è stato utile? Condividilo.
Articoli correlati
Cos'è un menù QR? La guida completa per i ristoranti
Un menù QR permette ai clienti di accedere alla tua carta istantaneamente dallo …
Dal menù cartaceo al menù QR digitale: guida passo passo
Vuoi adottare i menù QR ma non sai da dove iniziare? Questa guida copre fotograf…
Menu QR geolocalizzati: servire lingue diverse in base all'IP del visitatore
Come un resort da 180 coperti ad Antalya instrada lo stesso QR a menu turchi, te…