InsightIQ Blog

Retaining HTML Email's Visual Integrity Across Email Clients

Jun 24 2009

Many times when sending out bulk emails we all might have noticed that the appearance of email creative is not consistent across email clients. Some emails may look good in Yahoo or AOL whereas the same email content may not appear properly in Outlook or Gmail. The reason is different email programs render HTML differently. They may display table, style, background formatting and other HTML elements in slightly divergent ways. Hence it becomes quite challenging to prepare email creative in such a way that it holds visual exactness across email clients.

In the following sections we discuss several critical best practices that address this challenge in email design.

Dimension considerations:

Design the email creative as half-page rather than a full-page ad. This will not force the recipient to scroll. Another consideration is to get the whole email "above the fold" (i.e. within the preview pane of the email client), thereby keep the height of the email around 250 to 300 pixels. Also depending on screen resolutions the email that fits nicely on one screen may require horizontal scrolling on someone else's screen. Hence do not exceed the width of email messages to more than 600 pixels to avoid horizontal scrolling. This will allow vast majority of readers to see the full message within the screen.

Use plain HTML:

Create the HTML in an HTML editor in plain HTML. This will ensure that the html tags are common across email clients. Do not use html design tools like MS Word, PageMaker or Dreamweaver as many clients do not support the tags produced by these tools. Similarly it is extremely important to not use flash, external CSS, Javascript, form objects (password fields, radio buttons, etc) animated GIFs, nested background colors, background images, imbedded images in your email content; as many email clients block these objects for security reasons; i.e. to avoid exposing users to viruses and intrusive programs.

Working with Images:

Many people, either by email client defaults or personal preference, are blocking images in the HTML-formatted messages they are accepting. Hence it is a good practice for the email creative to prepare for both image "on" and "off" scenario. Use ALT tags as component of IMG tag. This will ensure that an image description shows up in place of the image for those recipients who have their image reader turned "off" or the reader is set "off" as a default. It's also a very good practice to preview your message with images off so you know exactly how other people will see it, and make any necessary design changes. Also use smaller images to reduce load time.

Use most common fonts:

Use fonts that are universal on the Internet such as Arial, Verdana, Tahoma, or Times New Roman. Any other fonts will resort to a default font if the recipient doesn't have it installed on their computer. Minimize the number of fonts, sizes, and colors used in the design for easy flow and professional look.

Optimize the creative:

Avoid the temptation to build your messages using only images. Try to keep a 60 (text) to 40 (image) ratio on your campaigns. The entire HTML and graphics must be under 50kb in weight (HTML 10kb or less and images 40kb or less). If you have graphics with large blocks of flat color or plain text then save it as GIFs. If the layout is one large graphic, slice it into smaller pieces and spread it throughout the email.

Adopt Email Preview Technology:

Considering there are number of different email clients it becomes time consuming and frustrating to test the email creative across all of these email clients. It is thereby best to adopt email client preview technology, such as:

http://www.campaignmonitor.com/

http://litmusapp.com/email-testing

These applications provide a quick and easy preview of how the email creative will look in the various email clients. It also provides other very useful features like image on / off testing, preview pane testing i.e. how much content fits "above the fold", spam scoring testing by running email through real spam filters and firewalls.

Conclusion:

In summary, considering the different email clients manifests HTML divergently, designing a compatible email creative gets a little tricky. Hence we recommend making use of above guidelines to craft successful email designs that would retain visual integrity across email clients.

If you have any questions, feel free to email me at sid_sharma@csgsystems.com

This article is filed under: