20 Email Design Best Practices and Resources for Beginners

Even for experience designers, building email newsletters isn’t easy. You receive a lovely looking design, and you crack on with the development. Unfortunately, it just doesn’t work as it should in every email clients. Styles don’t display, images aren’t visible, etc.

This is where these twenty best practices come in handy.

1: Keep the Design Simple

Emails are not like complex website designs; they should be nicely designed, but somewhat basic. Try basing your designs on a main header image followed by the main content.

The cleaner the design, the easier it will be to code, and the less chance of any abnormalities happening between various browsers and email clients.

2: Use Tables

Email clients live in the past, so all emails must be built using tables for layout. Some CSS styling can be used, but we will discuss this later.

Not Accepted

	<div id="header">
		<h4>Header 1</h4>
	</div>
	<div id="content">
		Lorem ipsum dolor sit amet.
	</div>f
	<div id="footer">
		Sign off and footer
	</div>

Accepted

	<table>
		<tr>
			<td>Header 1</td>
		</tr>
		<tr>
			<td>Lorem ipsum dolor sit amet.</td>
		</tr>
		<tr>
			<td>Sign off and footer</td>
		</tr>
	</table>

3: Have Web Browsers at the Ready

Make sure you have as many web browsers as possible available to you. Who knows who will view your email, and what he or she will be using to view it!

At the very least, use these:

• Internet Explorer 6
• Internet Explorer 7
• Internet Explorer 8
• Mozilla Firefox 3
• Apple Safari 3
• Google Chrome

4: Sign Up for all the Major Email Clients

Sign up for as many email accounts as you can think of. Below is a list of email clients to get you started:

