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:

Palm Pre doesn't support HTML email

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

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

Mobile Email Rendering

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	BlackBerrys & Treos	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