I send email for a living

Expect BlackBerry OS 6 to follow Email Standards!

2010-08-09T15:59:00.002-06:00

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

2010-05-19T16:43:00.003-06:00

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?

2010-01-28T16:12:00.000-07:00

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.

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.
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.
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?
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.
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

2010-01-21T13:46:00.003-07:00

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

2009-08-14T10:31:00.002-06:00

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

2009-07-24T11:30:00.002-06:00

I've added a second, handy chart

Email Standards Support

CSS Selectors	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

2009-07-24T10:12:00.002-06:00

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:

Official Gmail Blog: Unsubscribing made easy

2009-07-23T16:49:00.001-06:00

Gmail's update: Official Gmail Blog: Unsubscribing made easy was poorly reported by Tech Crunch. Gmail is addressing a few issues with this feature:

Reducing spam by making it easier for people to get off of mailing lists.
Reducing false positives by making it easier for legitimate mailers to get annoyed subscribers off their lists.
BREAKING THE CYCLE of irritated subscribers of legitimate lists creating false positives in Gmail's spam filter but not being removed from senders' lists. As a result, the next newsletter is still likely to be sent to the irritated subscriber.

I don't think Mr. Schonfled is aware how much power Gmail users have when they flag email as spam. He's also making the assumption that what is spam to him is spam to me and you. This is simply not the case. A vocal minority who decide your favorite newsletter is spam can prevent that newsletter from getting through to you. If enough Gmail users flag email from a sender as spam, Gmail can use that information to:

Block the sending ip address.
Report the ip address to a blacklist.
Move other like messages in other Gmail users' accounts to their spam folder
Feedback to the sender

Gmail will do any or all of these things based on the ingenious logic of Mr. Taylor and his team.

As much as we hate spam, we are also frustrated when email we want doesn't get through to us. Gmail is refining its tools to help keep the bad stuff out and the good stuff in. I like the move. We're going to add List-Unsubscribe to our headers in the near future as a result of Gmail's move.

Palm Pre doesn't support HTML email

2009-07-03T11:22:00.002-06:00

This is disappointing from such a promising device. The Palm Pre doesn't support HTML at all. Sadly, the Pre chooses to render a text-ish. version of the HTML version of the email rather than displaying the Text Only version of the multipart ACID test email.
Thanks to Jonathan I. Ezor for the screen shots!

Mobile Email Rendering iPhone 3.0 update

2009-07-02T10:29:00.006-06:00

Quick notes for designers. The iphone gives users a preview of the first 70 or so characters of text of the email.

When viewed vertically, the viewable area of the email is: 320 pixels wide x 372 pixels high

When viewed horizontally, the viewable area of the email is: 480 pixels wide x 236 pixels high

In both cases, users can zoom to the the width of a div or td within the content.

Interestingly, the h1, h2 & h3 tags seem to have been reduced in size while the p tags have not.

Floats seem to be the only thing that doesn't work properly.

Check out the whole collection on Flickr

"Legitimate list rental companies don't turn over the e-mail addresses to the sender -- ever." - Jeanne Jennings

2009-01-12T11:44:00.004-07:00

Thank you Jeanne Jennings for writing that line in your article. E-mail List Rentals: Red Flags and Results! Too many marketers don't understand this. Ironically, as I was reading this article, I took an angry customer support call from a woman who we wouldn't allow to use a list that she bought at a trade show. I think that underscores the need for Jeanne's article.

Adobe's weird colour issues

2008-12-12T10:31:00.003-07:00

This is an issue that has driven me nuts when I've received creative from designers who've used Photoshop, Illustrator or InDesign for mailouts. There are wacky colour settings in the Adobe products that I could not find that make it nearly impossible to accurately output them for the web. The exception among Adobe's products is the old Macromedia product Fireworks. (I happen to LOVE Fireworks for web imagery) At any rate, a very fine gentleman named Dave has done a very detailed exploration into the problem and offers very useful tips. The discussion in the comments is equally awesome.

Check out The Mysterious “Save For Web” Color Shift.

Props to my man Justin for finding this treasure.

Mobile Email Rendering

2008-12-02T15:16:00.006-07:00

Creating beautiful email in this day and age of paltry standards for rendering HTML email is an enormous challenge. With the growth of “Smart Phones” Email designers are now finding the challenge is becoming even greater as a whole new set of email clients and screen resolutions are thrown into the mix. I decided to do the Email Standards’ Acid Test with as many mobile devices as I could get my hands on. Note: If you have a mobile device that I should include in these results, send yourself the Acid Test and then email me photos of the results. In fact, if you can take a better photo (or screen capture) of the devices I've posted, send me those too.

