Like many other web designers, I thrive on coding beautiful yet flexible web pages that display virtually identical in every web browser. Unfortunately, designing email newsletters sends you back ten years. Deprecated tags, tables, inline styling, oh my! In this article, I'll list six methods that will immediately improve your email layouts.
Email Newsletters.
As a new hire at opt-in email marketing service AWeber, my first assignment was to create a couple dozen new HTML email newsletter templates for our customers. For the clean code-loving web designer, HTML email is a reminder of a dismal past. After weeks of work and countless headaches, I delivered the goods. I also learned a lot about designing for email.
To help you avoid a lot of the headaches I encountered during testing, here are 15 things you can do to create great-looking HTML emails.
Set Up Multiple Email Accounts For Testing!
If you only take away one tip from this article, please let it be this. As designers, we spend a lot of time creating the perfect user experience on the web and testing that experience across multiple platforms. Yet when it comes to email, too many of us fail to deliver the same attention to detail.
Much like testing for the web, creating an email layout that displays the same in every email client can be an absolute nightmare.In order to be sure your subscribers will receive your message as intended - test in everything you can!
This includes but is not limited to:
- Yahoo
- Gmail
- AOL
- Windows Live Hotmail
- Outlook 2007
- Outlook 2003
- Lotus Notes
- Thunderbird
- Entourage
- Mac Mail
But wait - there's more!
Some of these email clients have multiple versions, each of which will render CSS and HTML differently.
This is part of an HTML email being rendered by the old version of Yahoo.
Here is the exact same email being rendered by the new version of Yahoo.
Subtle differences, I'll admit. But enough of these subtle differences and it adds up to a sloppy design. And if that's not enough... the user's internet browser can also play a part in how your design renders.
Now before you throw your computer out the window in frustration... these next few steps can help you rule out a majority of testing problems.
Design Your Emails To Degrade Gracefully
I'm amazed to see some of the largest advertisers breaking basic usability rules regarding HTML email.
Here are some guidelines to live by:
- Never rely on images to communicate important information... especially one big one. A huge majority of email clients have images turned off by default. Unless the user takes some initiative... you just sent them a nice blank message.
- Never rely on background images to make text readable. Make sure your text has enough contrast with or without images enabled. Outlook 2007, for example, will not display background images in table cells even if images are turned on.
- Provide a link for people who are having trouble viewing your message Ok, this isn't absolutely necessary - but its thoughtful to give your subscribers the option to view your message in their web browser (especially if it's a particularly HTML heavy design).
- Use ALT tags on important images I can't stress this enough! With images disabled by default, descriptive ALT tags are your last, best chance to convince a user to enable images.
- When using ALT tags, cut the clutter. Fill in the ALT tags that
matter and leave the others blank
(Note: I didn't say exclude them!)
This is a header of an email I received from Discovery Health:
I took this screenshot from my Gmail account - before enabling images. See how the ALT text "bullet" and "spacer" get in the way?
Adding ALT tags to elements that only serve for design purposes clutters the design and distracts from your message.
Use Tables to Structure Your Layout
Huh? I spent all this time learning CSS and now I have to go back to tables? When it comes to email design, tables are hot like its 2003 - they're the closest thing to standards we have.
A few things to take note of:
- Make sure to set all available table attributes where possible. This includes cellpadding, cellspacing, border, valign, width and height.
- Nested tables are your friend. Make sure to use proper indentation for clean easy to read code.
- Use the background attribute on a table cell to set background images.
This is the easiest way to get passed backgrounds not displaying in Gmail.
Note: Your background images will behave as if they were tiled... so plan accordingly. - Be aware that background images applied to tables or divs are not supported
by Outlook 2007 In fact, the only way to use a background image in Outlook
2007 is to apply it to the body of an email, which of course isn't supported by
other email clients such as Gmail, Yahoo, or Windows Live Hotmail. Awesome, right?
I didn't think so either.
Use Inline Styles When Coding Your CSS
Some popular email clients ignore the code inside your head tags. Gmail and Hotmail are particular culprits that come to mind.
With your layout set up in table format, it's time to apply styles to your text and images. Here are some tips and tricks to ensure your message looks nearly identical in every browser:- Use break tags as a replacement for vertical padding To alter the amount of space they consume try wrapping them in span tags and set a smaller/larger font size.
- Use inline styles repetitively and often. Applying a font tag to a parent table doesn't necessarily mean it will carry that attribute down to all of its children. Make sure to set inline styles on all of your HTML elements.
- Apply detailed inline styles to links Especially for Gmail users - you must set specific styles to every link. Otherwise, they will inherit the default font-family, size and color set by each user's browser.
- Wrap your images in span tags and set font attributes to style your ALT text accordingly. This allows you to style your ALT text, making it more readable when images are disabled.
Use Gmail's Inbox Formatting To Your Advantage
Did you know that the subject line of every email sent to a Gmail account is followed by the first snippets of text within that particular email?
Why not use this to your advantage!
Above is a picture from my Gmail inbox.
Both newsletters have the same header content.
Only one difference - Newsletter 1 takes advantage of Gmail's inbox formatting.
Here's how I did it:
Insert a 1px x 1px image as the very first element in your email. Wrap the image in span tags setting the font color to the same as the background. Whatever text you put in the ALT tags for your 1px x 1px image will now replace that google snippet in the users inbox.
It's as easy as that! This subtle difference will set your message apart from other emails in the reader's inbox.
So, Now What?
I've done my best to share some things I do when creating HTML emails. It's your turn! How do you go about designing, coding and testing your email campaigns?
Any recommendations, tips or tricks you would like to add will be greatly appreciated by your fellow design community.
If you like this tutorial, please vote for it on Digg:
Related Posts
Check out some more great tutorials and articles that you might like
User Comments
( ADD YOURS )insic September 22nd
i dont like using tables but when it comes to this kind of projects i have no choice but use tables and in-line styles, because its a must be. great article, thanks for sharing this.
Steven September 22nd
I feel your pain. I’ve designed quiet a number of newsletters over the past years and it has always been a pain in the **** to get it to work in all e-mail clients. Especially after the introduction of Office 2007 I felt like I travelled back in time.
David Kindness September 22nd
Wont using a 1px by 1px image run the risk of having the email identified as spam?
Kevin Quillen September 22nd
“i dont like using tables but when it comes to this kind of projects i have no choice but use tables and in-line styles”
How much have you had to make email templates? Email formatting isn’t something thats likely to change soon. There is nothing wrong with tables, a skilled developer should be able to relate layouts in both divs and tables.
I use tables for tabular data only but its pretty much known that to have a universally accessible and formatted email, you’ll have to use a table. On the upside, you only have to make the template once or twice for a company.
I would suggest services like Mailbuild, which facilitates email templates quickly and is easy for customers to manage.
Erik Reagan September 22nd
I think this type of breakdown is much needed. I laugh at the thought of doing another HTML email simply due to the “old markup” required for a successful design. Nonetheless they are needed and I still do them regularly. Hopefully one day the email clients will all support some awesome xHTML/CSS stuff.
Kevin Quillen September 22nd
In addition, I would agree with David to not use images like that:
“Insert a 1px x 1px image as the very first element in your email. Wrap the image in span tags setting the font color to the same as the background. Whatever text you put in the ALT tags for your 1px x 1px image will now replace that google snippet in the users inbox.”
Too risky when you want to guarantee delivery to the users inbox, not spambox.
Dainis Graveris September 22nd
Wow, that’s great article again!! Nice tips to look out for, before sending e-mails..!
Roscoe September 22nd
Thanks for these, very useful. Would be good to see more HTML email stuff covered on NETTUTS.
I use Campaign Monitor to test and send all my HTML email campaigns, they have a very good site with loads of useful resources, a great blog, stylesheet to inline css converter, email testing and spam tool and a support forum which is fairly active.
http://www.campaignmonitor.com/
pavs September 22nd
Submitted to Digg, vote if you want: http://digg.com/design/6_Easy_Ways_to_Improve_Your_Html_Emails
ceejayoz September 22nd
Love the 1×1 Gmail trick, thanks!
Gokhan O. September 22nd
I use Sendloop.com service for keeping my mail lists organized and creating email client friendly HTML newsletter. They offer low-cost email design test functionality which allows you to test your email design on various email clients with a single button click! Sendloop takes screen shots of your email on Yahoo, AOL, Gmail, Outlook 2003 and other versions, etc. and displays them on your screen in a few minutes. Saves time
Andy September 22nd
Actually, I have found that just having an image in your HTML emails doesn’t necessarily throw it immediately into spam. It’s about having a good balance of images and text. A good HTML email client will have a spam rater to tell you how “spammy” your email is. Try using SpamAssassin or the like to test your emails.
Also, many email clients use a 1px x 1 px image in every HTML email they send because they track an email being read by whether or not the email was rendered. I believe it’s standard practice, but I could be wrong. These are just some things I have learned having built, sent and tracked the emails for my company for the past 8 months.
suBi September 22nd
agreed ! very valid points….
Bob Ricca September 22nd
@Kevin and David
As Andy said,
You have to consider many email services insert the same size image to provide email tracking for their clients. Therefore this is nothing new and I doubt having this in your email with be the sole factor in getting you spam blocked.
miker1961 September 22nd
Well put. When it comes to coding for email you’ve got to get down and dirty. And I do mean dirty. It’s back to the basics with the nested tables and inline styling. It can get quite ugly so it pays to keep cleanly indented code so when you have to go back and trouble shoot (and you always do) it’s a bit easier.
I can’t agree with you more about testing in multiple email clients. Wouldn’t it be great if someone came up with a tool that allowed you to test across various email clients. You’d think something like that would be out there with all the cross browser testing sites there are.
You may want to check this tutorial out over at Chris Coydier’s CSS tricks. It echoes the same things however it’s a screen cast.
http://css-tricks.com/videos/css-tricks-video-30.php
~Mike
EliteStyles September 22nd
It’s amazing how many clients and members at my work end up formatting and setting up email html all completely wrong and i have to end up fixing it. I am going to forward this to some people maybe then they will read it instead of me shouting at them because they are doing it all wrong!
John September 22nd
The look of the HTML email depends on what mail program you are using. Padding works on Popular email programs like yahoo, msn but it does not work on Lotus Notes Mail. I encountered this when im doing a testing on my HTML email.
George Burrell September 22nd
Emails have massive rendering differences from HTML. If you wanna do it propperly and ensure a good deliverability whilst keeping the emails looks good… would be best to go for a propper email marketing company:
These guys are very good and reasonable prices too: http://www.mailvivo.co.uk
Does loads of stuff similiar to Google Adwords & the ROI reporting is very good.
Lamin Barrow September 22nd
Gmail accepts inline styling but when you use the background-image style property.. it wont display the bg-image by default. It is perhaps the strictest among them all. Thanks for the article. It’s quite enlightening.
simplechris September 22nd
interesting stuff…
Lamin Barrow September 22nd
You can also use http://litmusapp.com/ to run a simulated test on different email clients among other things.
Tim September 22nd
I can’t STAND doing html emails. This helps ease the pain a bit though. I try to not even use the inline css if I don’t have to–I use old school font tags!
Matt September 22nd
Good article. Many of those are great to keep in mind, but there are some you are missing. One that first and foremost comes to mind is dealing with linking of images. ALWAYS use absolute paths for linking images ie. NOT “images/xxx.jpg”, but rather “http://www.xxx.com/images/xxx.jpg”. Many email clients will not display the image if you don’t. As an professional interactive designer, email clients not pushing standards for the web is rediculous. This is 2008, we shouldn’t be rendering HTML via Microsoft Word cough cough outlook. But anyway, help be a part of the fix. Check out http://www.email-standards.org/ Good resource as well.
Ben Griffiths September 22nd
Great stuff, thanks
Mirek September 22nd
I was asked to code custom HTML footer for a company just a few days ago and I wish I’d read this artice before. I’d save me quite a few headaches. Great round up!
Dayton September 22nd
So basically, you have to do everything your not supposed to do. It’s kinda fun in a way. It’s just like standards only you HAVE to break every rule. You could call it HTML email using web sdradnats.
Bakari September 22nd
I’m just starting to learn CSS and HTML coding and this is very helpful. I’ve been using Apple’s Stationery templates, but I can tell that they are probably not the best way to go when it comes to HTML emails. Thanks for this.
Nate September 22nd
This was very helpful and it came just in time. I’ve never done newsletters before until recently. My job sends out a couple a week and I had to figure out how to make a new template. So I take a look at the old graphic designers template and it was full of nested templates. Me being a CSS guy saw how disgustingly ugly the markup was. So I go ahead and within 20 minutes or so create a new template with complete CSS (inline styles) and to no avail it looked horrible in every email client. I double checked my markup and things looks great. So I started to play with tables and sure enough it started to display correctly. This is a good confirmation that I was head in the right direction. Thanks for a great article and some very useful information!
Roman September 22nd
“Apply detailed inline styles to links”
What do you mean?
I don’t know of any way to set inline styling for :hover :focus etc.
How would I do that inline?
Lloydy September 22nd
Some good info there. We’ve been developing HTML email marketing for the last 3 years and we send 5 campaigns a week for different clients. It is one of the most tricky services we offer, but we use MailChimp with is a godsend. Brilliant service, reporting and reliability. Oh, and I can’t express how much Outlook 2007 has ruined my life!
Bob Ricca September 22nd
@Roman
As far as I know you can’t apply :hover and :focus to links with inline styles. Its important to remember to set the appropriate styles to each individual link to assure that the color and font family is correctly applied in every email client.
mattems September 22nd
email marketing is an absolute pain. Keeping it simple will save you so many headaches.
Tam Nguyen September 22nd
Don’t use 1×1 px image unless you want you email go to SPAM box (or never reach customer mailbox). Other tips are great… Thanks for sharing
ST September 22nd
As someone who has done HTML emails for large clients for a few years now I would like to invite you to examine your html email templates in Outlook 2007. Prepare to be distressed. It is a huge step backwards in compatibility and uses the, drumroll please, Microsoft Word HTML rendering engine to display HTML emails. You will discover errors and inconsistencies that you never dreamed existed and that will defy logic to decipher… good luck.
Jacob Cass September 22nd
I use signatures in gmail using the Blank Canvas Firefox plugin. Very useful!
Neillio September 23rd
Great tips.
I have to put together html emails quite often and the y really can be a knightmare.
kiran September 23rd
Its a great tips for HTML emails.Thanks for sharing.
Matthijs September 23rd
Should images be loaded from a remote server or be attached inline (i.e. embedded) as well? Some clients seem to embed images after a newsletter containing remote images is forwarded. How do you deal with this?
Dean Hayden September 23rd
Outlook 2007 is a complete pain. Forget padding or spacing of table cells, you have to go back, way back and use spacer images to be guaranteed your layout is consistent.
Dan September 23rd
This was a really great point to touch on. The need for testing in email apps is more so than with browsers, and there are even more to test. It is not going to change soon either, that is for sure. You covered some great tips here I love the gMail one. As mattems said simple is the best route. I generally will create a styled header area, which maybe just an image, and then keep the rest clean and simple formatting, lots of links to the pretty site. Content sells and email is no exception. Put your best content forward and they will come to your site, and that is the goal, right? ….right?
Bob Ricca September 23rd
@ Tam
As I and Andy stated above:
You have to consider many email services insert the same size image to provide email tracking for their clients. Therefore this is nothing new and I doubt having this in your email with be the sole factor in getting you spam blocked.
@ Matthijs
You should always keep your images on your server and externally link to them from the email. Its never a good idea to attach anything to an email you might be sending to a large group of people. If you wish to attach files you’d like people to download - instead, place the files on your server and provide a link in the email for people to access them.
Jesse Burcsik September 23rd
I may be wrong, nor did I read ALL the comments so someone might have referenced this, but I am under the impression Outlook 2007 does less then not render background images. I thought they scaled html support to bare bones… the worst being no support for animated GIFs, what a world!
Aaron September 23rd
i dont like using tables but when it comes to this kind of projects - Sounds like a whiner in this room. Table will never go away for a while and table is still awesome!
Tony! September 23rd
I’ve been doing email marketing for a publishing company for a while now.
I can say with certainty that the 1px x 1px image will not necessarily trigger spam. There are a lot of factors ISPs use to filter spam and images are only a small piece of that. The reputation of the IP address sending the email is weighted more heavily.
Lycos is one of the strongest spam filters. I would DEFINITELY suggest creating a free lycos account for testing.
Also about Lycos - they have a drop down selection to display a full email header and this will provide a spam score, and a list of filtering rules that have been broken. If you eliminate as many broken rules in Lycos as possible, you’ll have good results because most are not as intense as Lycos with filtering.
website design September 24th
PS, also, please stop sending HTML emails.
Himanshu September 24th
Well, I don’t think tables are of any harm on email templates and try to avoid 1px x 1px image which some email service may treat as web beacons to track the mail.
rest nice stuff..
Jake Holman September 24th
@Jesse Burcsik - That’s right, instead of using Internet Explorer to render the emails, it now uses Microsoft Word. As a result, no animated gifs, no background images in tables, limited support for background images in the body, odd behaviour of spacing, sometimes bad rendering of images or simply won’t display images (might be just a bug though).
It’s basically just the large organisations deciding they don’t want to do things how industry wants them to, they think they should set the standard.
It’s a problem on the web in general, no one seems to be deciding they should work together.
sean steezy September 24th
yeah. i learned to code starting off doing inline styles. It helped my understanding and trasition to CSS. Without doing this laborious work in the beginning, I wouldn’t know jack about why CSS is so great!
Our company uses a service called MagnetMail by Real Magnet. Its awesome and lets you send test messges with spam checker and deliverability testing so you can see what it looks like in every major/minor inbox.
Of course you have to use inline styles, but it really makes you appreciate CSS.
This was a good post, handy knowledge. Thanks!
ajay September 24th
dear sir.
best web side good email big problem every time give problem
ajay
Jesse Burcsik September 24th
@Jake Holman I agree that Microsoft has and does generally ‘do what it please’ regardless of where the rest of the web is going. However, in this one regard I give Microsoft a pat on the back. Because I think email in general should scale back to an earlier version that better met its function. Sending textual messages.
When I think of email I think about how it’s old school, it’s generally archaic, and it’s pretty unreliable compared to other methods I use for communicating on the web. However I keep it simple and it gets the job done. I hope the masses realize not everything will or even should reach some next level of interactivity, some technologies will evolve while others (should) die off in their shadows.
JW September 24th
If I’d had this information about two weeks ago, I’d saved ohhhh say a ton of time. Not only is it a great heads up on the coding but it just flat saves time in trying to noodle around with tweaks to accommodate various platforms. Thanks a bunch.
jw
Bob Ricca September 24th
@website design and anyone else who would say “Stop using HTML in email”
I’m happy that you touched on this topic.
I think all too often people look at HTML email as a “black and white” subject.
Putting personal preference aside, a lot of people fail to recognize that different solutions work for different situations.
Take for example:
It might look unprofessional and unofficial for my bank to send out important information in a plain text email. So much so that unless I was expecting it I might write it off as fraud.
Although the bank email might not be designed to look like an advertisement its still an HTML email none the less.
Keep in mind this article was written to help those of us who DO use HTML email to further set it apart from spam.
bart vermijlen September 25th
very good article. I digggggg the gmail trick. especially the cross browser behavior of web based email clients is a rarely mentioned thing
Jesse Burcsik September 25th
@ Bob Ricca
Good points , I guess it’s just another one of those, ‘I wish we could all agree on one standard’ kind of deals.. hah
Luis Chacon September 25th
Excelente artÃculo
dehlz September 25th
Good tips. I understand the importance of being strict, but I can’t believe how far behind Gmail is with their CSS support. I’ve used this very comprehensive list of all e-mail clients and their CSS compatibilities for quite some time now: http://www.campaignmonitor.com/css/
Johnny September 26th
Great tips newsletter formatting. I’ve been looking for this for a while. Sure, it was to good to believe that formatting for e-mail would be easy.
Thanks!
s September 26th
Is there are easy way to use AWeber? I don’t have time to become a graphic designer to make email successful. I thought this would be a WISWIG solution.
Anyone know an easy turnkey solution?
Taylor Satula October 1st
eeeeew tables make me sad. 1×1 of img won’t look like spam unless it’s linked.
Andy Parker October 7th
A very good series of tips there. As with a lot of the responses my query would indeed be with the 1×1 image. This has always been set as a common spam trap via Spam Assassin and Kaspersky and wouldn’t recommend it to any of my clients using PureResponse.
A very useful note on the use of span tags around the image to style the alt tag, I will certainly be experimenting with that although I am not sure that works in all browsers.
I response to a previous post, why would you want animated gif’s? That sound horrific! Sadly we do have to embrace table structures to render html emails correctly, but one of the key pointers in relation to ensuring that your messages don’t get flagged up as spam is to ensure that you have a well created plain text version of the message.
This reduces the image to text ratio of the email as a whole via Spam Assassin.
We have some great guides and advice on all aspects of HTML emails at http://www.emailmarketingmanual.com, feel free to check them out.
Taylor Satula October 9th
‘m back in the 90’s ani. gif’sand tables what is this back to the past. Lemmie check. Ill call the future on my brick cell phone as i put on my horrid colored sweater.
David Crisler October 14th
It’s the client that wants animated .gifs and it’s a pain having to explain that they can’t have it or many other things because of Outlook 2007.
One of my clients depends on animated gif’s to show multiple views of real estate properties. They absolutely demanded that so sometimes they are necessary. Outlook users only get a static image, but it’s the most important one from a marketing standpoint.
Mirmik October 25th
I am doing everything you say in your post (excellent, btw!). But what I don’t do is duplicate the page. I mean: Every mail I send has a web page copy in a server where people can access if they have problems reading it in their emails, but this copy is not accesible, and is done exactly the same way the email (tables, etc.).
Thanx
David Millar October 25th
The article and comments are very good. Today I decided to update my web site’s HTML (well, not just HTML) e-mail system. Here are a few notes:
- I used Lycos to check my spam rating. It’s worse than I would have thought, but it gave me things to do to make my e-mail less spam-looking.
- I knocked off a bunch of points by separating my logo/image from my link to the site.
- Between the 3 extra spam points and the comments in this article, I considered going back to plain text, but then I decided to do a multi-part e-mail with a text and an HTML version.
- Nested tables can actually look really nice. Virgin Mobile’s HTML e-mails have always made me jealous so I tweaked my HTML e-mails to use a similar layout.
- I also remember reading about message content a while ago, so I am writing the body text to sound more informal/friendly and make it easier to skim over.
I hope some of these tips help everyone.
O.J. Tibi October 31st
Absolutely useful, I’m trying to create an HTML e-mail layout right now myself! Thank you!
Regina November 7th
Hoping to save someone else the pain of troubleshooting– Outlook 2007 oddity:
when building tables that have “9-slice” borders: make the border images the full length/width of the table cell, rather than stretching the pixels through your html. Outlook 2007 stretches them to a degree, but depending on your table structure, will stop at the first column/row the image is closest to… and fall short of filling your colspan or rowspan table cell… Or at least that’s what appears to be happening.
ghawyy November 11th
so great and nice tips for mail i was looking for one like that to improve my messages and so on i love it so much and i love to dig it too let me friends visit it
Add Your Comment
( GET A GRAVATAR )Your Name November 21st
Trackbacks