-
Notifications
You must be signed in to change notification settings - Fork 0
/
template.html
245 lines (219 loc) · 16.7 KB
/
template.html
1
2
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html>
<html>
<head>
<title>Responsive Email Boilerplate</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
/*
* Inlined styles explained
*
* 1. 'text-size-adjust' prefixed property is here to prevent Webkit and Windows Mobile platforms from changing default font sizes.
* 2. 'border-spacing: 0' property on <table> tags resolves webkit padding issue
* 3. 'border-collapse: collapse' property on <td> fix a padding issue for Outlook 07, 10
* 4. Some trouble with iOS who creates blue links over phone numbers, dates and addresses ?
* Check that: https://litmus.com/blog/remove-blue-links-ios
* 5. Gmail and Outlook.com unwantedly adds in an extra space below images when using non IE browsers.
* You may not always want all of your images to be block elements.
* Add 'display: block;' as inline style to any image you need to fix.
*/
/* Force Outlook.com to display emails at full width */
.ExternalClass {
display: block !important;
width: 100%;
}
/* Forces Outlook.com to display normal line spacing
More on that: http://www.emailonacid.com/forum/viewthread/43 */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Media queries */
/* French specific: Useless media querie to prevent the first media querie to be ignored on LaPoste Mobile web client */
@media screen and (max-width: 0) {
body {
margin: 0;
}
}
@media screen and (max-width: 600px) {
/* French specific: All properties must set to !important for the first specification to not be ignored on LaPoste, Orange, SFR and Voilà web client */
img {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
.container {
width: 95% !important;
}
/* Force container columns to (horizontal) blocks */
.force-col {
display: block;
padding-right: 0 !important;
}
.separator {
display: none;
}
.col {
/* Unset table align="left/right" */
float: none !important;
width: 100% !important;
/* Change left/right padding and margins to top/bottom ones */
margin-bottom: 10px !important;
padding-bottom: 10px !important;
border-bottom: 1px solid #ebebeb;
}
/* Remove bottom border for last column/row */
#last-col-2,
#last-col-3 {
margin-bottom: 0;
border-bottom: none !important;
}
/* Align images right and shrink them a bit */
.col-3-img {
float: right;
width: 130px;
margin-left: 5px;
}
/* Align images right and shrink them proportionally */
.col-2-img {
float: right;
width: 45%;
margin-left: 5px;
}
}
/* Give content more room on mobile */
@media screen and (max-width: 480px) {
.content {
padding-right: 10px !important;
padding-left: 10px !important;
}
/* Return to the above and take all the available space */
.col-2-img {
width: 100% !important;
}
}
</style>
</head>
<body style="width: 100%; margin: 0; padding: 0; background-color: #ebebeb; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#ebebeb" class="wrapper" style="background-color: #ebebeb; border-spacing: 0;">
<tr>
<td align="center" valign="top" bgcolor="#ebebeb" class="center" style="padding: 20px 0; background-color: #ebebeb; border-collapse: collapse; vertical-align: top;">
<table width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" class="container" style="font-family: Arial, sans-serif; border-spacing: 0;">
<tr>
<td align="left" valign="top" bgcolor="#ffffff" class="content" style="padding: 20px 25px; font-size: 14px; line-height: 20px; color: #333; background-color: #fff; border-collapse: collapse; vertical-align: top;">
<div class="title" style="font-size: 18px; font-weight: bold; line-height: 24px; color: #c21f52;">Responsive Email Boilerplate</div>
<br>
Ce template est une base de travail lorsque l'on souhaite construire un modèle pour des emailings. Ce dernier s'adapte aux mobiles en mixant design fluide et adaptatif.
<br><br>
Un jeu de tableaux permet de centrer la zone de contenu. La balise <span class="code" style="font-family: Andale Mono, Courier, monospace; color: #666;"><table></span> possédant une largeur de 100% permet de garantir que la zone de contenu sera centrée même sur les clients qui suppriment la balise <span class="code" style="font-family: Andale Mono, Courier, monospace; color: #666;"><body></span>.
<br><br>
La balise <span class="code" style="font-family: Andale Mono, Courier, monospace; color: #666;"><table></span> avec la classe <span class="code" style="font-family: Andale Mono, Courier, monospace; color: #666;">container</span> fonctionne de la manière suivante :
<br><br>
<strong>Sur ordinateur :</strong>
<ul>
<li>Elle encadre le contenu à la largeur maximum conseillée de <span class="code" style="font-family: Andale Mono, Courier, monospace; color: #666;">600px</span></li>
<li>Un padding de <span class="code" style="font-family: Andale Mono, Courier, monospace; color: #666;">25px</span> est appliqué sur la gauche et la droite, ce qui signifie que le contenu occupe une place réelle de <span class="code" style="font-family: Andale Mono, Courier, monospace; color: #666;">550px</span></li>
</ul>
<strong>Sur mobile :</strong>
<ul>
<li>La zone de contenu devient fluide et prend une largeur de <span class="code" style="font-family: Andale Mono, Courier, monospace; color: #666;">95%</span></li>
<li>En deça de <span class="code" style="font-family: Andale Mono, Courier, monospace; color: #666;">480px</span> de largeur, le padding passe à <span class="code" style="font-family: Andale Mono, Courier, monospace; color: #666;">10px</span> sur la gauche et la droite</li>
</ul>
<br>
<div class="title" style="font-size: 18px; font-weight: bold; line-height: 24px; color: #c21f52;">Une image occupant toute la largeur</div>
<br>
<img src="http://placehold.it/550x120" alt="" border="0" style="text-decoration: none; outline: none; -ms-interpolation-mode: bicubic;">
<br><br>
<div class="title" style="font-size: 18px; font-weight: bold; line-height: 24px; color: #c21f52;">Utilisation de colonnes pour la mise en forme de contenus</div>
<br>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0;">
<tr>
<td valign="top" class="force-col" style="padding-right: 20px; border-collapse: collapse; vertical-align: top;">
<table border="0" cellspacing="0" cellpadding="0" width="265" align="left" class="col" style="border-spacing: 0;">
<tr>
<td align="left" valign="top" style="border-collapse: collapse; vertical-align: top;">
<img src="http://placehold.it/265x190" alt="" border="0" class="col-2-img" style="text-decoration: none; outline: none; -ms-interpolation-mode: bicubic;">
<div class="subtitle" style="font-size: 15px; font-weight: bold; line-height: 20px; color: #c21f52;">
<a href="#" style="text-decoration: underline; color: #4b85bd;">Lorem ipsum</a>
</div>
Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet…
</td>
</tr>
</table>
</td>
<td valign="top" class="force-col" style="border-collapse: collapse; vertical-align: top;">
<table id="last-col-2" border="0" cellspacing="0" cellpadding="0" width="265" align="left" class="col" style="border-spacing: 0;">
<tr>
<td align="left" valign="top" style="border-collapse: collapse; vertical-align: top;">
<img src="http://placehold.it/265x190" alt="" border="0" class="col-2-img" style="text-decoration: none; outline: none; -ms-interpolation-mode: bicubic;">
<div class="subtitle" style="font-size: 15px; font-weight: bold; line-height: 20px; color: #c21f52;">
<a href="#" style="text-decoration: underline; color: #4b85bd;">Lorem ipsum</a>
</div>
Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet…
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0;">
<tr>
<td valign="top" class="force-col" style="padding-right: 20px; border-collapse: collapse; vertical-align: top;">
<table border="0" cellspacing="0" cellpadding="0" width="170" align="left" class="col" style="border-spacing: 0;">
<tr>
<td align="left" valign="top" style="border-collapse: collapse; vertical-align: top;">
<img src="http://placehold.it/170x130" alt="" border="0" class="col-3-img" style="text-decoration: none; outline: none; -ms-interpolation-mode: bicubic;">
<div class="subtitle" style="font-size: 15px; font-weight: bold; line-height: 20px; color: #c21f52;">
<a href="#" style="text-decoration: underline; color: #4b85bd;">Lorem ipsum</a>
</div>
Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet…
</td>
</tr>
</table>
</td>
<td valign="top" class="force-col" style="padding-right: 20px; border-collapse: collapse; vertical-align: top;">
<table border="0" cellspacing="0" cellpadding="0" width="170" align="left" class="col" style="border-spacing: 0;">
<tr>
<td align="left" valign="top" style="border-collapse: collapse; vertical-align: top;">
<img src="http://placehold.it/170x130" alt="" border="0" class="col-3-img" style="text-decoration: none; outline: none; -ms-interpolation-mode: bicubic;">
<div class="subtitle" style="font-size: 15px; font-weight: bold; line-height: 20px; color: #c21f52;">
<a href="#" style="text-decoration: underline; color: #4b85bd;">Lorem ipsum</a>
</div>
Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet…
</td>
</tr>
</table>
</td>
<td valign="top" class="force-col" style="border-collapse: collapse; vertical-align: top;">
<table id="last-col-3" border="0" cellspacing="0" cellpadding="0" width="170" align="left" class="col" style="border-spacing: 0;">
<tr>
<td align="left" valign="top" style="border-collapse: collapse; vertical-align: top;">
<img src="http://placehold.it/170x130" alt="" border="0" class="col-3-img" style="text-decoration: none; outline: none; -ms-interpolation-mode: bicubic;">
<div class="subtitle" style="font-size: 15px; font-weight: bold; line-height: 20px; color: #c21f52;">
<a href="#" style="text-decoration: underline; color: #4b85bd;">Lorem ipsum</a>
</div>
Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet…
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#ebebeb" class="footer" style="padding: 10px 25px 0; font-size: 12px; line-height: 15px; text-align: center; color: #9f9f9f; background-color: #ebebeb; border-collapse: collapse; vertical-align: top;">
Vous recevez cet email car vous êtes enregistrée sur notre site avec cette adresse email. Si vous ne souhaitez plus recevoir d'emails promotionnels de notre part, <a href="#" style="text-decoration: none; color: #7d7d7d;">vous pouvez vous désinscrire</a>.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>