• Google Mail (http://mail.google.com)
• Hotmail/Live Mail (http://www.hotmail.com)
• Yahoo Mail (http://mail.yahoo.com)
• AOL Mail (http://webmail.aol.com)

Please note that they’re are other, more convenient services that can be used instead; however, many of these charge monthly fees. For more information, review Litmusapp.

5: Use Inline Styles

If this were the website world, every developer on the planet would say, "do not use inline styles, create a class for it". Unfortunately, in an email, this is not possible, as the email clients will strip them out, and we don't want that. So if anything needs to be styled, use inline styles.

Elements like font type and size can be used within the <table> tag, but individual styles should be placed on <td>'s.

6: Give all Images Alt Tags

This is a very important step to take, but is often forgotten by many. Styling the <td> for which images are in, with font types, size and color, will allow for your email to degrade gracefully when images are off by default.

No Alt Tags

Alt Tags

7: Do not Set Widths or Heights to Images

Again, this is a further step to take in order for a lovely gracefully degraded email. If images are off by default, there dimensions will be present, leaving a lot of unnecessary white space throughout.

8: Wrap the Email in a 100% Width Table

Email clients only take the code within the body tags, not the body tags themselves. In order to use a background color, you must create a 100% width table to "fake" the background effect.

	<table width="100%">
		<tr>
			<td>
				<table width="600" align="center">
					<tr>
						<td>Lorem ipsum dolor sit amet.</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

9: No Wider than 600px

Many people don't actually open their email; they instead view them in the preview panel. On average the smallest preview panel is around 600px, so always design your emails accordingly, unless you don't want your full email viewable in the preview panel, of course.

10: Link Styling

Don’t forget to style the <a> tag. This will overwrite the email client's standard link tags.

	<a href="#" style="color:#000000; text-decoration:none;">Link</a>

11: Try not to Nest Tables

Apart from the 100% width wrap table, you should try your best not to nest additional tables. This is easily avoidable; use the stacking system instead.

This allows for a much easier, controllable email.

Avoid

	<table>
		<tr>
			<td>
				<table>
					<tr>
						<td>Lorem ipsum dolor sit amet.</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td>
				<table>
					<tr>
						<td>Lorem ipsum dolor sit amet.</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

Use

	<table>
		<tr>
			<td>Lorem ipsum dolor sit amet.</td>
		</tr>
	</table>
	<table>
		<tr>
			<td>Lorem ipsum dolor sit amet.</td>
		</tr>
	</table>

12: Avoid Background Images

Stick to block colors rather than images for the backgrounds for your text; only use funky gradients, images, etc. when no text is involved.

13: Borders don't Work

Within emails, we don't have much room for browser or email clients specific fixes, so when we have borders that can either sit outside or inside the <td> or be included or excluded from the <td> width, there's not much we can do.

The fix? Drop two extra <td>'s to either side of the main <td>, and set the background color in each one. This will again "fake" the look of a border and work in all browsers and email clients.

Won’t Work

	<td width="600" style="border-right:1px solid #000000; border-left:1px solid #000000;">Lorem ipsum</td>

Will Work

	<td width="1"></td>
	<td width="598">Lorem ipsum dolor sit amet.</td>
	<td width="1"></td>

14: Hotmail Bug Fixes

Over the past couple of years, Microsoft has vastly improved the Hotmail/Live service. But… one huge bug you will come across is the strange padding added to all images. Why do they do this? Who knows? All I know is, there is a wonderfully easy fix.

	<img src="image.jpg" style="display:block;">

On every image tag, simply add display:block, as shown above.

15: Encode All Characters

Although we don’t technically have to encode characters, it’s best we do.

When viewing emails in various email clients, we cannot guarantee the charset every website is using, so encoding characters allows us to be certain that all characters are being displayed as they should.

May Work

	"Some sample code - with special characters"

Will Definitely Work

	"Some sample code - with special characters"

16: JavaScript = Junk Email

You cannot, unfortunately, include any type of JavaScript. So no fancy pop-ups or auto-scrolling emails please! If you do decide to include it anyway, your email may be sent to the junk folder. Email clients will see you as a threat. And this is obviously not good. So please stick to plain old HTML.

17: Give the User a Way Out

When sending general newsletters to various clients/customers, although you have a lovely designed and developed email, that user may not want your email (hard to take, I know). Always allow them a way out, by adding an unsubscribe link to the bottom of the email, like so:

If you would like to unsubscribe from this newsletter, simply click here

18: Users Want Options

Some users may be utilizing a very basic email client – maybe they’re checking there webmail at work or on their phones. Images and complex designs may not be best for these types of clients,. Consider, at the top of the email newsletter, having a link which points to the email on a web server somewhere, so the user can view the email in all its glory.

Cannot view this email? View it here

19: Use a spacer.gif

Some browsers (Internet Explorer), don't get on with empty <td>'s. Even if the <td> is set to 10px in width. IE will ignore this and set it to 0.

The fix is to add a transparent GIF, and set this to 10px wide. This then provides you with something to put within the <td>, thus fixing IE's issues with having empty <td>'s.

Won’t Work

	<td width="300">Lorem ipsum dolor sit amet</td>
    <td width="10"></td>
    <td width="300">Lorem ipsum dolor sit amet</td>

Will Work

	<td width="300">Lorem ipsum dolor sit amet</td>
    <td width="10"><img src="images/spacer.gif" width="10" height="1" /></td>
    <td width="300">Lorem ipsum dolor sit amet</td>

20: Send Tests

This is the most important aspect of email design; sending test emails allows you to view them in all browsers and email clients, looking for any bugs and odd variations.

I have setup a way to allow me to send test, by all means, use mine!

Username: test
Password: nettuts

For more comprehensive testing, use a service like CampaignMonitor or LitmusApp.

Other Helpful Resources

General Email Marketing info:

• http://www.shayhowe.com/resource/smart-email-marketing/
• http://www.webdesignerdepot.com/2009/11/a-guide-to-creating-email-newsletters/
• http://www.smartbiz.com/article/articleview/2073/1/53/
• http://www.smartbiz.com/article/view/2076/1/53
• http://www.kamikazemusic.com/quick-tips/basics-html-email-newsletters/
• http://www.mailchimp.com/articles/email_marketing_subject_line_comparison/
• http://lyrishq.lyris.com/index.php/Email-Marketing/Email-Subject-Lines-15-Rules-to-Write-Them-Right.html
• http://net.tutsplus.com/misc/6-easy-ways-to-improve-your-html-emails/
• http://www.copyblogger.com/persuasive-writing/

Email Inspiration:

• Campaign Monitor Gallery
• Beautiful Email Newsletters
• HTML Email Gallery

Services

• Mail Chimp
• Campaign Monitor
• Emma Email Marketing
• AWeber
• Interspace SendStudio
• Feel Breeze

Email Design Tools

• LitmusApp
• Preview My Email

Premium Email Templates

• ThemeForest Email Templates

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.