Newsletters et responsive webdesign Erwan Tanguy

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.

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.

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

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.

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)

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 …

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)

Affichages mobiles

Dans l’application Inbox

Dans l’application Mail sur Iphone

Affichages sur ordinateur

Sur Gmail online

Dans Thunderbird

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

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