The State of Background Images and HTML/CSS in Emails
February 5, 2012
**This post ended up being eight pages long and represents a good bit of testing, so I decided to split it up into two posts.
This post describes tests in various email providers/clients. You can view the background on this particular eblast here: Designing an HTML Email
As stated in my background post, if I had had input on the design, I probably would have urged a more restrained design, in order to ensure compatibility. However, as it was, the client saw a design that was basically their web-page recreated, complete with black on white text and background images.
So, to make it work as much as I could, I did significant testing in various webmail and email clients, the results are described below.
Table of Contents
- A Quick Review of the Design
- Popular Web-Mail Clients (AOL, Gmail, Hotmail, Mail.com, and Yahoo)
- Squirrel Mail Web Mail Client
- Outloook Web App
- Horde Web Mail Client
- Round Cube Web Mail Client
- Android Default Mail Client
- Blackberry Mail App
- Ipad/Apple Mail
- A Word About Outlook HTML Rendering
- Outlook Express, Outlook 2003, Windows Mail Security Settings
- Displaying PNG Files in Outlook 2003 and Outlook Express
- Outlook Express 6.0 XP
- Outlook 2003 in XP
- Microsoft Outlook 2007+
- Mozilla Thunderbird
- Thoughts on HTML in Emails
This is a bit of a recap, but my basic methods were to use “background=” and a redundant style “background-image()” definition within the table. Combined with other nested tables, I created a HTML email that used a background image and displayed correctly, for the most part, in common email situations.
I avoided using a body background declaration and instead set up a main content table, which I added the background image to, and was nested inside of a 100% width wrapper table. The wrapper table had a background color set to black, to ensure the white text(cringe, yes,) would be visible in most situations, even when the background image was blocked.
I also reworked the design to ONLY use a background image on the main content table, using images and background colors in the sidebar. For instance, had it been a webpage, I probably would have used a background image/color to draw the sidbar, which used one of those ribbon-image 3d deals. However, instead I did it a little differently, using a solid background color and then put the sidebar image under it, showing a little of the sidebar in the image itself, to create a 3d like effect.
Of course, it is best to avoid float and divs, instead using nested tables. Also, inline style declarations tend to be more compatible than css element declarations, with it often being necessary to give each element an inline style.
Popular Web-Mail Clients (AOL, Gmail, Hotmail, Mail.com, and Yahoo)
I don’t have the specific numbers off hand, but I think it is safe to say that Gmail, Hotmail, Yahoo, and AOL are probably the most popular web-mail clients. Not sure how many people use Mail.com, but it was tested as well.
Since I was being rushed by my clients, I first focused on these email providers.
For the most part, normal CSS/HTML declarations are respected, including background images. Using the method described above, I only ran into minor styling issues.
For instance, Yahoo required me to specify line-height and padding on paragraphs, to ensure the proper spacing.
Surprisingly, Hotmail ended up giving me the least issues. Aol was also pretty forgiving.
Squirrel Mail Web Mail Client
By default, my Squirrel mail was set to disable HTML display of messages.
So, the message initially was displayed as plain text and ALL images/CSS/HTML was stripped out.
However, by going to Options -> Display Preferences and setting “Show HTML Version by Default” to “Yes”, the image was displayed mostly correct.
I did not see an option to toggle this from within the message itself, so it only displayed correctly after changing the option under settings.
However, “Unsafe Images” are hidden and replaced with an image that says in big red letters “This image has been removed for security reasons”.
To show these images, the user needs to click on “View Unsafe Images”
Whether this is normally a default setting/option or something the average squirrel mail user would actually do…
Outloook Web App
Outlook Web App, which works with Microsoft Exchange Servers, filtered the email initially, removing the background image and other remote images. However, most of the style was left intact. By enabling the remote images, the background image displayed, as did the rest of the email.
There were no major style or layout issues, although spacing needed to be tweaked a little bit.
Horde Web Mail Client
Horde replaced all remote images with red backgrounds, with an option to “Show Images.”
After clicking on “Show Images” the message displayed more or less correctly.
However, there were still a few issues, like ignoring table align and adding a random(?) background color to a table.
After clicking on “Show HTML in a New Window,” however, the above issues were fixed and the email displayed correctly.
Round Cube Web Mail Client
Round Cube also displays a warning, hiding remote images. However, clicking on “Display Images” allowed the email to display mostly correct.
However, Round Cubes default style over-rode certain style declarations. For example, setting a font-size within an inline style of a “td” element was over-rode by Round Cube’s CSS, while setting a font-size within an inline style for a “p” element was not.
Full Email Clients
Android Default Mail Client
I did minimal testing on Android’s default mail app. The design displayed correctly, including background image. It ends up looking similar to Gmail.
However, it ended up being difficult to view the message, because the height/width is respected and there is only so much you can zoom out. So, with a width of around 700px, there ended up being a lot of scrolling.
Blackberry Mail App
Unlike the Android, Blackberry’s mail app, at least on the limited curve without touch-screen, ignored width statements, instead resizing it to fit on the Blackberry’s screen.
As a result, the sidebar got pushed to the bottom of the email and much of the other alignment was ignored/incorrect.
The background image displays correctly, after allowing the download of remote images. And, after reloading the email, images used in buttons, ect displayed correctly as well.
Ipad/Apple Mail
I had a co-worker test this, because the only Apple Device I own is a first gen iPhone that I use sometimes for testing, but is very under-powered and due to its age, somewhat unreliable to compare to newer models.
However, in every test, the background image and html/css were respected on iPad and I did not run into too many issues.
A Word About Outlook HTML Rendering
Before describing some of the more common Microsoft Email Clients, it is important to understand how they parse HTML.
Earlier versions of Outlook, I think anything before 2007, used Internet Explorer to render HTML. However, starting in Outlook 2007, Microsoft began using Microsoft Office Words Rendering Engine, which frankly, is a bit of a pain to work with. As a result, a custom method is required to make background images appear in Outlook 2007+.
Outlook Express, Outlook 2003, Windows Mail Security Settings
In my testing, Outlook Express, Windows Mail, and Outlook 2003 were all basically setup to block remote images.
In Outlook 2003 and Windows Mail, adding the user to the safe senders list or going to Tools->Options->Security and setting images to ALWAYS be downloaded ensured background images to display.
Some more testing is required, but, at least with Outlook Express, I do not think there was even an option to display images.
**However, the only remote image was actually the background image during testing, so this might have been a factor too.**
Displaying PNG Files in Outlook 2003 and Outlook Express
Since Outlook 2003 and Outlook Express use Internet Explorer’s rendering engine, if you have IE6 installed, PNG images do not display correctly.
I set up Outlook 2003 on a virtual machine and even after installing the Microsoft Office Service Pack 3, PNG files did not display until installing Internet Explorer 8.
However, after installing a version of Internet Explorer that supports PNG files, transparent PNGs were displayed correctly.
**Shakes fist at IE6**
Outlook Express 6.0 XP
Overall, HTML and CSS displays correctly. However, as described above in the Security Settings Section, I did not see the background image until going to Tools->Options->Security and manually enabling all remote image downloads.
I tried adding the send to my contact list too, but this did not seem to ensure the remote background image would be displayed.
Nor did I see a warning that there were any remote images to download, although the only remote image was the background in my test, so it is possible had there been others, it would have asked.
Outlook 2003 in XP
As was the case with Outlook Express, remote images were hidden and I did not see an option to display them.
However, by adding the user to the safe senders list or going to Tools->Options->Security settings, the image was displayed correctly.
However, again, the only remote image in these particular tests was the background image, so it is possible if one of the buttons had been a remote image, a prompt would have displayed.
Aside from security settings, the background image and other CSS/HTML displayed basically correct.
Windows Live Mail Windows 7
Like Outlook 2003, adding the user to the safe senders list and/or setting remote images to ALWAYS display, allowed the background image to display.
Otherwise, HTML/CSS displayed more or less correctly.
Just to be sure, I removed the Outlook 2007 conditional check, described below, and the background image still displayed correctly. So, I think it is safe to assume Windows Live Mail is also using Internet Explorer to render HTML.
Microsoft Outlook 2007+
**Note: I had a co-worker test in Outlook 2010 and only personally tested in Outlook 2007. So, 2010 info might not be 100% correct. However, background image/HTML/CSS did display correctly in 2010.**
As I mentioned above, Outlook took a turn for the worse, IMHO, after 2003, because Microsoft decided to use the Office HTML rendering Engine, instead of Internet Explorer. Of course, for security reasons, separating things from Internet Explorer is a good thing, but I digress.
In any-case, Outlook 2007 ignores background images, both the Style and Background= method on tables. To get around this, I used a conditional check, much like the conditionals you can use to test for the Internet Explorer Browser, to use a special XML object.
The conditional wrapped the inside of the table, before the first “
After using the conditional, background images displayed correctly.
There was a small spacing issue around the body of the email, basically, Outlook was adding about 20px of space between the background table and the beginning of the first content table. I got around this by creating a slightly larger Outlook specific background image, which added 20px on both sides for padding. Probably playing with the html/css would have worked too.
The Conditional, just the basic is below, removing most HTML/CSS/STYLE stuff, including height:
<table background="image.jpg" ... stlye="background-image:url(image.jpg);">
<!-- Start Outlook 2007+ Background -->
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:___px; width:___px; top:0; left:0; border:0; z-index:1; ' src="image.jpg"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:___px; width:___px; top:0; left:0; border:0; z-index:2;'>
<div style="">
<![endif]-->
... email content ...
<!-- End Outlook 2007+ Background -->
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
Mozilla Thunderbird
As is the case with most things Mozilla, I did not run into any major issues. HTML/CSS and background images displayed as you would expect them too.
Thoughts on HTML in Emails
For the most part, as has been the case for some time, as long as you design using tables and basic CSS, most email providers/clients/webmail offer fairly adequate HTML and limited CSS support. Going with inline is best.
Testing in all browsers, like you would when doing normal website design, as well as validating the code, should ensure that it displays correctly in, at least, the majority of situations.
There are a few minor differences, largely with padding and spacing across different email providers, but these are easy to identify and get around with a little individual testing. Yahoo and Round Cube come to mind in regards to spacing issues.
So, you still need to TEST TEST TEST! As well as making sure you have alt-text and explicit height/width for images, so people can still see them even if remote images are blocked.
Aside from security issues, Microsoft Outlook 2003, Outlook Express, and Windows Live Mail preform adequately displaying both HTM/CSS and Outlook 2007+ uses the Office Rendering engine, so can be a bit of a pain, but using the v:shape hack, this was overcome.
I am still a believer that you should be designing for worst-case and lowest common denominators, so would have not went with a design like this. However, the rather complicated design showed up correctly in the email providers described above.
Time permitting, I will add some of the providers/clients I missed.
