View
427
Download
0
Category
Preview:
Citation preview
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
Recommended