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.
Friday, December 12, 2008
Tuesday, December 2, 2008
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
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 
Subscribe to:
Posts (Atom)
