Neptune Web | Boston-based digital marketing agency: Website Design, Website Services, SEO, Marketing Automation Neptune Web

Email Marketing Design and Development Best Practices

This post was originally written in March of 2010. It has been updated to reflect new best practices and latest web and email technologies.

Email marketing is a tricky endeavor, with many limitations and several barriers between sender and recipient. There is no guarantee that a recipient will actually open and read a message. By following design and content guidelines and best practices, you can at least get screen-optimized messages past spam filters and into an inbox.

Email design and layout consistency

In web page development, designers benefit from browser standards — page elements will appear consistent between Chrome, Firefox, Internet Explorer, Edge, Safari, Opera and a host of other browsers. The same cannot be said for email clients — recipients may see your fully rendered layout or a stripped-down, text-only document. Emails can be developed using web coding methods, however, since there are no email display standards like there are with web browsers, email clients may or may not render code into your intended design and layout..

Most developers agree that standards for desktop email applications, web-based email services and mobile email applications are a long ways off or possibly may never be reached. What's more troubling about the standards siutation is that is that Gmail, one of the most popular email clients in the world, does not support several of the web-based standards that are used that could be used email development. Microsoft's Outlook, long the flagship for business/corporate email use, has even less support for standards than Gmail.

What does this mean for the groups that actually design email layouts for mass email marketing efforts? 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 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. It will layer over these images. Be aware: According to this handy chart, Outlook, several mobile email clients and a handful of web-based clients do not support, or have limited support for, background images. Consider what would happen if you have light or white text against a dark background image in the body of an email. Clients without background support would not render the background, but would render the light/white text — against a blank, white background. That does not make for an easy reading experience. Most of the clients that do not support background images do support background colors. A solid color is a safer bet than a background image.

This email is a good example of a mix of both inline images and background colors. The animated GIF blends into the background color of the content area, giving the overall flow of the email a consistent look. Since most email clients support background colors, there is little risk using white text on the solid background.

Table-based layouts

In the early days of web development, table-based layouts were the standard way of presenting content. Rows and columns could be filled with text and images that would output content in a grid. Though easy and popular, this method was also limiting — there could be no visual overlap of page elements (because they could not cross grid lines) and content would appear stuck in the grid format in all screen sizes. In smaller screens, this would lead to a lot of text wrapping and horizontal scrolling.

CSS provides more flexibility for designs and developers, allowing elements to be floated or precisely positioned on the page, sometimes layered above or below other elements. Taking another look at the chart provided by Campaign Monitor, email client support for positioned elements in spotty at best — Outlook and most of the web-based clients do not support the CSS '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 in an 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.

This email, with a not-so-simple layout, is actually developed using tables. Nesting tables to create the appearance misaligned elements is a common and acceptable practice in email HTML development.

Responsive emails

Nearly half the emails opened today are opened on a tablet or handheld device. Many designers and developers are taking a "mobile first" approach to layout, focusing primarily on optimizing the email design and layout for handheld devices. Desktops will display the same layout, with just more room for width, causing the email to "spread out". This mobile-first approach has lead to trend in email layouts simplifying into a single column. This single-column layout will squeeze-to-fit narrow devices while expanding to a max-width in wider devices and screens, for a consistent user experience.

A typical coded, responsive layout will include CSS media queries that set display rules based on browser width. Several email apps lack support for media queries, so developers are again limited to table-layout and inline CSS for setting display rules.

Responsive email development is a very delicate process, requiring an understanding of various levels or media query and CSS support across email clients, apps and web-based services. By having a simple, single column, table-layout email, designs can achieve a consistent experience for all users, regardless of how they are viewing the message.

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 your attention. The bodies of these spam message will often consist of a single image — since junk filters can't "read" images, spammers use images to display text in an attempt to bypass spam filters' text/keyword blacklists.

Some guidelines to follow:

  • A high text-to-image ratio is a must in order to get past spam filters. The more images you have in the body of your email, the more text you should have to balance them out. Prove to your recipient's spam filter that you're not sending them junk mail by letting it read the actual text of your message.
  • Be careful in crafting a subject line — percentages and the word 'sale' might be spam 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.
  • If your email software or service allows, include a link to view the email as a web page (ex. "Having trouble viewing this email? Click here."). This has an added benefit of giving recipients a chance to see the email as you originally intended, in a web browser.

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 understanding how your email will render across various platforms, apps and devices, you do not need to sacrifice style for substance.

Interested in learning more about Neptune Web's email design and development capabilties? Contact us for a consultation.

Neptune Web is a full-service Boston-area interactive web and digital marketing agency with expertise in Website Design, Web Development, Digital Marketing Strategy and Execution.

We look forward to your comments and would be most happy to address and help solve any Digital Marketing or Website Design & Development challenges you may have.

comments powered by Disqus