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
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
9 comments:
This is a Blackberry Curve using the Mobile Gmail client.
http://www.google.com/mobile/default/mail.html
It appears they basically use a completely stripped version of the html.
http://farm4.static.flickr.com/3090/3182706010_0e7f75ff4e_o.jpg
It might be worth mentioning that the Blackberry Storm web browser can render even more advanced CSS layouts... it's just that the email portion of the device doesn't support the same rendering features. Odd.
will these be added to the ESP site eventually, do you know?
Patrick H Lauke I'm assuming you mean adding them to the "State of the Clients" list. I don't know if Email Standards will be adding these mobile clients or not. If you pester Matthew Patterson on the Email Standards' blog post (http://www.email-standards.org/blog/entry/mobile-email-clients-put-to-the-test/#comments), you might see them added. The mobile clients are tricky though since there are SOOOO many of them and they are often device specific. It would certainly be good to get the attention of Blackberry and Microsoft for their future development...
When you test Windows Mobile devices, you should note that the type of account makes a huge difference:
* POP3/IMAP4/Hotmail - HTML support.
* Exchange - if you're syncing over the air with Exchange 2003, it will be plain text. ActiveSync (direct computer connection) will show HTML, as will all connections to Exchange 2007.
Hi,
Do you anticipate testing Nokia devices, ofcourse only those that are positioned to be e-mai-ready.
Best regards,
Johan
Director CRM
www.thesedays.com
ActiveLife, I would love to test a Nokia device. I just don't know anyone who has one.
If you have one, please send yourself the acid test and send me the results. I'll be sure to post them.
http://www.email-standards.org/acid-test/
Are you planning on doing an updated version of this test including some of the Android phones and newer Blackberries?
fearnot check out some of my more recent posts like this one:
http://isendemailforaliving.blogspot.com/2009/07/android-hits-same-low-bar-of-blackberry.html
It would be nice to find someone with a Google Nexus One. I'd like to see some screenshots of that!
Post a Comment