-
Notifications
You must be signed in to change notification settings - Fork 0
/
brand-guidelines.html
405 lines (389 loc) · 22 KB
/
brand-guidelines.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
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
<!DOCTYPE html>
<html>
<head>
<title>Holiday Extras Email Brand Guidelines</title>
<link rel="shortcut icon" href="https://dmy0b9oeprz0f.cloudfront.net/holidayextras.co.uk/brand-guidelines/logo-tags/png/door-tag.png" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-gb">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" initial-scale="1">
<meta name="x-apple-disable-message-reformatting">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/themes/cupertino/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/prettify/skins/tomorrow-night.css" />
<link rel="stylesheet" type="text/css" href="css/brand-guidelines.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/prettify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/prettify/lang-css.js"></script>
<script src="js/files.js"></script>
<script src="js/fileload-brandguidelines.js"></script>
<script src="js/jqueryvisible.js"></script>
<script src="js/brand-guidelines.js"></script>
</head>
<body>
<div class="toTheTop"><a href="#top"><i class="fas fa-arrow-circle-up"></i></a></div>
<div class="container">
<div class="row">
<div class="col-sm-3 white leftCol">
<div class="col-sm-12 text-center brandLogo"><img src="https://dmy0b9oeprz0f.cloudfront.net/holidayextras.co.uk/brand-guidelines/logo-tags/png/robot-3.png"></div>
<div class="col-sm-12 pad30 nav">
<ul>
<li style="display:none">
<a href="#top"></a>
</li>
<li>
<a href="#introduction">Introduction</a>
</li>
<li>
<a href="#logos">Logos</a>
</li>
<li>
<a href="#colours">Colours</a>
</li>
<li>
<a href="#typography">Typography</a>
</li>
<li>
<a href="#imagery">Imagery</a>
</li>
<li>
<a href="#accessibility">Accessibility</a>
</li>
<li>
<a href="#previewText">Preview text</a>
</li>
<li><a href="#outlookConditionals">Outlook Conditionals</a></li>
<li><a href="#responsiveness">Responsiveness</a></li>
<li>
<a href="#layoutModules">Layout Modules</a>
</li>
<li>
<a href="#componentModules">Component Modules</a>
</li>
</ul>
</div>
</div>
<div id="scroll" class="col-sm-9 contentCol rightCol grey padReset scroll">
<div class="col-sm-12 width602 padReset pad30_0_30_0 contentSections title" id="top">
<h1>Holiday Extras</h1>
<h2>Email design system</h2>
<hr class="sectionRule">
<p>This email design system is intended to inform, educate and aid in the design and development of emails for the Holiday Extras brand. You will find information on colours, typography, components and much more, to
help ensure brand consistency across our emails.</p>
</div>
<hr class="sectionDividers">
<div class="col-sm-12 width602 padReset pad30_0_30_0 contentSections introduction" id="introduction">
<div class="col-sm-12 padReset">
<h2>Introduction</h2>
<h3>Primary</h3>
</div>
</div>
<hr class="sectionDividers">
<div class="col-sm-12 width602 padReset pad30_0_30_0 contentSections logos" id="logos">
<div class="col-sm-12 padReset">
<h2>Logos</h2>
<h3>Primary</h3>
</div>
<div class="row">
<div class="col-sm-9 padReset">
<p>Instead of one set logo, we have a selection of playful logo tag shapes that can be used.<br><br>Be sure to match the theme of the logo with the theme of the email content as closely as possible.</p>
</div>
<div class="col-sm-3 padReset slideshow"></div>
</div>
<div class="col-sm-12 padReset"><a href="https://brand.holidayextras.com/logo-tags.html" target="_blank" class="button">View full suite of logos</a></div>
</div>
<hr class="sectionDividers">
<div class="col-sm-12 width602 padReset pad30_0_30_0 contentSections colours" id="colours">
<div class="col-sm-12 padReset">
<h2>Colours</h2>
<h3>Swatch</h3>
</div>
<div class="col-sm-12 padReset primaryColours">
<span class="colourSwatch">#542E91</span><span class="colourSwatch">#FDDC06</span><span class="colourSwatch">#FFFFFF</span><span class="colourSwatch">#F0F0F0</span><span class="colourSwatch">#232323</span>
</div>
<div class="col-sm-12 padReset">
<h3>Colour combinations</h3>
</div>
<div class="row">
<div class="col-sm-6 padReset accepted text-center">
<i class="fas fa-check-circle"></i>
</div>
<div class="col-sm-6 padReset rejected text-center">
<i class="fas fa-times-circle"></i>
</div>
</div>
<div class="row">
<div class="col-sm-6 padReset accepted text-center">
<p class="bgPurple fontWhite">Holiday Extras</p>
<p class="bgPurple fontYellow">Holiday Extras</p>
</div>
<div class="col-sm-6 padReset rejected text-center">
<p class="bgPurple fontGrey">Holiday Extras</p>
<p class="bgPurple fontBlack">Holiday Extras</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 padReset accepted text-center">
<p class="bgYellow fontPurple">Holiday Extras</p>
<p class="bgYellow fontBlack">Holiday Extras</p>
</div>
<div class="col-sm-6 padReset rejected text-center">
<p class="bgYellow fontWhite">Holiday Extras</p>
<p class="bgYellow fontGrey">Holiday Extras</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 padReset accepted text-center">
<p class="bgWhite fontPurple">Holiday Extras</p>
<p class="bgWhite fontBlack">Holiday Extras</p>
</div>
<div class="col-sm-6 padReset rejected text-center">
<p class="bgWhite fontYellow">Holiday Extras</p>
<p class="bgWhite fontGrey">Holiday Extras</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 padReset accepted text-center">
<p class="bgGrey fontPurple">Holiday Extras</p>
<p class="bgGrey fontBlack">Holiday Extras</p>
</div>
<div class="col-sm-6 padReset rejected text-center">
<p class="bgGrey fontYellow">Holiday Extras</p>
<p class="bgGrey fontWhite">Holiday Extras</p>
</div>
</div>
</div>
<hr class="sectionDividers">
<div class="col-sm-12 width602 padReset pad30_0_30_0 contentSections typography" id="typography">
<div class="col-sm-12 padReset">
<h2>Typography</h2>
</div>
<div class="row">
<div class="col-sm-5 padReset pad30_0_0_0 dit">
<p>All emails should use the font 'HolidayExtras Sans' where possible. There are two weights available, regular and bold.</p>
<p></p>
</div>
<div class="padReset col-sm-1 dit"></div>
<div class="padReset col-sm-6 dit pad30_0_0_0 valignTop">
<div class="col-md-12 padReset font">
<p class="hxRegular">Holiday Extras Sans Regular</p>
<p class="hxBold">Holiday Extras Sans Bold</p>
</div>
<div class="col-md-12 padReset">
<a class="downloadFont" href="https://brand.holidayextras.com/assets/downloads/01-fonts/HolidayExtrasSans.zip">Download font <i class="fas fa-cloud-download-alt"></i></a>
</div>
</div>
</div>
<div class="col-sm-12 padReset">
<p>Text should be left aligned for headlines, subtitles and paragraphs. In some instances central alignment is acceptable, for instance in promotional banners.</p>
<br>
<h3>Fallbacks</h3>
<p>'HolidayExtras Sans' is a web font, hosted online and imported in to the email with CSS. Support for web fonts in email clients is not universal, with Gmail the most notable client that will ignore the font. When web fonts aren't
supported we need to supply fallbacks of supported fonts, to prevent the inboxes default font from being applied. The fallback list and order is as follows:</p>
<ul>
<li>HolidayExtras Sans Regular</li>
<li style="font-weight:bold">HolidayExtras Sans Bold</li>
<li style="font-weight:normal; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif">Helvetica Neue Regular</li>
<li style="font-weight:bold; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif">Helvetica Neue Bold</li>
<li style="font-weight:normal; font-family: Helvetica, Arial, sans-serif">Helvetica Regular</li>
<li style="font-weight:bold; font-family: Helvetica, Arial, sans-serif">Helvetica Bold</li>
<li style="font-weight:normal; font-family: Arial, sans-serif">Arial Regular</li>
<li style="font-weight:bold; font-family: Arial, sans-serif">Arial Bold</li>
<li style="font-weight:normal; font-family: sans-serif">Sans-serif Regular</li>
<li style="font-weight:bold; font-family: sans-serif">Sans-serif Bold</li>
</ul>
<h3>Code snippets</h3>
<p>Include the following code within your email's <span style="font-weight:bold"><style></span> tags to use the font within emails.</p>
<pre class="prettyprint"><code class="prettyprint">@media screen {
@font-face {
font-family: 'HolidayExtras Sans';
src: url(https://d17s4kc6349e5h.cloudfront.net/holidayextras/assets/fonts/HolidayExtrasSans-Regular.woff) format('woff');
font-weight: normal;
font-style: normal
}
@font-face {
font-family: 'HolidayExtras Sans';
src: url(https://d17s4kc6349e5h.cloudfront.net/holidayextras/assets/fonts/HolidayExtrasSans-Bold.woff) format('woff');
font-weight: bold;
font-style: normal
}
}</code></pre>
<p>To style your text, include the following font-family; complete with fallback list, within the element's style attribute.</p>
<pre class="prettyprint"><code class="prettyprint">font-family: 'HolidayExtras Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif</code></pre>
</div>
</div>
<hr class="sectionDividers">
<div class="col-sm-12 width602 padReset pad30_0_30_0 contentSections imagery" id="imagery">
<div class="col-sm-12 padReset">
<h2>Imagery</h2>
<h3>Brand personality images</h3>
</div>
<div class="col-sm-12 padReset">
<p>All brand personality images must be provided by the Brand team. Previous images can be used where suitable, with consultation from the Brand team. When new brand personality imagery is required, a SIMPLE jira request must be raised.
</p>
</div>
<div class="col-sm-12 padReset">
<h4 class="pad15_0_15_0">Email banner</h4>
<img src="https://dmy0b9oeprz0f.cloudfront.net/holidayextras.co.uk/email-images/sept-transfers-image.jpg" width="50%" height="auto"><br>
<h4 class="pad15_0_15_0">Landing banner</h4>
<img src="https://dmy0b9oeprz0f.cloudfront.net/holidayextras.co.uk/email-images/4629-HX-homepage-1600x455-september-transfers.jpg" width="100%" height="auto" style="border: 1px solid #dadada;">
</div>
<div class="col-sm-12 padReset pad15_0_15_0"><a href="https://trello.com/b/9UUcB1v2/simple-brand-imagery" target="_blank" class="button">Brand personality trello</a></div>
<div class="col-sm-12 padReset pad30_0_0_0">
<p>When using brand pesonality imagery for <span style="font-weight:bold">parking</span>, <span style="font-weight:bold">hotels</span> or <span style="font-weight:bold">hotels & parking</span>, a url for the landing page version of the
imagery must be passed through within a param in your link urls. This is to ensure consistency is maintained between the email and landing page.<br><br>To pass an image url within a param, you must first encode your image url at <a
href="https://www.urlencoder.io/">urlencode.io</a>. Once encoded you will use the url as a value for one of the following params - <span style="font-weight:bold">cpImage</span>,
<span style="font-weight:bold">hoImage</span>,
<span style="font-weight:bold">hcpImage</span>. See example below:</p>
</div>
<div class="col-sm-12 padReset pad30_0_0_0">
<p class="imgURL">
https://www.holidayextras.co.uk/?cpImage=https://dmy0b9oeprz0f.cloudfront.net/holidayextras.co.uk/email-images/4629-HX-homepage-1600x455-september-parking-15pc-email.jpg&hoImage=https://dmy0b9oeprz0f.cloudfront.net/holidayextras.co.uk/email-images/4629-HX-homepage-1600x455-september-hotel.jpg&hcpImage=https://dmy0b9oeprz0f.cloudfront.net/holidayextras.co.uk/email-images/4629-HX-homepage-1600x455-september-hotel-parking.jpg
</p>
</div>
</div>
<hr class="sectionDividers">
<div class="col-sm-12 width602 padReset pad30_0_30_0 contentSections accessibility" id="accessibility">
<div class="col-sm-12 padReset">
<h2>Accessibility</h2>
</div>
<div class="col-sm-12 padReset">
<h3>What is accessibility in email?</h3>
<p>Accessibility in email is about tailoring the design and development of emails to allow as many people as possible to understand our message, regardless of disabilities or assistive technologies.</p><br>
<h3>How to improve accessibility</h3>
<h4 class="pad15_0_15_0">Structural markup</h4>
<p>By default, many assistive technologies interpret HTML tables as data tables. What this means is that for a 2-column layout it would read "Table, Column 1, Cell, [Content]. Column 2, Cell, [Content]".<br><br>This is not positive user
experience for the customer, and can be responsible for breaking the natural flow of an email. To avoid this add <span style="font-weight:bold">role="presentation"</span> to all structural table markup. This ignores the structural
elements of the table and announces only the content.</p>
<pre class="prettyprint"><code class="prettyprint"><table border="0" cellpadding="0" cellspacing="0" role="presentation"></code></pre>
<p>If there are elements you wish to be completed ignored by assistive technology (for example, interactive elements) then <span style="font-weight:bold">aria-hidden="true"</span> should be added to their markup.</p>
<pre class="prettyprint"><code class="prettyprint"><table border="0" cellpadding="0" cellspacing="0" role="presentation" aria-hidden="true">
<tr>
<td aria-hidden="true">
<img src="IMG_URL" aria-hidden="true" alt="">
</td>
</tr>
</table></code></pre>
<h4 class="pad15_0_15_0">Alt text on images</h4>
<p>A common misconception is that best practice for accessibility is to mark up all images with descriptive alt text, within <span style="font-weight:bold">alt=""</span> tags. Unnecessary alt text can cause repetition when reading with
images off or with assistive technology. It is best to use descriptive alt text when that image's message is not repeated elsewhere on the page, if the image is superficial only, the alt tags should be left empty.<br><br>Whether the
description is empty or not, images should always have alt tags, as the lack of these tags will cause assistive technology to read the source link for the image.</p>
<h4 class="pad15_0_15_0">Title tags on links</h4>
<p>The <span style="font-weight:bold">title=""</span> tag should be used only if the link text does not accurately describe the purpose of the link. Title text should not be used if it is a duplication of the link text.</p>
<h4 class="pad15_0_15_0">Font style</h4>
<p><span style="text-decoration:underline">Desktop</span>: Minimum 14px / Recommended body 16px</p>
<p><span style="text-decoration:underline">Mobile</span>: Minimum 16px / Recommended body 18px</p>
<br>
<p>To ensure standardisation of line height across all font sizes, the line height should be set at 1.3, as opposed to a hard pixel number. This sets the line height at 1.3 x font size.</p>
<h4 class="pad15_0_15_0">Semantic markup</h4>
<p>Semantic markup is the use of HTML tags or attributes to convey the meaning, context and hierarchy of elements within our email. Previously we have spoken about the way assistive technology naturally interprets a HTML table as a data
table, but by adding role presentation we can change to the table to be interpreted as a layout table only. Both data and presentation are semantic meanings for the table tag.<p>
<br>
<p>It is important that all text within an email is given semantic markup to provide context on whether it is a heading, subheading or list, this will allow assistive technology to break content in to sections. Semantic tags of note
are:
<br><br>
<span style="font-weight:bold"><h1></span>,
<span style="font-weight:bold"><h2></span>,
<span style="font-weight:bold"><h3></span>,
<span style="font-weight:bold"><h4></span>,
<span style="font-weight:bold"><h5></span>,
<span style="font-weight:bold"><h6></span> for headers/subheaders/section headers<br><br>
<span style="font-weight:bold"><p></span> for paragraph text/body text<br><br>
<span style="font-weight:bold"><ul><li></span> for an unordered list<br><br>
<span style="font-weight:bold"><ol><li></span> for an ordered list</p>
</div>
<div class="row padReset pad15_0_0_0">
<div class="col-sm-6 padReset text-center">
<h4>Non-semantic</h4>
</div>
<div class="col-sm-6 padReset text-center">
<h4>Semantic</h4>
</div>
</div>
<div class="row padReset">
<div class="col-sm-6 padReset pad5">
<pre class="prettyprint width100 marginReset height100"><code class="prettyprint height100"><table border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td style="font-size:30px; font-weight:bold; color:#542E91">Dreaming of your next getaway?</td>
</tr>
<tr>
<td style="font-size:22px; font-weight:bold; color:#232323">Pre-book now and save</td>
</tr>
<tr>
<td style="font-size:16px; font-weight:bold; color:#232323">Did you know that by booking early you can save up to 70%?</td>
<td style="font-size:16px; font-weight:bold; color:#232323">
Product 1<br>
Product 2<br>
Product 3<br>
Product 4<br>
</td>
</tr>
</table></code></pre>
</div>
<div class="col-sm-6 padReset pad5">
<pre class="prettyprint width100 marginReset height100"><code class="prettyprint height100"><table border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td>
<h1 style="font-size:30px; font-weight:bold; color:#542E91">Dreaming of your next getaway?</h1>
<h2 style="font-size:22px; font-weight:bold; color:#232323">Pre-book now and save</h2>
<p style="font-size:16px; font-weight:bold; color:#232323">Did you know that by booking early you can save up to 70%?</p>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
<li>Product 4</li>
</ul>
</td>
</tr>
</table></code></pre>
</div>
</div>
<div class="col-sm-12 padReset pad15_0_0_0">
<p>*Best practice when using heading tags is to use only one <span style="font-weight:bold"><h1></span> tag, as the title of your email. Additionally, you can move backwards and forwards when using heading levels (e.g,
<span style="font-weight:bold"><h2></span> then
<span style="font-weight:bold"><h3></span> then
<span style="font-weight:bold"><h2></span>), but heading levels are hierarchical and should not be skipped (e.g,
<span style="font-weight:bold"><h2></span> to
<span style="font-weight:bold"><h4></span> to
<span style="font-weight:bold"><h5></span> to
<span style="font-weight:bold"><h3></span>).<p>
</div>
</div>
<hr class="sectionDividers">
<div class="col-sm-12 width602 padReset pad30_0_30_0 contentSections previewText" id="previewText">
<div class="col-sm-12 padReset">
<h2>Preview Text</h2>
<h3>Primary</h3>
</div>
</div>
<hr class="sectionDividers">
<div class="col-sm-12 width602 padReset pad30_0_30_0 contentSections outlookConditionals" id="outlookConditionals">
<div class="col-sm-12 padReset">
<h2>Outlook conditionals</h2>
<h3>Primary</h3>
</div>
</div>
<hr class="sectionDividers">
<div class="col-sm-12 width602 padReset pad30_0_30_0 contentSections responsiveness" id="responsiveness">
<div class="col-sm-12 padReset">
<h2>Responsiveness</h2>
<h3>Primary</h3>
</div>
</div>
<hr class="sectionDividers">
<div class="col-sm-12 width602 padReset pad30_0_30_0 contentSections modules layoutModules" id="layoutModules">
<h2>Layout modules</h2>
</div>
<hr class="sectionDividers">
<div class="col-sm-12 width602 padReset pad30_0_30_0 contentSections modules componentModules" id="componentModules">
<h2>Component modules</h2>
</div>
</div>
</div>
</div>
</body>
</html>