Email marketing is a tricky practice, with many limitations and several barriers between sender and recipient. Though there is never a guarantee that an intended recipient will actually open and read a message, by following certain design and content guidelines and best practices, you can at least get more messages past spam filters and visible to your actual recipient list.
Part 1: How to make sure an email appears the same to all recipients.
In web page development, designers benefit from browser standards — page elements will appear in a consistent manner from Firefox to older versions of Internet Explorer to Safari and beyond. The same cannot be said for email clients — depending on what program or online service a recipient uses, what they see could range from a fully-fleshed out newsletter-type layout or a stripped down text-only document.
There is no clear reason why desktop email application, web-based email service and mobile email application developers have not come up with a unified approach to standards and accessibility — the situation does not appear to be close to resolution. What’s more troubling is that Hotmail/Windows Live and Gmail, a combined 30% of the free webmail market, rate ‘average’-to-‘poor ‘in the support of email standards, according to the Email Standards Project. Outlook 2007, Microsoft’s current flagship email client also rates ‘poor’.
What does this mean for the groups that actually design email layouts for mass email marketing efforts? Background-less content areas, table-based layouts and a return to the early days of HTML (before CSS) are the keys to a positive, consistent recipient experience.
Inline images vs. background images.
Inline images are images actual objects within the content of your email, through the standard HTML <img> tag — text can wrap around this type of image, and oftentimes an email client will require its user to ‘click here to download images’ — this is a security measure. Unless a recipient has extra security enabled on their client, clicking to download will display all inline images in the body of an email.
Background images are just that — images that appear behind the email’s normal content. Text will not wrap around background images, but it will appear visually in front of these images. Be aware: According to this handy chart, Gmail, Hotmail, Outlook 2007 and Lotus notes do not support background images. Consider what would happen if you have light or white text against a dark, gradient background in the body of an email. The above mentioned clients would not render the background, but would render the text — against a blank, white background. That does not make for an easy reading experience.
This email is a good example of a mix of both inline and background images. The blue headlines are actual inline images, so even if a recipient’s client fails to show the wood and paper backgrounds, it will at least show the blue headlines (if the user ‘clicks to download’) and the text itself.
Table-based layouts
In the early days of web development, table-based layouts were the standard way of presenting content. Developers would create columns and rows and populate cells with text and images for desired, grid-like effect. Though easy and popular, it also proved limiting — there could be no visual overlap of page elements and content would appear stuck in the grid-like format. CSS solved this problem for designers, allowing them to float elements or even position them manually anywhere they saw fit. Taking another look at the chart provided by Campaign Monitor, it appears that email client support for positioned elements in spotty at best — almost none of the clients support the ‘position’ property and rightfully so: absolutely positioned elements need a point of reference in order to display at particular coordinated in relation to that reference. What is your point of reference, especially in a web-based interface that is essentially a frame-within-frame display?
With positioned elements not consistently supported across all email clients, developers must rely on the next best thing, table-based layout, which also happens to be universally supported across all email clients. Usually this does not present a problem, but just be aware of the columns and rows that are created by this layout — even if they’re not all visible upon final rendering of code.
Believe it or not, the same email that is a good example of inline/background images is also done entirely in table-based layout. Nesting tables to create the appearance misaligned elements is a common and acceptable practice in email HTML development.
Another good practice is to include a link to view the email as a web page (“Having trouble viewing this email? Click here.”). Not only will this ensure that recipients have the option to see the email fully rendered in their web browsers, it helps get your email past spam filters.
Part 2: Avoiding junk mail filters
Once you have an email design that you’re sure will appear consistent for all recipients, how do you ensure your email marketing efforts to not get caught by a spam filter? Look no further than your own junk mail folder.
Littered amongst the undesirable messages are subject lines indicating “URGENT”, “SALE”, “50% off”, “Save!” and other terms meant to grab the attention of unsuspecting eyes. The bodies of these spam message will often consist of a single image — since junk filters can’t ‘read’ images, spammers replace all their actual text with images-as-text.
Some guidelines to follow:
- A high text-to-image (actual file size) ratio is a must in order to get past spam filters. Prove to your recipient’s inbox that you’re not sending them junk mail by letting it read your text — and provide lots of it!
- Be careful in crafting a subject line — percentages and the word ‘sale’ might be red flags. Use a thesaurus to find alternate words.
- Include contact information and an unsubscribe link — make it obvious that you are a legitimate organization that does not mind being contacted by the people to which it markets.
Also consider running your message through a spam filter test like SpamAssassin or Barracuda Networks.Neptune Web uses an Apache command line program from SpamAssassin that will output a numerical spam rating, with line-by-line explanation of what email elements (images, text, etc) and how they contributed to that rating.
Conclusion
Development for email marketing is a multi-pronged approach that requires diligence not only with your content, but how it's constructed. By keeping things simple and taking a standards-based approach, you do not need to sacrifice style for substance.