Les bases pour mettre en place une newsletter responsive...

1. Newsletters et responsive webdesign
Erwan Tanguy

2. Le webdesign et les newsletter
La problématique principale pour l’instant dans la
création de newsletters est que la plupart des clients
mails n’ont pas évolués et n’arrivent pas à interpréter
correctement les feuilles de styles. Les mises en page
se font ainsi avec des tableaux.
Avec l’arrivée des mobiles, il faudra jouer avec les
tableaux et les cellules pour afficher des contenus
différemment en fonction des supports.

3. L’approche responsive
À partir du moment où vous donnez au
tableau une largeur qui serait supérieure à
la largeur d’affichage réel d’un smartphone
ou plusieurs cellules par ligne, il est
nécessaire de mettre en place une autre
approche.
Nous remplacerons sur chaque ligne les
cellules par des tableaux qui prendront la
largeur en %.
Comme il existe encore des clients mail qui
ne supportent pas les media queries et
donc ne peuvent réagir à des requêtes en
fonctions de la taille de l’écran, nous allons
envisager la création d’un template en
« mobile first », c’est-à-dire en prenant le
mobile comme premier affichage.

4. Mise en page en tableau
<table>
<tr>
<td rowspan="3">Cellule 1</td> <td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
</tr>
<tr>
<td>Cellule 4</td>
</tr>
<tr>
<td colspan="2">Cellule 1</td> <td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
<td>Cellule 5</td>
</tr>
</table>
Un tableau en HTML est composé de
lignes (<tr>) et de cellules (<td>).
Il est possible de regrouper des
cellules horizontalement ou
verticalement grâce aux attributs
colspan et rowspan :
 Colspan pour regrouper sur une
ligne plusieurs cellules
(horizontal) ;
 Rowspan pour regrouper sur une
colonne plusieurs cellules
(vertical).

5. Colspan et rowspan
Colspan=2 : la cellule 1 correspond à la fusion de 2 cellules sur trois
présentes sur les lignes du tableau.
Rowspan=3 : la cellule 1 correspond à la fusion des 3 premières cellules
des 3 lignes du tableaux.
Important : il faut bien vérifier que les attributs colspan et rowspan soient
cohérents avec l’ensemble du tableau.

6. Design sur les tables
Les attributs communs
 class=« maclasse" : nom d’une classe pour définir des styles
 style="font-size: 35px; " : insertion de styles directement dans une balise
 bgcolor="#FFFFFF" : couleur de fond du tableau, d’une ligne ou d’une
cellule
 width="xx" : largeur du tableau ou d’une cellule en pixel ou en %
Les attributs de la balise <table>
 border="0" : largeur des bordures du tableau en pixel
 cellpadding="0" : marge à l’interieur des cellules
 cellspacing="0" : marge entre les cellules
 align="center" : alignement du tableau (left|right|center)

7. Design sur les tables
Les attributs de la balise <td> - cellule
 Valign="middle" : alignement vertical dans une cellule (top|middle|bottom|baseline)
 Align=left : alignement horizontal du contenu (left|center|right|justify)
 Nowrap : pour empêcher le texte de passer à la ligne
L’attribut style
 Border-collapse:collapse : fondre ou non les bordures du tableau et des cellules
(collapse|separate)
 Font-size:xxx : taille de la police
 Font-family:name : pour choisir une police – par défaut choisir au moins entre serif et sans-serif
 Font-weight:bold : pour graisser une font (normal|bold|valeur)
 Text-decoration:underline : soulignement ou non d’un texte (none|underline|overline|line-
through)
 Display:none : pour ne pas afficher des éléments
 …

8. Design hors des tables
Pour pouvoir modifier l’affichage, nous allons utiliser les media queries :
@media only screen and (min-width: 481px){…}
Les styles ici ne s’appliqueront que lorsque l’écran aura au moins une largeur supérieure à 481px,
c’est-à-dire pour tous les écrans sauf les mobiles en portrait.
.nomobile{width: inherit !important; display: table !important;}
Ici nous allons commencer par redonner des fonctionnalités classiques à nos tableaux
.trois{width: 33.33333333% !important;} ou .deux{width: 50% !important;} ou .quatre{width: 25%
!important;}
Pour définir la largeur des cellules ciblées
.test2{display:table-row !important;} pour redonner à une ligne son apparence (après un display
none par exemple)

9. Affichages mobiles
Dans l’application Inbox
Dans l’application Mail sur Iphone

10. Affichages sur ordinateur
Sur Gmail online
Dans Thunderbird

11. Mise en page en tableau
Il existe de nombreux templates de
newsletter.
http://blog.knowtify.io/223-free-email-
responsive-templates-for-your-campaign/
Listes des fonctions CSS supportés par les
différents clients mails :
https://www.campaignmonitor.com/css/
Capture des vues du template Underscore sur
les différents clients mails :
https://litmus.com/pub/b758c51/screenshots

12. Des outils
 https://assets.adobe.com/ propose un outil pour découper et récupérer les CSS à partir d’un PSD
 Plateformes abordable pour gérer des campagnes d’email : mailjet, sendinblue, mailchimp
 Liste d’outils pour la vérification de spam http://www.altospam.com/actualite/2014/01/des-
outils-de-verification-des-emails-pour-eviter-detre-considere-spammeur/
 Vérificateur d’affichage http://www.getinbox.com/ (gratuit pour 1 newsletter)
 Pour tester l’envoi http://putsmail.com/
 Pour travailler les images http://pixlr.com/editor
 Des templates http://zurb.com/playground/responsive-email-templates
