A brief guide to the key rules we follow when designing emails for various email campaigns across different devices.
1. We use a table-based approach to layout.
2. We avoid CSS abbreviations and use the full code:
padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;3. We use full HEX values for colors— #bb0000.
4. We do not use abbreviated font notation such as font: 12px arial;.
5. We use nested tables without using colspan and rowspan.
6. Attributes cellpadding and cellspacing are placed in 0.
7. For the border for tables table we use only 0.
8. For line-height we’ll use only pixels.
9. We use the <br> to manually insert breaks between blocks of text.
10. Use the preheader text, which appears next to the email subject line:
<div style="font-size: 0px; font-color: #ffffff; opacity: 0; visibility: hidden; width: 0; height: 0; display: none;">текст прехедера</div>11. Use UTF-8 encoding:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">12. We specify alt for images, since the email should still display properly even without them.
13. It is recommended background to bgcolor use it only for the table.
14. We wrap the email address and phone number in a link ourselves ... and apply styles so that email clients do not use their own styles.
15. To solve the problem with automatic email scaling in iOS 10 and iOS, use (this prevents iOS devices from changing the email content for easier reading):
<meta name="x-apple-disable-message-reformatting">or CSS:
-webkit-text-size-adjust:none; -ms-text-size-adjust: none;16. Use standard fonts, such as Arial, Verdana, Tahoma, and Times New Roman.
17. Do not use relative links (/path) or protocol-less links (//site.ru/path), as links must include a protocol and a hostname (https://site.ru/path), since the default protocol for these may be file://.
18. We use http:// instead of https://.
19. Do not use external URL shorteners such as vk.cc, bit.ly, and similar services.
20. Specify the target="_blank"so that the link always opens in a new window or tab. Behavior may vary across different operating systems and the services used to open links, and can be unpredictable.
21. Include the title to all links.
22. Shorten the code length so that the size does not exceed 102 KB and 100 KB, since, for example, the Gmail and Yahoo web interfaces truncate emails.
23. Use a single column.
24. The column should preferably be no wider than 500–600 pixels, though sometimes it’s made up to 700 pixels.
25. The area for buttons and links is 44 x 44 pixels.
26. The minimum font size displayed on an iPhone is 13 pixels.
27. Use display: none; to hide non-essential elements.
28. For mobile devices, we use separate media queries; they are now fully supported:
<style type="text/css">
@media only screen and (max-device-width: 480px) {
/* сюда пишутся стили для мобильных платформ */
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { … }
/* сюда пишется CSS для десктопа */
</style>Use additional queries if necessary:
@media screen and (device-width: 480px) and (device-height: 360px), screen and (device-width: 360px) and (device-height: 480px), screen and (device-width: 320px) and (device-height: 240px) { ... }29. The display width of previous iPhone models is 480px (portrait mode)
30. A two-column layout could look like this:
<table width="640" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="320" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td><p>Column Left Content</p></td>
</tr>
</table>
<table width="320" border="0" cellspacing="0" cellpadding="20" align="right">
<tr>
<td><p>Column Right Content</p></td>
</tr>
</table>
</td>
</tr>
</table>Add a media query for mobile devices with the class:
<style type="text/css">
@media only screen and (max-device-width: 480px) {
table[class=contenttable] {
width:320px !important;
}
}
</style>
<table width="640" border="0" cellpadding="0" cellspacing="0" class="contenttable">31. On mobile devices, we hide elements under a “read more” link—this is called “progressive disclosure.” An example of its use is shown below:
<td>
<h4><a href="http://yourdomain.com" class="link">First heading</a></h4>
<a href="#" class="mobilehide">Hide</a> <a href="#" class="mobileshow">Show</a>
<div class="article">
<p class="bodytext">
<img src="kitten.jpg" style="float: left;" >Pellentesque habitant morbi...
</p>
<a href="http://yourdomain.com">Read more...</a>
</div>
</td>Styles:
a[class="mobileshow"], a[class="mobilehide"] {
display: none !important;
}
@media only screen and (max-device-width: 480px) {
a[class="mobileshow"], a[class="mobilehide"] {
display: block !important;
color: #fff !important;
background-color: #aaa;
border-radius: 20px;
padding: 0 8px;
text-decoration: none;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 11px;
position: absolute;
top: 25px;
right: 10px;
text-align: center;
width: 40px;
}
div[class="article"] {
display: none;
}
a.mobileshow:hover {
visibility: hidden;
}
.mobileshow:hover .article, .article:hover {
display: inline !important;
}
}32. Avoid background images whenever possible.
33. It’s best to use different images for different device widths, or use this approach.
CSS:
@media only screen and (max-device-width: 480px) {
td[class="headercell"] {
background-image: url(images/header-325.png);
width: 325px !important;
height: 115px !important;
}
td[class="headercell"] img {
display: none;
}
}HTML:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="headercell">
<img src="images/header.png" border="0" width="600" />
</td>
</tr>
</table>34. For Retina displays, we use images that are originally twice as large as the displayed ones. For example, for an image size of 650 by 230 pixels, we use:
@media only screen and (max-device-width: 480px) {
td[class="headercell"] {
background-image: url(images/header-650@2x.png) !important;
background-size: 325px 115px;
width: 325px !important;
height: 115px !important;
}
td[class="headercell"] img {
display: none;
}
}35. For Retina displays, this can be used with great caution:
@media all and (min-device-pixel-ratio : 1.5) { … }36. Use the meta tag viewportto prevent uncontrolled zooming.
37. It is recommended to break lines every 60–65 characters.
38. For emails, we use our own DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">