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)
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