HTML Email Coding

HTML Email Full Page Background Fix (for Outlook & Webmail)

Note – we now have a better fix for this issue, which we recommend over the below fix. We’ve kept the content on this page for reference only.

Outlook 2007 supporting a full page background image

Since Outlook 2007 was released, support for background images in email has been problematic. Whilst you can use the <body> tag to successfully specify a full page background image in Outlook, many webmail clients will ignore this. This has often meant that both background images and colour are also specified using a full width table, to ensure support in webmail clients.

One issue that occurs from this technique, however, is that Outlook will also render the background colour from that full width table, but not the background image, meaning that the solid background colour will display above any full page background image specified on the <body> tag in Outlook.

This fix allows you so specify a full width background image that displays in both Outlook and webmail clients, and will fall back to a solid background colour when viewed in any email client with images disabled.

Continue reading

Optimising HTML Email when Images are Disabled

One of the frequently overlooked challenges email designers face is that, either due to personal preference or the settings of their email client, many recipients will view marketing emails without images enabled.

Almost all webmail and desktop email clients now default to not showing images, with the user having to either click ‘allow images from this sender’, mark the sender as a trusted address (eg. add to address book), or update settings within their email client. Some recipients are even unaware that they’re missing out on seeing images at all.

Regardless of the reason, it’s really worth spending some time thinking how you can improve the experience for those recipients with images disabled. O2’s email campaigns are a great example of optimising the experience for these users:

And for comparison here’s the email with images turned on:

So what tips can we get from O2’s example:

Build using web text

Ensuring your important copy is encoded as web text (instead of trapped inside an image) means that it will show when images are disabled. It’ll also help your spam score, and increasingly will help get through intelligent inboxes like gmail’s priority inbox. The downside is that you’re restricted to the standard web fonts, so you might have to sacrifice having headlines in your brand font. You might want to try having headlines in a brand font, and then styling the alt attribute….

Use alt attributes

Use alt attributes on images (also known as alt tags) to specify  replacement text, especially when headlines and copy have to be included in an image. By default they’ll be blue, so if your image is over a dark background colour you might want to consider adding style information to change the colour. You can extend this idea to specify a replacement typeface and font size in certain web browsers (again you’re stuck with web typefaces, but you can have this as a backup against brand-font-in-an-image). O2 have done this well here.

Code background colours

You can still use background colours to add hierarchy and structure to your email, even when the email client turns images off. It may take a little longer to build, but it’s possible to code things like call to actions so they still stand out from the rest of the page. O2’s example has gone very in depth – they’ve coded the background fade as a series of table cells with background colours, instead of a large background image. Previously other brands have coded their logo in this fashion too. Be careful when doing this though – it can generate lots of  code, and if you top 100kb you’ll start to get rendering issues in some email clients.

Think about the preview pane

Having a massive image taking up the whole preview pane area will look great when images are displayed, but the experience for those without is not as pretty. Try to get some web text and colour up there.

Use the pre-header

Think about getting your key offer in right at the top of the email – read more about pre-header best practice.

Think about deliverability

Encouraging recipients to “add to your address book” or otherwise mark your address as a trusted source will show credibility to the email client, and will help get images shown in the future.

TEST!

This is by far the most important thing to do – try disabling images using a tool like Firefox developer toolbar, or intentionally break image urls in your code and send a quick proof – it should still be possible to get the right message from your campaign even with images disabled.

HTML Email Issue: loss of backgrounds in Hotmail (includes fix)

Various email clients have different quirks and html challenges – in our HTML email coding section we document these and detail any workarounds if available.

Email Client Affected:

This issue affects the new version of Hotmail.

Issue:

Hotmail have introduced a code in their rendering engine that effectively removes the background image or colour properties from ‘wrapper’ full width tables. Full width tables are commonly used in html emails to implement background formatting and to center the main email, and are specified as 100% wide.

Effectively the new Hotmail code forces the maximum width of the email to be widest part of the email defined in pixels, which may be either an image or a table.

Fix:

Whilst the width of the wrapping table could be forced out to a certain width (eg. 1000px), this would cause other rendering issues in other platforms (and it would be pretty impractical). Instead, a small CSS code snippet can be used to force the width back out to 100% – simply add this code at the top of the email HTML code:

<STYLE type=”text/css”>
.ReadMsgBody
{ width: 100%;}
.ExternalClass
{width: 100%;}
</STYLE>

Discovered:

July 2010