How to build a HTML email
If you want to build effective HTML emails that will work across a range of email clients you should abide by a simple rule and that is keep it simple. While in websites you can experiment with complex CSS including animation and positioning, HTML emails are quite like simple spreadsheets in a way – structured and inflexible, rows and columns with cells in each. You can’t really place layer upon layer in HTML emails, but rather you have to look at elements within the page as blocks of content that have to create a visual relationship beside one another. It’s a lot like branding, you have to really strip things back and get to the core of what you communicate. In a way HTML emails present a nice challenge in how to communicate what you want with such limited options.
Build using tables
Tables will form the base of any HTML email. While browsers have evolved very quickly over the last few years, email clients have really stayed stagnant and so has what they can process. Some email clients don’t support modern CSS rules and the fact that email clients have different support between them complicates the situation further. However building HTML emails effectively shows the power of CSS even when you are stuck with limited rules. One of the beauties of CSS is the visuals you can create on screen and the range techniques you can use to create them. You can use workarounds to get what you want on screen when all the options are not available to you.
<table> // table start
<tr> // table row
<td></td> // table cell
Plan out your email in detail first
Building tables is fairly simple but if you ever have to start nesting tables within each other you’re better off planning them out. Although it may not seem like it doing complex positioning with div’s is probably more straightforward than working with lots of nested tables. The issue with tables in HTML emails is you will have to set a lot of inline CSS on table cells etc. and your document will end up with fairly huge HTML tags that can get hard to navigate through. If you don’t plan out how your document will be laid out working within nested tables can become a nightmare. HTML emails are quite straightforward to work out. Sketching out the layout or creating wireframes on screen is the best way to go.
- Think about what you want to communicate.
- Look at what content you want your email to have.
- Break it up into relevant sections with headings.
- Think about imagery for the different sections and overall.
- Look at how the different sections can go together visually.
- Look at Type and colour.
Build an accurate wireframe.
Once you have a clearly defined blueprint, get to work on building your email. Get the entire skeleton of the HTML email built before you add in any inline CSS. This means all tables. Add cellpadding and cellspacing to each.
<table cellpadding="10" cellspacing="10"></table>
Use a 100% width main table to hold everything like a <body> tag would and use a 600px wide table to hold the actual email. Also set an inline style for 0 padding and margin on your body tag.
<body style="margin:0; padding:0;"></body>
Use cellpadding and cellspacing on your tables
Because cellpadding and cell spacing affects all 4 sides of whatever table you are working on getting both these properties right can be challenging. For all tables you should initially set 0 for both of these to make the cell padding and cell spacing consistent across email clients. You can make it a lot easier if you plan out your email beforehand as stated above. These best thing to do is look at ways of setting these properties on tables which form sections within your email. If you take a HTML page for example you may have a header, sidebar, content area and footer. Each of these are sections of the document, and they may have consistent margins or padding on their sides usually. Although an HTML email may not take the same structure as a web page the principal is the same. You can look to working using a grid when building your HTML email and working out what sections can have consistent spacing around their sides. cellpadding is the padding within table cells and cellspacing is the margin outside table cells.
<table cellpadding="20" cellspacing="20"></table>
Work with table cells and not their content
If you really want an email that will consistently work across email clients look to working with table cells. Don’t think of working with the content within the cell, styling the text etc., but rather look at it styling the cell to produce what you want. The table cells align and valign (vertical align) properties can be used to get the positioning you need on the content within cells and you can also apply things like font styles to the cell to achieve the visual style you want. Setting vertical positioning on the table cell will save you headaches with email clients that have insistent support for line height, margin, and padding. The align property on the cell can be used to centre text, or align it where you want. <p> (paragraph) tags are something which can really cause issues with a design. These tags have default space which can render differently between clients. Working with table cells allow you to avoid the problems associated with them. If you have built the skeleton of your email you can then quickly add in all different properties and styles after building your tables.
<td align="right" valign="bottom" style="color:#F00; …" width="300"></td>
Use colspan and rowspan to achieve effects
If you get to learn how to use colspan and rowspan effectively you can shorten down the amount of code needed for your HTML email by merging some table cells instead of creating more tables. You really have to have a plan about what you are doing if you are planning to merge a lot of rows or columns. It can be quite time consuming testing if cells should be merged or not within the email and testing out different layouts. If you are working on rows of a table and further down it you decide you want extra columns you may end up breaking the layout of the content above. In this case you may have to go to the content at the top and add colspan tags,B bt this is not the way to work, you should not have to go back and modify the content above. If you are going to use colspan or rowspan tags on cells really plan them out beforehand.
Use a consistent method of setting attributes on table cells
Once you have a fairly complex email with dense code throughout the page you may find it hard to check it and make sure it looks and will work the way you want it to across all the different email clients. I recommend using a particular way of structuring how you add attributes so you can quickly scan through individual elements like table cells and see if you have set everything correctly.
<td align="" valign="" width="" style="">
You could use something like alignment properties first (align and valign) then width, then finally your styling. This particular way is very easy to read through as the style tag which will usually end up quite long is placed at the end. How you structure them is up to you but for the sake of workflow be consistent in how your structure your HTML emails.
To be safe in HTML emails using images you should stick with GIF and JPEG. My personal preference is just to use JPEG’s in HTML emails. As stated before you can’t do complex layering in HTML emails but you can use images to create visual tricks and you can create these trick just using JPEG’s. You should also add display: block; to every image within your page to fix a bug within Outlook that renders extra spacing around an image.
<img style="display: block;">
To align image how you want use the align attribute on the image tag. You can’t use floats within a HTML email if you want full support for it which means you must use this property instead.
Using ALT text
In the event of your HTML email landing in someone’s spam folder in their email client you should include ALT text so it will be displayed when images don’t show up. This ALT text should be well written as you will be trying to grab the attention of the person viewing your email. Think short, well written and but descriptive just like you would use on a webpage image ALT.
<img alt="Describe the image">
HTML version for your document
For HTML email documents you will always be safe just using XHTML Transitional 1.0. The HTML5 document type should be avoided because of issues with how some email clients read the document type. XHTML is not as forgiving as HTML5 when it comes to certain parts of the HTML syntax. Elements need to be closed in certain ways. You should aim to get your HTML emails to validate with W3C. If you test them after they are built you will pick up on any syntax errors and you should be able to easily fix them.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Heading tags are something are something you should avoid altogether. Their default sizes and spacing will cause you issues. It’s much easier to style a td tag to make the text within look like a heading. HTML emails don’t have to have the same code hierarchy as web pages. In web pages you build them very structured with things like headings to denote sections and Schema tags to identify specific content. This is mostly done for SEO reasons on web pages, but HTML emails are not built for search engines, they are built for human eyes. You can create the visual hierarchy you need by simply styling the elements the way you want them to be without much consideration for the semantics.
Like a webpage content is king
You really do want to build as much of the email with text and HTML as possible and not just have one big image. Everything can be done visually bar animation but it may require laying out text within images and not in the actual email. If you want to give the illusion of layers within the email that is something you may have to do in Photoshop and complex visuals may require a lot of your text being done within another program leaving the email fairly bare text wise. Try to avoid this problem. You should have a fair amount of content within your email, at least a few well written sections. Look at prioritising how you communicate this information to users in an easy way and if possible don’t overlay text on images if it will be hard to read. Always spell check anything you include in images or within your HTML.
Use comments to break up sections
You can make working within your email code far easier if you use comments to break up sections. Set comments before things like the header, content sections, and the footer. As said before nested tables can be something which can be hard to navigate through. The easier you make it to read HTML email code the better your workflow will be.
Links in an HTML email
Links are one of the things you in an HTML email that will really need to target in order to get the styling you want. While on most other things you can style a table cell to get the effect you want, links require multiple rules to effectively target. If you need to chnage their colour or text decoration use a link and span tag.
<a href="" style="color: #000000; text-decoration: underline;"><span style="color: #000000;">Link Text</span></a>
Set widths on everything
You really need to be able to set the width property on everything you can such as tables and table cell. Setting widths on tables is fairly straightforward. Unlike a webpage where you have to calculate the width of something by subtracting the margin and padding usually (unless you have modified box sizing attribute), you don’t have to do the same with tables in HTML emails. You can just set the full width of the table.
<table cellpadding="20" cellspacing="20" width="600">
The general rule of thumb is to stick to 600 pixels wide for your main email. The area you will have to work with regarding content will actually be smaller as you will usually have some sort of cellpadding for your content.
Styling fonts really bloats your HTML email code. Two contributing factors are that one you cannot use shorthand rules for setting fonts which increase your code size, and two you have to set font rules on every single piece of text separately. You cannot do things like set a font family within the style tag of a table to style the cells within but rather you have to apply font styles to every single table cell or containing element to be safe. That usually means things like font-size, font-weight, font-family, font-style, and colour. If you plan out your HTML email beforehand you can quickly got through all your elements after you have built your email skeleton and add these attributes. It can be tough to make sure you add all these attributes to every element, that’s why it’s better to have a process in place that makes it easier to add them and check there are all present.
<td style="color: #000; font-family: sans-serif; font-size: 11px; font-weight: bold;"></td>
Use the full hex colour values across everything. That goes for backgrounds and fonts. This is yet another small things that bloats your code. In programming you have a lot of principals about not repeating yourself, however in HTML emails the opposite is true. Always type the full 6 digit colour code instead of the regular 3 you would probably use on a webpage for simple colures, even things like black which have the same number for all 6 values.
Include important links and information
There is some information that is pretty major and you should always include it. It’s dependent on really who you are. Companies may want to include company information such as telephone or contact numbers, addresses and emails. Individuals may want less information about themselves but may still want a contact email for the website included. A link back to the website the email is sent from is pretty much a necessity. If there are social media accounts associated with the website include links to these. Generally a lot of this stuff can go in the footer but where you place this information is completely up to you. It depends on your email design. Sometimes it can be better for websites to place prominent information about the company early on in the email, in the header for instance. Having this information readily available to users may increase your conversions on ecommerce websites.
Have email opt out links
You should include opt out links in your email to comply with laws and regulations. If you take users email addresses for the purposes of a newsletter or similar you must have a mechanism in place for users to unsubscribe. This will cause you issues if you don’t do some development work. A system to keep track of opt outs needs to be in place. It would usually consist of a database of users that needs to be queried via URL parameters in the email unsubscribe link. If you plan on email campaigns you may want to look at using a HTML email marketing company. They can have systems already in place for this. They can send the emails through their trusted servers, you can just upload your list of subscribers directly to them, and you can also use your own HTML within the emails.
Test and check your paths
You really would not want an email going out with a broken link within it or something also as serious. Always upload the image files for your email to your server and check the paths. It’s pretty easy to do in any browser. Just copy the image URL’s into your browser and check the images load.