Developing an email template can be a rather intricate task. It differs from the website development process in some ways since it has no real standards. Email clients choose (seemingly at random) what and where to support certain HTML or CSS elements. Email developers make the most of this lack of structure since it gives them a chance to implement and craft their code exactly the way they want to.
In this article, we are going to focus on the development of email template design and the way in which it can be done in order for you to get the best possible template and amaze your customers.
A Word on Email
Electronic mail was born in the very early days of the Internet, even before the www. However, due to the lack of cooperation in the process of building email clients or rendering engines, email coding remained to this day as tricky as it can be. If we add the fact that standardization of ECs is pretty slow, it gets even clearer why developing an email template has certain limitations.
But, there is always a way to surpass the limitations, and today we are going to explain the most important things that you have to be very careful about while designing an email template.
600 px Email Width
Due to smaller screen sizes back in the early days of HTML emails, 600 px became the most used email width.
Based on certain tests, the maximum email width that can fit into the screen in Outlook and Yahoo is roughly 650 px. So, if a significant number of your subscribers use these email clients, you should stay under 650 px or simply use the most common 600 px width, like industry leaders Mailchimp, Campaign Monitor, GetResponse, etc. do.
Tables
HTML emails are built on tables, but it is the formatting and the CSS that mask any appearance of a grid in the body.
A single <td> cell in a table can hold any type of content you would like – images, text, links, videos, even other tables. Nesting tables are the widely used practice and preferred method if you need to break up the current number of cells in a row.
The best practice is to define a web-safe font-family inline (for Outlook), and call the modern fonts by .class name.
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tdbody>
<tr>
<td class="lato_font" style="background-color: green; color: white; padding: 20px; font-family: Helvetica, Arial, sans-serif;" width="250" valign="middle" align="left">
<em>“Being given this award is truly humbling.”<br>
<strong>Novak Djokovic</strong>
</em>
</td>
</tr>
</tdbody>
</table>Tip
Wrap your blocks inside of HTML comments for better handling.
<!-- main content -->
<!-- /main content →Video in Email
Most email clients will not support embedded videos, only some Apple-based support embedded HTML5 video. So, we suggest you use animated GIFs in order to “almost” reach the same effect as you would with a video.
With just a bit of creativity, you can create stunning effects in your email campaign.
And of course, pay attention to Outlook users. Outlook desktop applications from 2007 onwards use Microsoft Word to render HTML emails. That is the reason why these clients tend to be so difficult to develop for, and why GIFs will only show the first frame. You need to use conditional code to target both Outlook and all non-Outlook email clients.
<!--[if !mso]><!-->
<img class="outlookcomIMG" src="ANIMATED.gif">
<!--<![endif]-->
<!--[if gte mso 9]>
<img src="STATIC.jpg">
<![endif]-->Fonts
Which fonts should you use? Modern or web-safe?
If you expect your target audience to use wide types of email clients, we are suggesting that you use web-safe fonts because 50% of ECs cannot support the tags, @font-face or @import. The CSS properties that can be safely applied are color, font-size, line-height, letter-spacing, font-weight, font-style, text-transform, font-variant.
If you are planning on using web-fonts, you must know that a large font file may slow down the email load time because a link is loaded inline with the HTML. Also, it is good to know that the clients that support importing fonts into your email are:
- Apple Mail
- iOS Mail
- Samsung Mail
- Outlook.com
The most reliable way to include a specific font into your email is with @font-face. This method has better support than <link>.
Here are both examples:
<-- include a specific font using @font-face -->
<style type="text/css">
@font-face {
font-family: 'Timmana';
font-style: normal;
font-weight: 400;
src: local('Timmana'), url(https://fonts.gstatic.com/s/timmana/v3/6xKvdShfL9yK-rvpOmzRKV4KQOI.woff2) format('woff2');
}
</style><-- include a specific font using link -->
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sarabun:100,200,300,400,500,600,700,800" rel="stylesheet">
<td style=”font-family: ‘Lora’, Georgia, Times New Roman, serif;”>Lorem ipsum dolor sit amet</td>Outlook 2007/10/13 does not support @font-face or <link>. Also, when you include a special web font in the font-family it will revert to Times New Roman, whether you have specified a fallback or not. To get around this problem when using the <link> method, wrap the <link> in a mso conditional comment to hide it from Outlook:
<!--[if !mso]><!-- -->
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<!--<![endif]-->What is the current best practice for font units?
In my experience, px is the way to go.
Background Images
I will be short on this one. Try to avoid background image use and create designs where text and images are well separated.
Email Client/Supports
- Outlook 2007-2016 for Windows/Requires VML
- Gmail App with Non-Google Accounts/No background image support
- IBM (Lotus) Notes 8.5-9/Only supports background image attributes
- Outlook.com and Office 365 Outlook/Supports CSS background images
Tips
1. For Outlook.com and Office 365 Outlook you can use the following CSS:
background: url('bgimage.jpg') center / cover no-repeat #888888;2. Outlook.com adds spaces under images. What to do? Simple, add the style below:
style="display:block;"Images
You are probably planning to embed an inline image in HTML email. One of the older and best approaches is Inline Embedding (Base64 Encoding). Images need to be converted in base64 format. Then you will not have 100% problem loading images. Try to insert it directly. This way, you can insert multiple images at various locations in the email.
<img src="data:image/jpg;base64,{{base64-data-string here}}" />If you don’t have a base64-data string, create one easily from an image file or generate a base64 string on Linux with the command:
base64 test.jpgIf you try to use a lot of base64 encoded images in your email, its actual size will increase significantly, which is going to slow down sending. Your alternative to this is to link out to your images and load them from an external server.
The most effective way to place images in emails is to host them online and link them. It is just linking to an image in HTML. This also keeps the email size down. For small email lists (~100 people) a public dropbox works just fine.
However, if 200,000 people are going to get your email over the course of one day, then it would be wise to have your image stored on a Content Delivery Network such as Amazon’s CloudFront or Microsoft Azure.
Tip
Overall, it is best to keep imagery light in transactional emails and get to the important stuff quickly, which means mostly you will want a logo or two in there. The rest can be achieved using inline CSS.
Using Media Queries in HTML Email
Media queries are part of the CSS standard which allows developers to customize their content for different devices or presentations.
Until now using media queries in email templates was not recommended, mostly because of Outlook. The situation is changing in a positive way now that Outlook.com may be starting to support email.
When coding a responsive email using media queries, a common technique is to create tables with align = “left” and a special class to target inside the media queries.
Here is an example of a single media query that will handle this for most mobile phones:
@media only screen and (max-width: 414px) {
.deviceWidth {width:280px!important; padding:0;}
.center {text-align: center!important;}
}
<table align="left" width="49%" border="0" class="deviceWidth">
<tr>
<td>
</td>
</tr>
</table>You can also match one of the following with media queries:
- target device orientation
@media screen and (orientation: landscape) { ... }- targets devices that have a certain pixel density
@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }- set specific styles for print
@media print { ... }Progressive enhancement for HTML5 and CSS3
This media query only targets email clients with WebKit support (an HTML/CSS web browser rendering engine for Safari/Chrome). Namely, WebKit has incredible support for HTML5 and CSS3, which allows you to use modern techniques like HTML5 video, CSS3 animation, web fonts, and more.
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Insert styles here */
}The Basic Email Structure
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our page title</title>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style>
@media only screen and (max-width: 580px) {
{code here}
}
</style>
</head>
<body style="margin:0;padding:0;min-width:100%;background-color:#ffffff;">
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;"></div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="min-width: 100%;" role="presentation">
<tr>
<td align="center">
{your email code}
</td>
</tr>
</table>
</body>
</html>You can find a detailed description of all parts separated here.
Plain Text Email
A plain text email is a simple message that only includes text (no images or graphics and no formatting). We will not cover the use cases or pros and cons of sending it. What you need to know is that in most cases, you should be sending both an HTML and a plain text email together (MIME) using the ability of most ESPs to convert HTML to text for you. So you can include a PTE alongside your HTML version. This automation does not mean that you do not have to test the final look of both HTML and text versions of emails.
Testing Tools
- All browsers and email clients are welcome!
- https://app.emailonacid.com/app/cp/welcome/ (Paid, free trial for 7 days)
- https://www.htmlemailcheck.com/check/ (Free service for HTML and CSS code introspection. Other things must be paid for.)
- https://www.campaignmonitor.com/css/ (CSS support guide for email clients)
Source