ITWALES.COM - Email Marketing Clinic - What you see is what you get

Posted: Wed, November 19, 2008

Email Marketing Clinic - What you see is what you get

By Andy Parker

When creating any form of advertising it's vital to get the right balance between text and imagery. Too much text and the viewer will lose interest, too little and they'll be left bewildered as to what it is they are looking at.

Applying this to email design adds a few extra considerations: spam rating, legibility, cross platform bugs and more. In this best practice guide we are going to look a little more in depth into these areas and their implication for HTML email design. By the end you should be confident in how to correctly render images in emails along with keeping the right balance between text and graphics. As you'll see, when it comes to email, design matters.

It's spammier than a can of spam!
Every mail exchange uses a spam filter to check incoming and outgoing messages for numerous ratios to ensure that what is being sent or received is safe. The use of images in HTML email marketing provides several areas of concern for a spam filter.

Firstly images are always referenced by a web link to where the image is hosted. All links are possible threats, clicking on one could result in the download of unsafe material. Images can also vary in file size, the larger the file the more likely it is to increase the spam rating of a message.

Try to ensure that you save the images you are going to use in your HTML email as .gif files. These are predominantly smaller in file size than other formats but sometimes this is at a cost as the format is designed to be limited in the colours that it can use. It's important to experiment with settings in your graphics package to get the best results for each graphical element.

Don't use a graphic where you can just use a solid background colour. This is common in email design, when someone has taken the lazy option of slicing and dicing a graphic in Photoshop and letting it produce the final HTML email.

Using a solid background colour, rather than an image, will not only reduce the spam rating of a message due to fewer links requesting files, it will reduce its overall size, making it load faster.

Finally, if you are using a web-safe font in your email design - don't use an image for text where you can use HTML. Emails containing text rendered as images will be unreadable to readers that have images blocked in their email client.

Lines and lines and lines and lines
Browser quirks are the bane of email design. With time you will learn to code for each browser's idiosyncrasies and the same applies for email clients.

One advantage of coding an HTML email for mail browsers over web browsers is that there are very few knock-on effects from one to the other. Images in HTML emails are very much the backbone of any message. They are what make the difference between using HTML over plain text. One of the prime candidates for hours of temper tantrums is the longest standing email browser of them all...Hotmail.

Hotmail is truly unique. The Godfather of email to many, it has changed very little since its first release in the mid-nineties (A new theme layout was released on 1st November worldwide - backlash ensues on public forums. N.B). It does however suffer from one of the earliest browser bugs ever recorded when it comes to images, which can make it a potential nightmare for your carefully crafted email design. A large graphical element sliced into smaller chunks breaks, causing gaps between each section. Don't fret! Salvation is just around the corner.

Set all images in your HTML email to ‘display: block’ to stop this little bug. It has no impact on other web browsers. Images are inline elements and by default Internet Explorer provides padding to these elements. Hotmail uses the same rendering engine as Internet Explorer. Setting the element to block removes the padding. Of course if you have multiple images in a single table cell that need to be inline, don't set them to block.

Style your alt tags
Yes, it is possible to apply styles to your alt tags, though not every email client supports it. Surround your tags with tags and apply in-line styling to the span tag. You will find this provides you with alt text that matches the formatting of the rest of your email design.

Unfortunately this doesn't apply to Microsoft Outlook, which shows a blocked image icon. If you have images which are acting as links, style the tag in the same way to keep the formatting of your HTML email looking top notch, with or without images.

About the author Andy Parker is the Web Producer for Pure and part of the creative design team. He is an expert in CSS and XHTML and an established concert photographer.

Send an comment about this article to editor@itwales.com

Subscribe to
ITWales Updates
Click Here!