HTML email coding tips and tricks for an upcoming article

Hey guys, Dave from Campaign Monitor here. I'm in the process of working on a bit of a HTML email coding cheat-sheet that will cover all the little hacks and coding tricks that give us designers the best results across popular email clients.

This will cover things like...

* Wrapping the entire email in a table with a background color to ensure it works in most clients.
* The right way to code a full page background image so it works in Outlook 2007
* Using HTML5 video to get video to work in email.
* The right way to use CSS shorthand so it always works
* etc, etc.

While I've got a few good tricks up my sleeve, I certainly don't know about them all. That's where you guys come in!.

If you have any of your own techniques or tricks that you use when coding your HTML emails to get the best results, I'd love to hear about them. If it's something that will be useful for the world to know, I'll likely feature it in my article (for a very high profile design site, so it will be seen by lots of your peers).

I'll be giving away a few of the brand new Campaign Monitor tees to the best tips and techniques posted. Thanks in advance to anyone who helps out, looking forward to hearing how you guys build reliable HTML emails.

canary canary, 7 years ago

A simple one: always use GIF in place of PNG files (because certain versions of Lotus Notes can't even handle non-transparent PNG files).

Edit: sorry - that's not about HTML or coding of any kind.


www.thecanarystudio.com
itsdavidhughes, 7 years ago

Another simple one. I always include a <span style="color:#yourcolor"> inside an href as some email clients have default styles that override your style. Boom!

olivierbon, 7 years ago

Put your css in the body...

peter_pearson, 7 years ago
adrianragucos :

Hi Dave,

3) A little tip to fix a problem in FF+Windows Live Mail/Hotmail, where a small 2/3px gap sometimes appears between the bottom of an image and the top of the image underneath: add the following stylesheet in the <head> (for Windows Live) and within the <body> (for Hotmail, at the top) tag of the HTML:

<style type="text/css">
<!--
img {display:block;}
-->
</style>

This solves the problem in Windows Live Mail/Hotmail, and does not affect the images in any other client.

Awesome! I've taken to using line-height: 0; on any <td> with only an image inside but never extensively tested it. This looks much better!

slee slee, 7 years ago

add align="top" to all images so they display correctly in yahoo.
use br instead of p tags again for yahoo to display correctly

richardjkeys, 7 years ago

Couple of things I tend to do:

1. Put any styles on the td elements, then try not to use span and p tags within these cells. I try not to use p tags as unexpected margins can break designs. Especially if it's a tight fixed height effort.

2. Wherever possible, don't leave white space in code between elements (even if it makes your code a little messy!) There have been a few times when removing space between a td and its contents (for example a table) have fixed the email for me.

gjhead gjhead, 7 years ago

I just woke up - but one thing I recently started doing was adding:

-webkit-text-size-adjust: none;

when styling my fonts - this ensures that your fonts don't get adjusted on the iphone and totally break your layout.


--
g. jason head
Co-Coordinator, Refresh Pittsburgh [refreshpittsburgh.org]
Front End Web Developer, Smith Brothers Agency [smithbrosagency.com]
tobz, 7 years ago

When styling your fonts, apply your styles with:

body, p {...}

this will then style properly in outlook 07

fyredefyre fyredefyre, 7 years ago

Test everything. Code that worked today can break tomorrow. HTML email standards change for the good and the bad overtime and overnight, so apart from typical use of web based fonts, in-line CSS & correct use of tables you should never assume your email will work just because it did before.

Emails should be built with classic HTML standards in mind with standard layouts and cross-browser compatibility considered for both email and mobile browsers.You'll never get emails rendering perfectly 100% across the board, but smart coding and testing will ensure this rending is close as possible.

Some common tricks you should consider using:

- Avoid using fixed percentages for tables & cells: Can be a rendering nightmare in some browsers
- Background images should be considered by not relied upon: Limited browser support
- Width is vital: 500-600px should be used to cater for email & mobile clients
- Avoid stretching/resizing images from their original size: Can render at the original size in some browsers
- Avoid use of image spacers: Relying on images to define your email structure is a bad idea, especially when images are blocked by default. Use table/cell widths insteads.
- Encoding/Special Characters: Ensure special characters are in the right HTML format, otherwise they can break in some cases. Common mistakes are made when copy/pasting from Word.

Some things just take practise and you'll discover these things as you go along. Even if you're not strong at HTML, just ensure you test your emails throughly before launching and 9/10 times you'll avoid any hiccups along the way.


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre
Wayde Christie Wayde Christie, 7 years ago

My number one tip that has saved me countless times:

Always add widths to every table cell.

<td width="100">

If you assume that email clients will be able to work the widths out, you'd be wrong, as I have been, many many frustrating times.

:)

Dave Dave, 7 years ago

Some very cool tips so far guys, thanks so much. Quite a few I've never see before and others I totally forgot about. Great stuff, keep them coming!

