General Findings

Hello All,

I've had the pleasure of working with HTML email recently. Coming from a CSS XHTML sort of background this has been a nightmare. Coding like its 1996? I was like 3 years old! (Honest!)

Anyway, with help and LOTS of testing I'm a little happier. As a way of giving something back to those on this forum I thought I'd post up my notes. I never really intended to share these, they were just a way of keeping my sanity. However, I'm hoping they'll help someone, somewhere! Also, I'll probably come across this in Google in 2 years time when I'm searching for answers to long forgotten problems. Hello future me!

Anyway here goes

Sizes:
-----------------------------------------------------------------------------------------------

600 px wide seems to be the safe width and almost a standard

300px high is what would normally be seen in the preview


Code
-------------------------------------------------------------------------------------------------

Some clients strip out the body element and also anything in the head.

Browser based email clients suffer from browser based problems - firefox hotmail is different from ie hotmail.

Avoid margins if you can. Hotmail strips out Margin top. Always use long hand for this. - Premailer uses shorthand! (http://premailer.dialect.ca/). You can however use left and right margins if you do this.


Hotmail adds another div around everything that has "display:inline" - this means that all the 100% width stuff might not work - at moment not in firefox. There is a way around it http://www.campaignmonitor.com/blog/post/3228/a-fix-to-background-color-and-alignment-issues-in-windows-live-hotmail/ either messing with hotmails class names, or by setting table fixed. messing with classnames isn't future proof. table fixed seems to be a bit lucky and also make the table act like min width where content is reflowed. could be useful but also scary.

If you want to add a bit of space above and below a fixed height image you can fix the td height to a bit bigger than the image and use valign center

Generally I've found that heights and line heights seem a little bigger in outlook

Don't bother with padding - outlook 07 for a start ignores it. - use a combination of margin left and right and space cells for top and bottom

To get a space fairly consistent height in a td use

                        <td valign="top" height="5"  class="fivespace">
                            &nbsp;
                        </td>
then set the font and height style to 5px to make sure.

Alternatively you could use a div with a &nbsp; and do the same thing. You must remember to change the font size though as I think its that that really adds the height. This might be neater than using a whole td everytime and might be easier to read back.

The first part of the email gets displayed as the popup in outlook - best put something useful there instead of "view in browser"

Use !important for colours on headings (h1s etc) hotmail needs this. don't do it for all colours though or the cascade gets messy

I've used email on acid for testing. This emulates the clients so can't be totally trusted.

links - yahoo has something installed that can change the colours.



Images
---------------------------------------------------------

images might not show up until they have been asked to "download" them

Some clients do show the alt. Some don't. Some allow you to style the alt so its worth making them bigger

Its possible to add bg images to the body using this: http://www.campaignmonitor.com/blog/post/3170/adding-background-images-to-your-email-in-two-simple-steps/.

If you do use the technique do not put a colour on the 100% width body-table. In outlook this will go over the body's image.

Adding table:fixed "width:100 !important" sorts out a problem with firefox and 100% width table.


Background images in cells might be possible but sound like a lot of hassle for outlook - also not sure what would happen in future versions using VML and conditional comments. the above sounds simplest. Outlook does not support any other form of bg image. http://www.campaignmonitor.com/forums/viewtopic.php?pid=14197.


Whenever hotmail blocks an image it goes grey unless that image has another colour over it.  - Therefore you really need to force a bg colour if there is going to be a bg image behind the text - unless you know that the text is going to be darker than hotmail's grey. (in other words if you use a bg image in the background make sure there is a bg colour in the foreground)


If there are spaces between images, add display block for images:  http://www.viget.com/inspire/hotmail-image-problems-in-html-emails/ - remember though that this will stop an image from being centered.

can't seem to get a bottom margin working in outlook on images

mattysk, 5 years ago

A little addition to the above. - Adding the !important rule to Headers (H2s etc) makes hotmail work. However this breaks outlook 2007 and 2010. To fix this use:

color: #c41230; color: #c41230 !important; - this MUST be in that order.

JordanK, 5 years ago

Like you said, emailonacid results are not entirely accurate. I've seen emails that appear fine when tested with Email on Acid yet actually have some pretty big rendering issues.

I do use emailonacid before I run other testing as it will point out some coding errors I might otherwise have missed. Also it returns results quickly.

For my final testing I've been using Mailchimp (whose testing is provided by Red Path). Results take longer to generate but it will literally send your email to each email client it tests and provide you with a screenshot of the result.

Dave Dave, 5 years ago

Awesome roundup of tips there @mattysk. As someone who has been around table based HTML designs for a long time, I'm almost jealous of someone who didn't have to go through that period. But, you're in HTML email world now, so it can't be avoided.

@JordanK, we actually provide some really comprehensive testing in Campaign Monitor too with our Litmus integration: http://www.campaignmonitor.com/testing/ It covers the same clients as Return Path as well as some additional mobile clients like the iPad.

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