Accueil > Blog > Intégration, développement > Créer une newsletter responsive

Créer une newsletter responsive

Aujourd’hui, créer une newsletter responsive est essentiel. Malgré tout bon nombre de newsletters nous arrivent complètement déstructurées dans les boites mails de nos smartphones et tablettes.

Plusieurs solutions existent pour créer votre newsletter responsive. Certaines sont meilleures que d’autres, mais il est nécessaire de faire un travail global également avec les graphistes pour ne pas se retrouver avec des créations infaisables en HTML responsive.

Autre difficulté et non des moindres, la charte graphique est rarement adapté à une newsletter responsive.

Alors quel choix pour créer sa newsletter ?

Utiliser des templates préformatés

Le choix est large et varié, une petite requête dans notre ami Google vous montrera que le nombre de ressources est important.

Je ferais ma sélection dans ces 3 là :

L’avantage est que vous n’avez qu’à choisir l’un de ceux-ci et à faire travailler le graphiste sur une de ses bases. Néanmoins, vos emails risquent vite de ressembler aux concurrents (et alors me direz-vous tant que la charte est bien identifiée ?)

Créer sa newsletter responsive

Pour ma part, j’ai toujours eu des difficultés en raison des contraintes graphiques imposées à travailler avec ce type de template. Par ailleurs, le rendu sur Outlook 2010-2013 n’est pas forcément toujours cohérent avec ces templates formatés en <div>

Head

3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Mon titre ici</title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {
  padding: 0;
} /* Force Outlook to provide a "view in browser" menu link. */
body {
  width: 100% !important;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass {
  width: 100%;
} /* Force Hotmail to display emails at full width */
.ReadMsgBody {
  width: 100%;
}
.ExternalClass * {
  line-height: 100%;
} /* Force Hotmail to display normal line spacing.*/
#backgroundTable {
  margin: 0;
  padding: 0;
  width: 100% !important;
  line-height: 100% !important;
}
img {
  outline: none;
  text-decoration: none;
  border: none;
  -ms-interpolation-mode: bicubic;
}
a img {
  border: none;
}
.image_fix {
  display: block;
}
p {
  margin: 0px 0px !important;
}
table td {
  border-collapse: collapse;
}
table {
  border-collapse: collapse;
  mso-table-lspace: 0pt;
  mso-table-rspace: 0pt;
}
a {
  color: #0a8cce;
  text-decoration: none;
  text-decoration: none!important;
}
/*STYLES*/
table[class=full] {
  width: 100%;
  clear: both;
}
 
/*IPAD STYLES*/
@media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
  text-decoration: none;
  color: #0a8cce; /* or whatever your want */
  pointer-events: none;
  cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
  text-decoration: default;
  color: #0a8cce !important;
  pointer-events: auto;
  cursor: default;
}
table[class=devicewidth] {
  width: 100%!important;
  text-align: center!important;
}
table[class=devicewidthinner] {
  width: 98%!important;
  text-align: center!important;
}
img[class=banner] {
  width: 100%!important;
  height: 220px!important;
}
img[class=colimg2] {
  width: 100%!important;
  height: 220px!important;
}
}
}
 
@media only screen and (max-width: 400px) {
td[class=banniere] {
  display: block!important
}
}
 
/*IPHONE STYLES*/
@media only screen and (max-width: 480px) {
a[href^="tel"], a[href^="sms"] {
  text-decoration: none;
  color: #0a8cce; /* or whatever your want */
  pointer-events: none;
  cursor: default;
}
 
td[class=width-100] {
  width: 100%!important;
  text-align: center!important;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
  text-decoration: default;
  color: #0a8cce !important;
  pointer-events: auto;
  cursor: default;
}
table[class=devicewidth] {
  width: 100%!important;
  text-align: center!important;
}
table[class=devicewidthinner] {
  width: 98%!important;
  text-align: center!important;
}
img[class=banner] {
  width: 100%!important;
  height: 140px!important;
}
img[class=colimg2] {
  width: 100%!important;
  height: 140px!important;
}
td[class=mobile-hide] {
  display: none!important;
}
td[class="padding-bottom25"] {
  padding-bottom: 25px!important;
}
}
</style>
</head>

Cette magnifique partie de style permet plusieurs choses : réduire les différences entre les différents Webmail et logiciels, permettre d’attribuer des class spécifiques même dans Yahoo mail…

Ensuite, j’envisage chaque zone de manière indépendante situées dans des <table> ayant pour width:100%

3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!-- HEADING -->
<table id="backgroundTable" border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#eef3f9">
<tbody>
<tr>
<td>
<table class="devicewidth" border="0" width="600" cellspacing="0" cellpadding="0" align="center" bgcolor="#b12323"><!-- Spacing -->
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;" height="10"></td>
</tr>
<!-- Spacing -->
<tr>
<td>
Infos client
Offre valable jusqu'au XX/XX/15
<table class="devicewidthinner" border="0" width="580" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="font-family: 'Roboto', Arial, sans-serif; font-size: 16px; color: #ffffff; text-align: left; line-height: 25px; width: 45%;">Infos client,</td>
</tr>
</tbody>
</table>
&nbsp;
<img src="html/logo_marque.png" alt="Marque" />
<table class="devicewidthinner" border="0" width="580" cellspacing="0" cellpadding="0" align="center">
<tbody><!-- Spacing -->
<tr>
<td style="font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;" height="10"></td>
</tr>
<!-- Spacing -->
<tr>
<td style="font-family: 'Roboto', Arial, sans-serif; font-size: 16px; font-weight: bold; color: #ffffff; text-align: center; line-height: 28px; vertical-align: middle;">Mon message d'en tête</td>
<!-- Spacing -->
<td style="font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;" height="10"></td>
<!-- Spacing --></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
&nbsp;</td>
</tr>
</tbody>
</table>
<!-- END HEADING -->

Les class BackgroundTable et devicewidth font le reste du taff, en sachant que je bloque à 600px max la largeur d’affichage pour encore optimiser un petit peu !

Allez lancez vous !
Et si vous le souhaitez, vous pouvez également ajouter une vidéo dans votre email.

Partagez-le !Share on Facebook0Tweet about this on TwitterPin on Pinterest0Share on LinkedIn0Share on Google+0Share on Reddit0Email this to someone

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *