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:
Services
Email Design Tools
Premium Email Templates
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Matthew Kirk
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Very nice article. I never really thought about not setting height or widths to images to avoid white space with images turned off. This is something I will definitely keep in mind next time I’m building a newsletter.
Also, thank you for a shout out within the Resource links. I appreciate it!
There is a typo in #18. there > their
Nice, clean site. Helpful ideas.
Great post. I didn’t know about not setting width and height of images. That’s a great tip. :)
Great tutorial…
Great article on emails, I was designing one yesterday and I was unsure how wide to make it, lukely I guessed 600px!
There is a nice website to test render on principals webmails (aol, yahoo, hotmail … outlook, thunderbird) : http://www.emailonacid.com .
You need an account to test but it’s free.
Nice article !
I have done some e-mail design for a few clients, and learned a lot through trial and error.
Here is a helpful resource by campaign monitor:
http://www.campaignmonitor.com/css/
A good testing utility to check emails in all the major email programs / services (free & paid versions):
http://www.litmusapp.com/
Also, something important to note:
Ive tested out different bulk mailing services like constant contact, icontact, and mailchimp. Some of these services will alter your code as well (if I remember correctly) or when your clients edit the content in the WYSISYG editor, it will size and select fonts different from how you may have specified them.
For instance, you may have defined some of the filler text by using inline css. However, the editors might style the text using a tag like
Good effort in writing this, i find it so frustrating when I have to code an email with mark-up. If i had to write this tutorial it would’ve prolly been something like:
Take off safety helmet -> run head into door -> pretend your 10 years in the past -> code as a retard using tables.
@Phil – that’s exactly how I feel right now. Trying to figure out how to get out of this. Bullshit, I say.
“No Wider than 600px”: I have recently worked on the sizes of emails, trying to determine exactly up to what size it is possible to go. Actually, if you want to reach every one, your email width should not exceed 530 pixels. But you can stillr each up to 80% readers with a 620 pixels width.
Please visit my article to know more about the experiment I conducted: http://www.boulli.net/547-what-is-an-email-ideal-width.html.
Excellent Article!!!
Great Job!!!
It helped me a lot while I was fixing email rendering issue in cross browser. To make the email w3c compliance, this article is very good.
I am with Bob all the way up the top there.
Great points, a few inconsistencies, such as nesting tables.
You don’t have to use another table to get full colour background either, you can also do the same with a Although in general, does not perform very well in email, in this instance it is the exact tool for the job.
You can sit everything in a div ( as by default it is full width to the portal) and get some background colour in there.
Although not so much of a problem now than it used to be is more preferable over other textual html markup like and – it’s where that bridge is between html4.0 and xhtml1.0tran where email sits right now.
When testing, if you actually use an email newsletter application like Campaign Monitor or Pure360 you should be able to get a report on how well your messages are doing when they’re sent. I think both of those apps have litmusapp built in don’t they?
Great post, at perfect timing as I’m about to develop a newsletter for a client, this clears a lot up.
You forgot one important thing – don’t use p tags! Use double – Yahoo! mail resets the margins to 0!
nice, keep it up
Awesome guide! Thanks!
Great article! I shared it with all the designers & marketing assistants at my work. Thanks for making it so clear.
I have to prep a designer on the basics of e-newsletter creation and website design n the new year, this is going to be a really handy reference.
Awesome work!
Ryan
I didn’t know about setting the first table to 100%. Excellent tips!
good tips here, thanks for sharing.
This post not only for developers :) I found very useful info for self. Thanks!
I would add something like:
“Use the tag in extreme cases when the style attribute doesn’t work”
Bloody email clients! :-)
19: Use a spacer.gif
you don’t have to use a spacer.gif. Instead, you can use (it’s html code character for a non-breaking space).
many thanks for this useful info.
Nice article but I have to disagree with some of your points. I’ve been doing email for quite some time now for an email based company too. While I do agree that keeping things simple without nested tables is the way to go, that doesn’t mean that they won’t work in a lot of email. One problem I noticed with developing newsletters at some point was the compatibility amongst email clients so it led me to do a bit of research and figuring out who supports what. First thing is, most of the main email providers do support “style=”border-left:1px solid” they’ve been doing so for the last two years at least. The only email provider that seems not to is AOL mail. Nested tables have worked for me but it definitely took a lot of tweaking and testing to figure it out, but if you use the proper DOCTYPE and the proper inline styles you can definitely get them to work on most email providers. Another thing about not setting widths or heights in images, outlook 2007 seems to be the only email software to ignore widths and heights, so you definitely need to make sure that the image dimensions are exact when you’re working with Photoshop. Anyway, my point is, simplicity definitely relieves you from dealing with a bunch of compatibility issues that frustrates developers but when you’re dealing with clients who want their designs to be taken up to another level you have to figure out a way to do it, you just need to work on it some more.
this is a good article, however, I think one of the things that need to be address is the whole iphone problem of reading ‘pretty’ html emails.
I’ve discovered that using the table width constraint to 600px or similar makes it still a nightmare to view, as you either can’t read the font cause it’s too small, or you zoom in and are constantly going left to right trying to read your email…
I just think it’s something that needs to be addressed in a nice way.
Good tip!
If anyone wants email design inspiration, visit http://www.email-gallery.com
it’s a pretty good gallery
quality guide, well worth the read, cheers.
Great read.
I had to explain to someone today why email templates can not go wider than 600px, this was a great place to point them too.
That’s wonderful.
Just keep it up.
Good tips.
In regards to…
8: Wrap the Email in a 100% Width Table
It doesn’t work in AOL in IE. Recently ran into this issue where it was throwing all the internal images off in a very bad way. Every other email client and browser we test seemed to work just fine. I was using litmus to test.
Check out http://beautifulemails.com for more inspiration.
This is the wonderful thing i spend long time to find it.
Is not that what I’m looking for
Thanks Matthew and Nettuts, a really valuable source of help and advice, and your tester’s really helpful.
I know I shouldn’t nest tables but I can’t think of another way to created sidebars with wrapping text.
Outlook 2010 hates my nested table sidebars–it pushes all surrounding copy below the sidebar (and leaves blank space flanking the sidebar) for no apparent reason.
Here is the coding for the nested table…
copy goes here
more copy goes here
Is there a fix for this or can anyone think of a solution that renders well across browsers?
Thanks
thanks for good suggction. useful info.
I’m reading this because I just joined a firm that specializes in email marketing. I am an excellent coder, but I feel like I’m learning all over again. I can’t use my fancy XHTML and CSS tricks in email. I did a project a couple of days ago that I thought was going to have minimal problems. But Hotmail is breaking it, especially where some of the tables are nested. I’m also getting wierd 1px gaps in my layout. I was about to pull my hair out. I am printing out you article and keeping it at my desk.
My goal is to dummy-proof my next job.
About what you have mentioned regarding ‘empty <td> issue in IE’. We need not apply transparent gif image. The thing is that <td> will not occupy the given height in height attribute unless and until it has contents in it. So, if we add as content for that <td> then it works.
E-mail marketing is very important for staying connected to your clients, readers, fans etc. It is a great way of keeping them updated. A well designed newsletter can ensure the recipient remains interested in your company/blog etc.
Thanks Matthew and Nettuts, a really valuable source of help and advice, and your tester’s really helpful.
Some good bits here, follow this and you won’t go wrong. Thanks for sharing.
Alt TEXT not TAGS
AWESOME ARTICLE!!! Thanks
This might be a really stupid question…
but how do I apply the Email Design to an email???
…it is possible to have background images in outlook 2007/2010 inside cell tags, it’s a bit more work (and even more more work if you have a bgcolor on the cell too with text on top of image) but this works when you don’t use a background color:
<td valign=”top” width=”803″ height=”703″ align=”center” background=”URL/bground_2.jpg” style=” background:url(URL/bground_2.jpg);”>
<!–[if gte vml 1]>
<v:image xmlns:v=”urn:schemas-microsoft-com:vml” id=”theImage” style=’behavior: url(#default#VML); display:inline-block; position:absolute; width:803px; height:703px; top:20; left:0; border:0; z-index:-1;’ src=”URL/bground_2.jpg”/>
<![endif]–>
<td>
nice article. too much helpful for me.
Perfect, reallly helped, thanks.
Great article for beginners.
We’ll share this on our blog.
T.
Awesome summary – if my HTML Email validator was available at the time this article was published I would of suggested it.
How can is send html email from outlook 2007. Help Me.
Very, very useful tips, thanks a lot. I share it in my blog.