Expect BlackBerry OS 6 to follow Email Standards!

Check it out. This is a big deal for email designers whose recipients are corporate clients: Confirmation that BlackBerry OS 6 will use webkit to render html email! (see the reply to my comment). I'll be more excited when I see it with my own eyes (maybe someone should send me a BlackBerry to test - hint, hint) but this is exciting news. As mobile email continues to proliferate, Outlook may no longer dictate Table layouts to the world. Unless maybe Windows 7 Mobile also uses Word to render HTML email... ...or maybe we won't have to worry about that.

Google Font API - not supported by Gmail

This was a fun experiment. I sent this email to my Litmus account. Here are the results. It seemed to cause Litmus some trouble but from what worked, there were some very interesting results. Outlook 2000 worked just fine but none of the others did. Lotus Notes 8 rendered it fine. Thunderbird 2 did not render the "Reenie Beanie" font. This is the first time I've ever seen Thunderbird fail. The ironic thing to me is that Gmail has no way of supporting their own funky new API until they support linked stylesheets. Let that be another prod in the ribs of the Gmail team to support Email Standards.

I want an email newsletter. Can you send me samples?

People ask me this all the time. My response is always to redirect the conversation to help guide them to a healthy starting point for designing their email newsletter.

Here are the tried and true steps to designing a great email newsletter …in chronological order.

1. Define the goals of your newsletter. Remember, these shouldn’t be your goals but your subscribers’ goals. What is it that they want out of these emails? Defining your goals helps clarify the content (writing and imagery) that you need to be creating to populate your newsletter going forward.
2. Categorize and prioritize your content.  Should your newsletter be focused on one topic or article? Is one article or image more important than the rest? Do you have event calendars to share? Do you have lots of articles that should be grouped into logical categories? When you have a clear idea of the kind, quantity and relative importance of your content, the design decisions for laying out your newsletter become obvious.
3. Define your identity. Who is sending the newsletter? Is it a person, an organization or a person from an organization? Should the newsletter have a name that will help subscribers identify it?
4. Create graphical mockups of your newsletter. It is at this point that samples of other e-newsletters become helpful. You can start looking for examples of how others with similar goals and content have laid out their newsletter and you won’t fall in love with design elements that don’t fit your identity. Creating mockups of an email can be tricky. In the process, you need to optimize for small screens and preview panes and you should cater to the subscribers who will skim your newsletter as opposed to the minority who will read every word. The mockups will likely be proofed in large windows or on paper. Either scenario is not a good representation of the inboxes the final product will appear in. I good trick if you are proofing an email on paper is to fold the paper in half.
5. Code your templates. For web designers, this is where they get to party like it’s 1999. That’s probably the last time they built anything in a Table Layout (as opposed to a CSS Layout). Notice, I said templates. Don’t forget your text only versions. Every good e-newsletter is a multipart email meaning there is an HTML and Text Only version contained in the same email. The Text Only version is a bit of a vestigial limb but it is necessary for many spam filters. Also, it gives you the capability of offering your subscribers a Text Only option when they subscribe. There is a tiny (but vociferous) minority of people who do prefer this.

Good luck!

Creating Mockups for HTML Email Templates

The quick and dirty:

• Keep it within 600 pixels wide
• Make sure the email will make sense to the recipient BEFORE they download the images. (i.e. keep images small and don’t use them in place of text)
• Make sure there is CONTENT (not just mastheads and images) in the first 300 pixels vertically
• Every email must have an unsubscribe link in an obvious location (at the top, bottom or both)
• Every email must have a physical address (not a P.O. Box) of the sender. Companies in the UK must also include their “Registered in England number”
• Dark backgrounds are generally a bad idea.

At Mailout Interactive, we design our customers’ email templates in two steps. First we create a graphical mockup of the template. Then, once the design and layout are approved, we build the template. (Note: The Text Only version of the email template is generally an afterthought for clients. As a result, we generally find it useful to wait until the HTML email is created before introducing the Text Only version to our clients). The mockup is designed to the “Best Case Scenario” where images load, css is applied and web standards are adhered to. This isn’t the way the email will render in everyone’s mail client but it’s the best that can be done.

Designing for email is difficult. There are no well-accepted standards that are applied to how an email will display. As a result, designers must consider several factors when creating a message. These factors include: Preview Panes, Image Blocking, Web Fonts, and Unsubscribe / Privacy / Legislative Requirements. There are different types of mailouts and each has its own unique qualities and best practices. The most common that we see are Newsletters, Announcements, Invitations, and Promotions. Each of these types has it’s own common elements and challenges.