I sent the acid test to: a BlackBerry Bold, a BlackBerry Curve, a BlackBerry Pearl, an iPod Touch running the iPhone 2.1 Software Upgrade, an iPhone running 2.2 Software Upgrade, a Treo running Palm OS and a Treo running Windows. Then I took some rather blurry photos with my webcam as well as some lovely screen caps. They are displayed for you below. Finally, I've provided a chart of desired CSS Selectors and some quick thoughts on how to optimize HTML emails for the mobile user.

For your reference, this is HTML version of the Acid Test

BlackBerry 9000 Bold version

The Bold is the best of the BlackBerrys I tested. It doesn't support much in terms of the HTML & CSS but what it does support makes for a decipherable email.

BlackBerry 8320 Curve version

Don't be fooled. This is not the text-only version of the email that you are viewing. Inexplicably, the Curve (and many others to follow) convert the HTML version of this multipart email to a text-only version. I say that it's inexplicable because there is a plain text version included with this email. Why not display that?

BlackBerry 8130 Pearl version

The Pearl appears to have the same email client as the curve. The only difference between the two is the smaller screen. This was my phone until just recently.

iPhone /iPod Touch – Software Upgrade 2.1

It's hard not to notice how the iPhone/iPod Touch stands out from the others. Wow. You have to respect Apple for being so far ahead of the field on this one. Now for the nit-picky assessment. You'll notice the background style list image didn't seem to work. I'm not sure why. The positioned background image didn't show either but the x-repeating background image at the top worked just fine. Hmm. Someone smarter than me will have to figure out why.

iPhone /iPod Touch – Software Upgrade 2.2

They tinkered with the email client in this update to better enable users to view the text in HTML emails (particularly those of the table layout variety). You'll notice the text is larger. Strangely though, the float didn't work. It's hard to say whether it's because it wasn't supported or because the resizing of the photo messed up the widths too much and this was the result. Another anomaly, the x-repeating background at the top no longer spans the full width of the page. Pourquoi?

Palm Treo – Palm OS

Palm has taken the same confusing approach of BlackBerry and converted the HTML to plain text. An unfortunate, wasted effort since this email was a multipart email that already had a text version.

Palm Treo – Windows

I've never been so delighted to see a text-only email. Windows didn't waste their time. They've chosen to display the text-only version of this multipart email. Kudos to Microsoft on this one. They resisted the temptation of using Word as a rendering engine and went plain text all the way... and properly! It's been a while since I saw an email client choose plain text over butchered HTML and I have to say it's a relief!

The results:

The Acid Test was designed for measuring CSS compliance. Sadly, a few of these email clients don’t even measure up for HTML compliance. There is some hope though. Apple is doing a great job of both supporting email standards and selling iPhones. They are the benchmark for user experience that all other smartphones are being measured against. My hope is that this pressure will result in better adoption of email standards across the board.

The chart

CSS Selectors	iPhone 2.1	iPhone 2.2
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

Recommendations for email designers:

Keep the fixed width emails narrow. I personally had been creeping up on my widths for newsletter templates from 600 pixels a few years back to 620 to 700 pixels more recently.Ill be heading back toward 600 or less as much as possible. Apple is doing some interesting things to enable iPhone/iPod Touch users to increase the font size of table layout emails but despite their efforts wide, two-column layouts are tricky to read. If it is worth the time and effort, you can consider adding an XHTML Mobile Profile landing page for your email and putting a "Mobile Version" link to it right at the top of your email.

Recommendations for the engineers building mobile email apps:

Support email standards and allow your users the ability to increase font size. By supporting email standards, you can also give your users the option of viewing styles disabled. That’s seems like a much simpler and more reliable way of presenting HTML email than creating your own special way of displaying HTML. However, if you choose not support HTML email at all... please, please, please display the text-only versions of multipart messages instead of the code of an HTML email. Nobody wants to sift through a bunch of HTML to try and decipher a message.

Thanks to my friends at Oomph Events and Yellow Pencil for their help with all these mobile email clients.

Recommendation for consumers buying mobile devices?

If rendering CSS layout HTML email is the most important criterion for choosing your mobile device, an iPhone with Software Update 2.1 is your top choice. I did the upgrade though...

That's all I have for now. I hope this sparks some discussion.

If you haven't already, check out the