320px-414px : La largeur sweet spot des menus mobiles

Lorsqu'un menu QR se charge, une seule chose compte : la largeur réelle en pixels du téléphone. Un meyhane de 24 tables à Izmir Konak a vu sa conversion mobile grimper de 38% après un redesign mobile-first — la seule différence était l'adaptation millimétrique à la plage 320-414px.

Pourquoi 320-414px ?

Selon StatCounter 2024, 72% des visiteurs de menus QR utilisent des appareils dans cette plage : iPhone SE (320px), iPhone 12/13/14 (390px), iPhone 14 Plus (414px), Samsung Galaxy S (360-412px). Les tablettes ne représentent que 12%, et le desktop 16% des visites restaurant.

Les thèmes thMenu adoptent une approche "mobile-only-priority". Tablet et desktop ont leurs breakpoints, mais chaque décision UX critique est prise à 375px.

Règles de design

Trois règles incontournables :

• Tap-targets ≥ 44×44px — Apple HIG et WCAG 2.5.5.
• Padding ≥ 16px — marge intérieure obligatoire.
• Police body ≥ 14px, input ≥ 16px — iOS zoom auto en dessous de 16px.

Erreurs courantes

Le défaut le plus courant : un menu parfait sur 1200px qui scroll horizontalement à 360px. L'éditeur thMenu propose un bouton "Tester en 320px" pour détecter cela avant deploy.

La solution : layout cartes en une colonne, images aspect-ratio: 4/3, barre de filtre sticky. Le temps sur page est passé de 1:42 à 3:18 et l'add-to-cart a grimpé de 38%.

FAQ

320px est-il encore pertinent ? Oui — l'iPhone SE et certains Android continuent d'utiliser 320px ; les ignorer coûte 5-8% de chiffre d'affaires.

Faut-il un design tablette dédié ? Non — Flexbox/Grid s'adapte à partir de 768px.

Le mode paysage casse-t-il la mise en page ? Cela peut arriver — thMenu réduit l'en-tête de 40% en paysage.

Cet article vous a été utile ? Partagez-le.