Preview Panes

2005 statistics showed that 69% of business to business email users read their email in the “Preview Pane” of their email program. This feature is increasingly becoming available on web mail services as well (i.e. Windows Live). There are two varieties of preview pane that designers must contend with, vertical and horizontal.

Vertical preview panes require that the width of an email be narrow 550 – 640 pixels is optimal. There are situations when you can have greater widths such as when recipients are high tech business users. However, this is the exception rather than the rule.

Horizontal preview panes make for a short area with which to get your point across. This is challenging for designers who are accustomed to web pages or printed communications. In both of those media, the masthead can be very large and the message and/or call to action is generally in the center of the page. If an email that is designed with a large masthead and content in the middle of the page, the recipient is unlikely to understand the message. All they will see is the branding. It is important to ensure that at least some of the content of the message appears within the first 300 vertical pixels of an email. If the mailout is a newsletter, it’s a good practice to give the reader an “In this issue” index that gives the reader indication and navigation to what lies below (and outside of the preview).

Image Blocking

It’s tempting to design an email as a single graphic. To do so would give the designer complete control of the creative. Sadly, this approach just doesn’t work. Many (and possibly most) email programs initially block images in emails. As a result, many of your recipients see grayed out boxes or blank spaces where your lovely images appear. For the email designer, this means that the verbiage or copy of an email ought to be in text as opposed to being part of a graphic. This limits the choices of fonts available for your copy to the typical web fonts. These fonts include: Times, Times New Roman, Georgia, Arial, Verdana, Helvetica, Trebuchet MS, Tahoma and Lucida Sans. Don’t count to heavily on any of these though. In some extreme cases, email clients will override your fonts with their own.

Mailout elements that should not be images include:

• Unsubscribe links
• Privacy Policy Links
• Article titles
• Body copy
• “If you are having trouble viewing this properly” text
• CAN-SPAM address (physical address) and/or Registered in England number

Unsubscribe / Privacy / Legislative Requirements

Unsubscribe - Unless your mailout is an internal mailing, you need to include an unsubscribe link. In many countries it’s the law. In cyberspace, you’re asking for BIG TROUBLE without it. As a our customer, we require it.

Privacy Policy – This is never a bad idea. Why not set your subscribers at ease? If your organization has a posted privacy policy, you should link to if from your mailouts.

Legislative Requirements – In addition to the unsubscribe link the two big legislative requirements come from the U.S. and the U.K. The United States requires you to put a physical address (NOT a P.O. Box) on your mailouts. The U.K. requires Registered in England numbers from those who are registered there. Although your recipients may not be located in one of these countries, it is entirely likely that their email box physically resides there.

Rich Media (i.e. Flash, DHTML, Javascript, etc.)

Forget it. The best you can hope for is to use the “Sliding Doors” image rollover technique for some email clients. Everything else doesn’t really work and will result in broken or blocked mailouts.

Update for Pre

It seems I was a bit hasty in my condemnation of the Pre's rendering. Dave at Campaign Monitor tells me,

"...we ended up getting good CSS results for the pre, it's only when syncing from Exchange that it converts to a simple text version. Will write more on this in the coming weeks (when I get a chance)."

Looking forward to it. Thanks Dave!

Email Standards Support Chart - Update

I've added a second, handy chart

Email Standards Support

CSS Selectors	BlackBerrys & Treos	iPhone 2.1	iPhone 2.2 & 3.0
Background-image
Background-position
Background-position a:hover
Border
Color/background-color
Descendant-selectors		?	?
Float/clear
Font family/size/weight/style
Font-family names with quotes
Font inheritance
Line-height
List-style-image
Margin
Padding
Varying link-colors
Width/height

HTML 1993 Support (HTML 1.0)

	iPhones	BlackBerry Bold & Android	Every other smart phone
HTML 1.0

Android hits the same low bar of the Blackberry Bold

Following CSS support in mobile email clients is getting discouraging. At least with Android Google has chosen to display the email as unstyled HTML similar to the BlackBerry Bold. This trend to support basic HTML instead of reproducing the HTML as a nasty looking text email (å la Palm Pre and most BlackBerrys) at least gives senders some comfort that their CSS layout emails may some day degrade nicely and predictably for mobile devices. If only Microsoft would Fix Outlook so we could use CSS layouts again...

At any rate, Android's lack of CSS support is a disappointing start but their HTML 1.0 support at least leaves us with hope for the future. Here's what it looks like: