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 plupa...
L’approche responsive
À partir du moment où vous donnez au
tableau une largeur qui serait supérieure à
la largeur d’affich...
Mise en page en tableau
<table>
<tr>
<td rowspan="3">Cellule 1</td> <td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
</tr>...
Colspan et rowspan
Colspan=2 : la cellule 1 correspond à la fusion de 2 cellules sur trois
présentes sur les lignes du tab...
Design sur les tables
Les attributs communs
 class=« maclasse" : nom d’une classe pour définir des styles
 style="font-s...
Design sur les tables
Les attributs de la balise <td> - cellule
 Valign="middle" : alignement vertical dans une cellule (...
Design hors des tables
Pour pouvoir modifier l’affichage, nous allons utiliser les media queries :
@media only screen and ...
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-...
Des outils
 https://assets.adobe.com/ propose un outil pour découper et récupérer les CSS à partir d’un PSD
 Plateformes...
Prochain SlideShare
Chargement dans…5
×

Newsletters rwd

423 vues

Publié le

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

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
423
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
1
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Newsletters rwd

  1. 1. Newsletters et responsive webdesign Erwan Tanguy
  2. 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. 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. 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. 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. 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. 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. 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. 9. Affichages mobiles Dans l’application Inbox Dans l’application Mail sur Iphone
  10. 10. Affichages sur ordinateur Sur Gmail online Dans Thunderbird
  11. 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. 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 

×