Un email prend en moyenne 10 secondes à être lu sur mobile (Market.biz, 2024). Dans cette fenêtre, trois éléments décident de tout : est-ce que ça charge, est-ce que c’est lisible, est-ce qu’on sait quoi faire. Si l’un manque, l’email est supprimé. Pas ignoré : supprimé. 42% des destinataires effacent immédiatement un email illisible sur smartphone, sans l’avoir lu (Stripo, 2025). En France, 71,5% des utilisateurs consultent leurs emails sur mobile (Baromètre du Numérique 2025, Crédoc/ARCEP). L’optimisation pour mobile n’est plus un avantage concurrentiel. C’est la condition de base pour être lu.
Pourquoi les checklists habituelles échouent ?
44% des marketeurs n’optimisent pas encore leurs emails pour smartphone (Forbes Advisor, 2025). Ce n’est pas un manque d’information : les guides abondent. C’est un problème de hiérarchie. Ces guides listent 15 à 20 critères au même niveau, sans distinguer ce qui provoque une suppression de ce qui améliore un taux de clic. Résultat : on affine l’objet, on peaufine le preheader, on choisit une belle typographie et l’email échoue quand même parce que le bouton CTA mesure 20px et ne peut pas être touché avec un doigt adulte.
La checklist ci-dessous fonctionne différemment. Trois niveaux, dans l’ordre où ils comptent : les critères qui causent une suppression immédiate, ceux qui décident du clic, ceux qui affinent la performance.
Niveau 1 : critères bloquants (suppression immédiate si absent)
Ces cinq points ne se négocient pas. Un seul manquant suffit à détruire l’email avant qu’il soit lu.
Largeur maximale 600px. Au-delà, le template déborde sur les écrans iOS et Android, forçant un scroll horizontal que la quasi-totalité des utilisateurs abandonne. 600px est le consensus de l’industrie, compatible avec Gmail Mobile, Apple Mail et Outlook.
Police minimum 16px pour le corps du texte, 22px pour les titres. En dessous, le texte est illisible sans zoom sur un écran de 6 pouces. Apple recommande 17px, Google 16px comme seuil de lisibilité native sans action de l’utilisateur.
Poids total inférieur à 600Ko. Au-delà, le chargement dépasse 3 secondes sur une connexion 4G moyenne. 53% des utilisateurs abandonnent une page mobile après ce délai (Google). Les images doivent être compressées avant intégration, pas redimensionnées par le client de messagerie.
Structure single-column. Un layout multi-colonnes s’empile de façon imprévisible selon le client de messagerie sur mobile. La colonne unique garantit une lecture du haut vers le bas, sans rupture ni chevauchement visuel.
Compatibilité Dark Mode. 35% des ouvertures se font en mode sombre (Litmus State of Email, 2025). Un logo blanc sur fond transparent devient invisible sur Apple Mail en Dark Mode. Les images doivent avoir un fond opaque ou utiliser la propriété CSS border transparent pour rester visibles quel que soit le thème appliqué par le client.
Niveau 2 : critères importants (décident du clic ou de l’abandon)
L’email charge, il est lisible. L’utilisateur a maintenant 8 secondes pour trouver le bouton et décider. Ces critères ne causent pas de suppression directe mais ils déterminent le taux de clic.
Bouton CTA d’au moins 44px de hauteur. C’est le standard Apple HIG, repris à 48px par Google Material Design. La surface de contact d’un doigt adulte mesure environ 10mm : un bouton plus petit génère des clics ratés ou ignorés. Le bouton doit être centré dans la colonne, avec au minimum 8px d’espace autour pour éviter les touches accidentelles sur les liens adjacents.
CTA visible sans scroll. Sur un iPhone 14 (375px de largeur), la zone visible sans scroll correspond à environ 500px de hauteur d’email. Le bouton d’action principal doit s’y trouver. La majorité des lecteurs mobiles ne scrolle pas si le contenu ne justifie pas immédiatement l’effort.
Objet de 40 caractères maximum et preheader de 85 à 100 caractères. Gmail Mobile et Apple Mail tronquent l’objet autour de 40 caractères. Le preheader, deuxième ligne visible dans la boîte de réception, complète l’information et influe directement sur l’ouverture. Un preheader optimisé représente +13,72% d’ouvertures en moyenne (MailOptin, 2025).
Espacement minimum de 10px entre deux liens cliquables. Deux liens trop proches provoquent des clics involontaires, parfois sur le lien de désabonnement. L’accessibilité tactile exige un espace suffisant entre chaque cible.
Attribut alt renseigné sur chaque image. 47% des marketeurs omettent les textes alternatifs (Litmus, 2025). Plusieurs clients de messagerie mobiles bloquent les images par défaut : sans alt text, l’email s’affiche comme une suite de zones grises vides.
Niveau 3 : optimisations (améliorent la performance sans être critiques)
Ces critères s’appliquent une fois les niveaux 1 et 2 validés. Ils affinent l’engagement sans corriger des erreurs fondamentales.
- Préchargement des polices web avec font-display: swap pour éviter le flash de texte invisible
- Images au format WebP (30 à 50% plus léger que JPEG à qualité égale)
- Personnalisation du prénom dans l’objet ou le preheader (+41% de taux de clic selon les données agrégées de Stripo, 2025)
- Heure d’envoi calée sur le comportement de la liste : 10h-11h ou 15h-16h du mardi au jeudi pour le B2B, 19h-20h pour le B2C e-commerce
- Test A/B sur le texte du CTA (verbe d’action + bénéfice : « Voir mon offre » plutôt que « Cliquer ici »)
La checklist complète par niveau de criticité
| Critère | Seuil technique | Niveau | Impact si absent |
|---|---|---|---|
| Largeur du template | Maximum 600px | Bloquant | Débordement horizontal, suppression |
| Taille de la police corps | Minimum 16px | Bloquant | Zoom obligatoire, abandon |
| Poids total de l’email | Maximum 600Ko | Bloquant | Chargement lent, abandon |
| Structure de mise en page | Single-column obligatoire | Bloquant | Mise en page cassée selon le client |
| Compatibilité Dark Mode | Fond opaque sur les images | Bloquant | Éléments invisibles (35% des ouvertures) |
| Hauteur du bouton CTA | Minimum 44px (Apple HIG) | Important | Clic impossible ou raté |
| Position du CTA | Above the fold (500px) | Important | CTA non vu, taux de clic effondré |
| Longueur de l’objet | Maximum 40 caractères | Important | Troncature, perte de contexte |
| Preheader | 85 à 100 caractères | Important | -13,72% d’ouvertures en moyenne |
| Espacement entre liens | Minimum 10px | Important | Clics involontaires, désabonnements |
| Attribut alt sur les images | Texte descriptif obligatoire | Important | Email illisible si images bloquées |
| Format des images | WebP recommandé | Optimisation | Chargement plus lent que nécessaire |
| Personnalisation | Prénom dans objet ou preheader | Optimisation | +41% CTR non capturé |
| Heure d’envoi | 10h-11h ou 19h-20h selon segment | Optimisation | Ouverture dans un flux encombré |
Comment tester avant chaque envoi ?
Un outil de prévisualisation multi-client réduit les risques à presque zéro. Litmus et Email on Acid montrent le rendu sur plus de 90 clients de messagerie (Gmail App Android, Apple Mail iOS, Outlook Mobile, Samsung Mail) en quelques secondes. Stripo intègre une prévisualisation directement dans son éditeur. Pour le Dark Mode, le mode « prévisualisation sombre » d’Apple Mail sur Mac reproduit fidèlement le comportement d’iOS Mail.
Le test le plus rapide reste l’envoi à soi-même sur son propre smartphone. Ce test manuel ne remplace pas un outil dédié mais détecte les problèmes critiques de niveau 1 en moins de deux minutes. L’idéal : tester sur iOS et Android simultanément, car le rendu de Gmail App diffère significativement entre les deux systèmes.
Ce que 72% des destinataires font que les marketeurs sous-estiment
72% des utilisateurs jugent la crédibilité d’une marque d’après l’expérience mobile de ses emails (Stripo, 2025). Pas le taux de clic : la crédibilité. Un email qui pixelise, déborde ou affiche un logo transparent sur fond noir ne produit pas seulement un mauvais KPI. Il crée de la méfiance. Pour 71,5% des Français, l’email sur mobile est souvent le seul contact visuel avec une marque entre deux achats (Baromètre du Numérique 2025). Ce contact dure 10 secondes. Il se joue sur des pixels, des points de police et 44 pixels de hauteur de bouton. La bonne nouvelle : les critères bloquants sont entièrement techniques et corrigeables en une journée.
Quelle largeur d’email choisir pour mobile ?
600px est la largeur standard pour les emails marketing, compatible avec l’ensemble des clients de messagerie mobiles (Gmail, Apple Mail, Outlook, Samsung Mail). Certains templates utilisent 640px pour les clients desktop uniquement, avec un repli responsive à 375px pour mobile. En dessous de 320px, la mise en page devient trop contrainte pour intégrer des images correctement.
Le responsive email fonctionne-t-il dans Outlook ?
Outlook Desktop (versions 2007-2019 sous Windows) utilise le moteur de rendu de Microsoft Word, qui ignore les media queries CSS. Le responsive design standard ne fonctionne donc pas dans ces versions. La solution est le code conditionnel MSO (conditional comments), une technique HTML spécifique à Outlook qui permet de servir un layout alternatif à ces clients. Outlook Mobile (iOS et Android) se comporte différemment et supporte les media queries.
Comment réduire le poids des images dans un email mobile ?
Trois méthodes cumulables : convertir les images JPEG et PNG en format WebP (réduction de 30 à 50% à qualité visuelle égale), compresser via un outil comme TinyPNG ou Squoosh avant intégration et dimensionner les images à leur taille d’affichage réelle plutôt qu’en grand format redimensionné par le client. Une image de 1200px affichée en 600px transporte deux fois plus de données que nécessaire.
