Newsletter : nos bonnes mauvaises-pratiques pour une compatibilité maximale

Mis à jour le 25/10/2012

Astuces pour design e-mail mobile

– Largeur de la colonne principale (de contenu) comprise entre 500-600px
– Call-to-action (liens, boutons…) de dimension 44*44px mini comme spécifié dans la guideline d’Apple
– Police taille 13px mini
– Attention les polices trop grosses par rapport à une colonne provoquent des sauts de ligne
– Considérez que ligne de flottaison mobile est à environ 370px
– Supprimer de l’affichage les éléments superflus sur mobile (social sharing, marges, contours…)
– Veillez si possible à ce que les images puissent être recadrées en partant du centre (pas d’élément important dans les coins/bords)
– Pour la compatibilité Retina, vous devez fournir les images et/ou toute la maquette au double de la dimension normale
– Évitez les sauts de ligne manuels (laisser le « flow » se faire naturellement selon la taille de la colonne, qui sera différente d’un mobile à l’autre)

Méthode et ciblage périphériques mobiles

– Utilisation des media-queries CSS pour cibler spécifiquement les mobiles
– Sauf demande spécifique, on cible pour une résolution maxi de 360*480px (à ce jour cela inclut :
-* iPhone (tous),
-* BlackBerry Torch 9800 et + récents,
-* HTC Thunderbolt et + récents,
-* Nokia Lumia 900 et + récents,
-* Samsung Galaxy S et + récents)

Généralement, nous fournissons des screenshots pour :
– Webmails :
-* Gmail,
-* Hotmail,
-* Yahoo
– Desktop :
-* Apple Mail 5,
-* Lotus 8,
-* Outlook 2000, 2003, 2007, 2010
– Mobiles :
-* iOS 5 (iPhone, iPad),
-* Android 2.3,
-* BlackBerry 5,
-* Windows Mobile 7

Possibilités de variations sur la version mobile (responsive design)

– Passer d’un layout multi-colonnes à mono-colonne automatiquement
– Changer la taille du texte / de certains éléments textes automatiquement (et éventuellement leur couleur)
– Masquer certains éléments (logos, liens, textes…)
– Créer un cliquer-déployer (« Afficher/Masquer »)
– Images de dimension différente
– Image recadrée par un bord ou par le centre
– Images Retina pour périphériques iOS compatibles
– Insertion d’un formulaire (le traitement se fera bien sûr dans une fenêtre de navigateur séparée par votre site distant)
– Champs de saisie optimisée pour les claviers virtuels (type email, chiffres, selectmenu, texte (standard))

Contraintes mobiles/desktop
– Gmail, Android 2.3 : aucun support pour les media queries (pas de responsive design)
– Outlook, iOS, Gmail, Android : aucun support pour états de liens hover/active/visited, focus
– iOS : font-size minimum 13px (texte sera upscalé si plus petit)
– Outlook : aucun support pour text-shadow (ombres de textes)
– Outlook, Gmail, Android 2.3 : aucun support pour word-wrap (forçage du retour à la ligne)
– Outlook 2007/10/13, Android 2.3 : aucun support des images de fond (mais couleurs unies OK)
– Gmail : aucun support du positionnement des images de fond (commencent toujours au bord haut gauche)
– Outlook, Yahoo, Gmail, Android 2.3 : aucun support pour opacity / canal alpha
– Outlook, Yahoo, Gmail, Android 2.3 : aucun support pour gradients (dégradés)
– Outlook, iOS, Android < 4, Gmail, Yahoo, Apple Mail : aucun support pour box-shadow (ombre d’éléments)
– Outlook, Gmail, Yahoo, Android < 4 : aucun support pour border-radius (coins arrondis)
– Outlook : seuls les tableaux peuvent avoir une dimension fixe (pas les boutons, etc)

Principales répartition des clients mails

(Septembre 2012, source : Campaign Monitor)

– iOS : 35,60 %
-* iPhone : 25,05 %
-* iPad : 9,74 %

