6 Easy Ways to Improve Your HTML Emails
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:
alt="Some of the various clients you should test your emails in." />
- 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.
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:
alt="Screenshot from Discovery Health showcasing a cluttered looking email." />
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:
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Bob Ricca
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Tom Elders - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+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
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
@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.
very good article. I digggggg the gmail trick. especially the cross browser behavior of web based email clients is a rarely mentioned thing
@ 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
Excelente artículo
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/
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!
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?
eeeeew tables make me sad. 1×1 of img won’t look like spam unless it’s linked.
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.
‘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.
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.
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
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.
Absolutely useful, I’m trying to create an HTML e-mail layout right now myself! Thank you!
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.
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
All these points are spot on, I just wished I hadn’t had to learn them the hard way.
Here’s another tip:
If you have a header image at the top of your email (especially something you can’t really get across in an ALT tag), don’t set it’s height attribute. Then, if a user has images turned off, instead of seeing a big white box in their outlook preview window the image will ’shrink’ and they can see some of you copy underneath it instead.
This. article. is. awesome.
I used to work in a digital department as an Interactive Developer for a Direct Marketing company. One of our primary sources of income was email marketing. I worked on hundreds of campaigns for the likes of Betfair, The National Lottery and Coca Cola. I wish I had had access to an article of this quality when I started there. I learned all the above the long and hard way! Bob has encompassed the many pit falls that I fell into and then had to drag my way out of!
Needless to say, due to my experiences, I hate coding direct marketing emails and now promptly left my job there to become an applications developer for a big online payments company!
Congrats to Bob on such a well written article as I was very sceptical when I opened this… I thought, “Oh god another tutorial on email marketing which neglects to mention any of the infuriating and time consuming bugs!”
Instead of an 1×1 image you can write the text wrapped into a span with font-size 1 px and the same color as the background.
That is how i do it as well!! easier than with the embedded 1×1 image
Having text the same color as the background will definitely set off spam filters. Be careful with this!
oh, i’m so glad this thread is still going. it’s not often i’m in this neck of the woods (usually over at psdtuts or vectortuts), so needless to say, i get lost in the code easily.
that said, anyone know where i can find a tutorial to have the middle cell of an email newsletter table expand with text? the first one on google seems to deal with a much older version of dw (and that article seems to have been stolen and reposted several hundred times). just need something anyone can use. it’s awesome that i’m just learning html and i’ve gotten saddled with something even the web designers loathe.
anything heavy on basic instruction is awesome. and thanks to the tips and tricks in the article and comments above … they’ve helped steer me in the right direction.
The tip about Gmail’s inbox is great. Thanks
It would be great if we could find Email templates at ThemeForest.
I know, we could use HTML templates to make them (making sure they work ok at different email clients) but we could use HTML to make WordPress templates and yet we can find plenty of them.
Lol, At my last job we had to design in house html emails and the company was using a legacy version of Lotus Notes. Lotus doesn’t support inline styles or even up to date html. In a lot of cases we had to use depreciated elements like font tags lol. It was like learning in reverse
because those lessons only applied to older to Lotus.
You have answered more than question that has nagged and niggled me for months! I had no idea gmail and hotmail did not read styles in the head tag and could not figure out what the fix was. You have saved me so much grief! Thanks!
Another thing I suggest to email designers is not to use any kind of sidebar effect which restricts the height of your email. As some email clients like to add extra spacing sometimes having a set height boxed area is unworkable and creates white gaps especially if you have nexted tables. It maybe possible to use background tiled images for sidebar decoration, such as a shadow effect on a while box, but of course this will not display in Outlook 07/Gmail. Personally I try and ensure emails are flexible height-wise.
Great Tutorial on a topic that really gets me mad. I was doing a Newsletter Design for a Company and was only testing it in Thunderbird.
Well, so i made this cute design, perfect markup, then after a few days a get a call that the eMail looks like crap in Outlook.
So i had to do the whole Thing again, but this time, with tables.
Thanks Microsoft, not only you have the Browser that sucks most, you also have the most sucking eMail client.
Wow a lot have commented here hahaha this is really a great tip for those who want to make an HTML emails…
keep up the good work…. Great tip
I’ve been doing html newsletters for more than 2 years and have pretty much learned as I’ve went along. I’ve got to say I’m pretty happy that I’m doing most things properly, but using a small graphic with an alt tag to produce a better email title in Google is great.
vrotmnenogi
Does anyone know how to send out an email yet have it be able to be forwarded to a persons GMAIL contacts? Is this where an API would have to be involved?
this, very thank you..
Your site full professional and very beautiful…
this is thank you..
your web site wery good..
this very thank you..
your web site very good..
hi, tx for this tut.
Wondering if css sprites can be used for designing a html newsletter and using inline css to get the right background??
Any tips?
CSS sprites and email don’t mix at this point in time. I’d say it would probably be a bad idea.
very good
thanks
i do all that except the CSS – i prefer just not to use it at all as it is not accepted by all email clients
BUT, i still have problems in Outlook and don’t know the cause!! …