russellgreenwood, 7 years ago

Always have to make sure I don't use short CSS for colours.

This doesn't work everywhere:

color:#fff;

This does:

color:#ffffff;
EmailonAcid, 7 years ago

Don't shy away from using embedded CSS completely just because G-mail doesn't support it.  Although it is good practice to always use inline CSS, it's actually a good thing to create a default style in order to establish a clean slate. This will accommodate for default web browser CSS and default email client CSS.  Here is an example:

<style type="text/css">
table {
border-collapse:separate;
}
a, a:link, a:visited {
text-decoration: underline;
}
img {
display:block;
}
p {
margin:10px 0;
}
</style>

With that said:

NEVER use font face, size or color attributes because they may get overwritten by default email client css. Instead use inline CSS properties.
For example:
BAD = <font face="Verdana, Arial, Helvetica, sans-serif" size="4" color="#00778a">
GOOD = <font style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size:18pt; color: #00778A;">

NEVER use the generic "font"  property because it is not supported in Firefox, for example:
<font style="font: Verdana, Arial, Helvetica, sans-serif 18pt  #00778A;">

Due to the spacing issues issues in Hotmail, it is usually best to define font properties inside your tables or table cells for example:
<table style="font-family: Verdana, Arial, Helvetica, sand-serif; font-size:18px; color: #00778A;">

Always test, test and then test some more :)
www.emailonacid.com

BThies BThies, 7 years ago

USE NESTED TABLES.... maybe I didn't shout that loud enough... USE NESTED TABLES!!!

So here are my big tips:

1.) Instead of setting left and right margin or padding, use nested tables to recreate the same effect.

2.) Instead of using top and bottom margin or padding, use <DIV>'s to recreate the spacing.  For example, if I wanted a 10px top padding and 20px bottom padding around some text, I'd use:

<div style="font-size:10px">&nbsp;</div>
<div align="left">This is some text</div>
<div style="font-size:20px">&nbsp;</div>

This is also useful to create height in a row, as "height" is not supported in all e-mail clients.

3.) Never use spacers - just create one table that holds the rows, and place a nested table in each row with the exact columns you need (and SET each column's width)

4.) <P> tags are unreliable - they don't display the same in all e-mail clients, and can cause problems when used with text wraps of images.  I prefer <DIV>'s for everything.

5.) Don't kill yourself trying to make a design display perfectly in Lotus Notes 6.5/7.  It's like trying to make coffee with a toaster.  These e-mail clients don't support the majority of CSS out there today, and make Outlook 2007 look good.

5.) Like everyone else has said above - don't expect all properties and elements to behave the same in different designs.  Best practice is to design from the ground up, code inline, and test until perfect.  When you hit a rut - post it on this forum. :-)


Brian Thies
Professional Email Developer
Thies Publishing
cloud9, 6 years ago

Always helpful

<!--[if gte mso 9]>
// This CSS will only be seen in Outlook 2007
<![endif]-->

read more here about it

Dave Dave, 6 years ago

A *huge* thanks to everyone for helping me out here. Most of the suggestions made it into the final article, which was published on the weekend at 24ways.org:

http://24ways.org/2009/rock-solid-html-emails

I've just fired off an email to everyone whose material I used to organise shipping one of the new CM tees your way. This article was just the start, and we plan on pulling more and more useful resources together in one place to remove as much of the guesswork as possible when building HTML emails.

Thanks again everyone.

dozzq dozzq, 6 years ago

Shouldn't the approved and agreed 'techniques' be implemented within the provided templates. I was using one of your provided templates as a basis for my design and have just updated it with some of the above tips, which are very useful and valid. Maybe the templates need updating?

Mathew Mathew, 6 years ago

You don't actually need to use all of these tips and tricks in every case, it really depends on what specific HTML and CSS you are sending, and who is receiving it.

Our templates were built a while back now, but they were tested heavily and work well in all the email clients listed, so there wasn't a great need to update them.

If we found a major improvement that could be made, we'd certainly look at including that in the next template update though.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
domics, 6 years ago
peter_pearson :
adrianragucos :

Hi Dave,

3) A little tip to fix a problem in FF+Windows Live Mail/Hotmail, where a small 2/3px gap sometimes appears between the bottom of an image and the top of the image underneath: add the following stylesheet in the <head> (for Windows Live) and within the <body> (for Hotmail, at the top) tag of the HTML:

<style type="text/css">
<!--
img {display:block;}
-->
</style>

This solves the problem in Windows Live Mail/Hotmail, and does not affect the images in any other client.

Awesome! I've taken to using line-height: 0; on any <td> with only an image inside but never extensively tested it. This looks much better!

line-height: 0; works fine for gmail on FF but not for hotmail on FF. It get overrided with line-height: 130%;

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098