– Outlook : 20,14 %
-* Outlook 2000/2003/XP/Express : 7,68 %
-* Outlook 2007 : 6,51 %
-* Outlook 2010 : 5,96 %

– Hotmail : 13,57 %

– Apple Mail : 11 %
-* Apple Mail 5 (Mac OS X Lion) : 4,31 %
-* Apple Mail 4 (Mac OS X Snow Leopard) : 3,75 %

– Yahoo! Mail : 9,85 %

– Gmail : 8,43 %

– Android : 4,74 %

– Thunderbird : 1,03 %

– AOL : 0,91 %

– Windows Phone 7 : 0,14 %

– Lotus Notes : 0,07 %

– BlackBerry : 0,05 %

=> Il est donc évident qu’il faut se focaliser totalement sur iOS/Mac OS, supporter toutes les versions de Outlook, et afficher une compatibilité décente (« graceful degrade ») avec Android, Gmail, et Yahoo! Mail.

Aspects techniques

Ce n’est pas par plaisir, mais pour respecter les créas il faut souvent coder les newsletters avec des tableaux.

Le DocType + ce qu’il faut pour démarrer

En règle générale, l’histoire va commencer ainsi…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">.ExternalClass{display:block !important;}</style>
	<style type="text/css">.yshortcuts, .yshortcuts a, .yshortcuts a:link, .yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span { color:#000; text-decoration: none !important; border-bottom: none !important; background: none !important;}</style>
	<title></title>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="1" bgcolor="#ffffff">

à vous d’écrire une belle suite !

Gmail et les hauteurs de cellules aléatoires (tableaux « explosés »

Depuis quelques temps Gmail (mais aussi un peu Yahoo et AOL) ont la fâcheuse tendance à pourrir les hauteurs de cellules. En l’occurrence, un code comme ceci…

<td width="134" height="14" colspan="3">
	<img width="134" height="14" alt="D&eacute;couvrez la campagne" src="https://localhost/dev-sans-cadre/images/sans_cadre_22.jpg">
</td>

…peut être rendu comme ça :

Ce qui provoque donc le courroux du Client qui voit ça :

La solution un peu bizarre qui va bien : ajouter un display:block; sur la balise img. Et là, c’est le mi-mi, c’est le ra-ra, c’est le miracle :

<td width="134" height="14" colspan="3">
	<img width="134" height="14" alt="D&eacute;couvrez la campagne" src="https://localhost/dev-sans-cadre/images/sans_cadre_22.jpg" style="display:block;">
</td>

Reste à savoir combien de temps ce fix tiendra la route…

Addenda : images avec height="100%" sous Firefox

Pendant des années height="100%" sur une balise img a bien fonctionné… apparemment avec les dernières versions de FF ça n’est plus le cas. Ça marche toujours dans IE et Chrome.

Voilà que j’ai besoin d’une image à 100% pour une nouvelle newsletter, la solution trouvée est la suivante :

<td width="44" style="height:100%"><img style="display:block; height:100%" src="images/04_rubrique_style_1_titre_01.jpg" width="44" height="100%" alt=""></td>

Ahhh, c’est moche.

Autres attributs pour les images

C’est toujours efficace :

<img src="..." align="left" hspace="0" vspace="0" border="0" alt="Bienvenue">

CSS spécifique

Exceptionnellement, ce snippet peut etre placé dans le head pour améliorer le rendu :

<style type="text/css">
.ExternalClass {
	display: block !important;
}
</style>
<style type="text/css">
.yshortcuts, .yshortcuts a, .yshortcuts a:link, .yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
	color: #000;
	text-decoration: none !important;
	border-bottom: none !important;
	background: none !important;
}
</style>

Astuce pour les tableaux

Contre les fameux blocs sans contenus (spacers, faux-fonds, etc…) qui « explosent »… un peu de CSS inline :

<tr>
<td bgcolor="#282828" height="49" style="font-size:0;line-height:0;">&nbsp;</td>
</tr>