Monday, May 21, 2012

Email Newsletters: A Quick Overview

These last few weeks I have had the opportunity to construct several newsletters, both for internal and external applications, as well as having clients in need of them. Having previous experience with the designing and building of newsletters, I was definitely aware of the issues that lied ahead of me. Although it’s not rocket science, it’s a pain in the butt; a pain that many would rather not deal with. So with a bit of downtime foreseen in my future, I felt this was a great time to give myself a “refresher” course on newsletters and a great opportunity to blog about this topic. Whether you are a newbie to email marketing, looking to sharpen your skills, or just trying to troubleshoot a few issues while in the process of building – I hope this post serves you well.

So let’s start off with the basics, what do we need to know about them? First off, we cannot walk into this as if we are building for the web (meaning specifically for web browsers). Yes, HTML and CSS will be used for the build, but current web standards are not applicable in this process. Since we are going distribute our newsletter via email, we need to concentrate on popular email clients such as Outlook, Yahoo!, Gmail, and Hotmail. So here are few things we need to keep in mind:

  1. All Email Clients Are Different
    Well, all email clients render HTML and CSS differently. Some support the use of CSS in ("head") and ("body") tags, but some email clients will completely strip out any CSS found in those areas.
  2. Let’s Take It Back A Decade
    While we have been trying to eliminate table structured layouts for the last decade, it’s actually the only effective way to construct newsletters that render consistently across all email clients. While browsers are advancing to adopt new technologies, many email clients aren’t. That is why it is important to use nested tables as structure and to declare space within your designs.
  3. Not All Images Are Created Equal
    Don’t assume images will be visible by default to your subscribers; in most cases email clients will not display images unless you have chosen to download them. Try to minimize the amount of images being used in your newsletter, apply background colors and alternate text as fallbacks, and always include the dimensions for each image. By doing so you will limit the chances of your design blowing up when images fail to load. And remember; don’t apply background images via CSS as they are not supported by email clients.
  4. Just Because It’s Whitespace, Doesn’t Mean It’s Good Space
    Avoid leaving additional whitespace in your code. While most browsers will overlook unnecessary white-space, some email clients will not. It can end up being the result of some weird spacing found above or below specific elements.
  5. When It Comes To CSS, Let’s Stick To The Basics
    Refrain from using shorthand and advanced CSS when styling attributes; some email clients don’t support them. Stick to writing traditional, longhand styles to ensure the best results possible.
  6. Don’t Color That Body
    If you are looking to have a background color in your newsletter, applying it to the body is not going to work. Add an additional table around your newsletter, set the width to 100%, and add an inline style for bgcolor to that table. It’ll work every time!
  7. Web Safe Fonts
    Custom fonts or using (“@font-face:”) will not work in all major email clients. Therefore we are kind of restricted to using web-safe fonts, unless you make them into images.

A Deeper Look Into Popular Email Clients

I have compiled a section which covers 3 major email clients. Each one breaks down a few impactful issues you will encounter (with some screenshots) when developing a newsletter with that email client.

Outlook Mail

Unlike browsers, which are progressing with new technologies, Outlook has gone back a few steps. Yes, you heard me correctly. In 2007, Outlook switched their rendering engine from Internet Explorer to Microsoft Word (hence all the complications we come across). Here are a few:

  1. Outlook doesn’t support the CSS style (margin) which would be used to center the block element. It ignores this style found in the ("head") tag; the same applies for a style block within the ("body") tag. The work-around here is to use it as an inline style on the main table or block element, then aligning that to center. I have provided an example below which points out the CSS that works with Outlook and the CSS not supported:
  2. Keep in mind that Outlook also doesn’t support the CSS float property, so just like the example above you can use (align) for left or right placement.
  3. Outlook does not show images upon first view of the email. Users must click “Download images” in order to display all the images in that newsletter.
  4. Percentage widths (%) on table cells are not respected, so use pixels (px) to declare the width on each cell.
  5. Outlook ignores line-height on line-level elements such as the ("span") tag. However, line-height is supported on block-level elements such as table columns, divs, and paragraph tags. Line-height can be specified by length (px), number (1.25), or by percentage (%). Outlook 2007 will only render line-heights based off of a (px) value, as long as it is greater than or equal to the font size.
  6. Inline styles such as padding and margins are not respected all the time. To ensure this doesn’t affect the layout of your design, use nested tables (rows/columns) as placeholders for space. Yes, it’s annoying but it will save you a lot of time in the long run.

Yahoo! Mail

Yahoo is definitely one of the better email clients, as it supports many current renderings like most web browsers. Again, it is an email client and not a browser, so there are still weird issues that take place. Here are a few I have come across:

  1. Yahoo! does not respect height attributes when declaring specific heights in the CSS found in the ("head") or style blocks within the ("body") tag. Therefore we resort to inline styles again.
  2. Note, ALL IMAGES need an inline style of (“display: block”) in order to fix an issue of additional space found around images. As you can see in the example below, this space can be found above or below the images and is usually a 5 to 10 pixel gap:
  3. Older versions of Yahoo! use a default styling for all ("a") tags within emails, therefore overriding your styles when provided. However, there is a work-around where you can declare the font (“color: #000000;”) both inline on the ("a") tag and on an additional ("span") tag wrapping the content. Please view the example below for a reference:

Google Gmail

Out of the three email clients I have listed, this has to be the worst one. The main reason we are forced to use inline styles is because Gmail strips out all CSS found (but will respect inline styles).

  1. Any CSS found within the ("head") tag and style blocks following the ("body") tag will be stripped out or ignored, which will result in one messy newsletter. Inline, inline, inline!
  2. Like Yahoo! all images need an inline style of (“display: block”) in order to fix the additional space found around images. Here is an example of the additional space issue as well as Gmail stripping out the CSS (but respecting inline styles):

Now that we have reviewed and brought these issues to the table, I hope this post will be beneficial to you when designing or building your next newsletter. The most important thing to realize is that your audience will vary with the email clients they use, so testing is critical. While the support in email clients is progressing slowly, there still seems to be continual change. Therefore, a flawless newsletter that you had developed 6 months ago might eventually blow up for no apparent reason. Again, the safest thing to do is keep on testing, testing, and more testing. Good luck!