UK web design print monthly .net magazine (not the framework) has just published their April edition, which contains an opinion piece I wrote for them titled ‘Better HTML emails’. In the piece I explain some of the background to the Email Standards Project, and how designers should be taking note and getting involved.

It’s nothing new for readers of this blog, but we are trying to reach out to a wider audience and every step helps. If you are in the USA (and also other countries), .net magazine is published as Practical Web Design, so check it out. It might be something useful to leave on your designer colleagues’ desk at work.

We’ve collected over 50 photos of people showing just how Gmail makes them feel, when they try do create HTML emails, but we think there are some more great grimaces out there! The deadline is fast approaching, so get your grimaces in by Friday, March 14th and we can start working on the video.

It’s easy to add your own: Join the Flickr group, and add your photo to the pool. There are some spectacular grimaces in their already, but there’s room for more.

This is is the fastest and easiest way you’ll ever get to support the Email Standards Project, so we look forward to seeing your gurning face! Thanks to everyone who has already entered, your support is very much appreciated.

Remember: We’ll take entries up till the end of Friday, March 14th.

The Yahoo! Mail team was not satisfied with their acid test results, even though they only lacked support for a single item on our list. So they went off and remedied the bug and are now in 100% compliance.

When we launched the Email Standards Project we reported that the Yahoo! Mail clients rendered our acid test nearly flawlessly, falling short only on the list-style-image property. Shortly thereafter we announced that Yahoo! responded, not willing to accept a score of less than 100%.

I worked with a member of their development team who claimed their client actually did support this CSS property. We discovered that the issue was not a lack of support for list-style-image, but rather a lack of support for the shorthand list-style. Yahoo! pledged to remedy this shortcoming but didn’t promise any target dates. I therefore assumed it wasn’t a huge priority.

Well, the Yahoo! team again puts their best foot forward and shows us they care about our initiative. They have remedied this bug in both the “classic” and “new” versions of Yahoo! Mail, offering 100% compliance of our acid test. Our hats off to you, Yahoo! Mail.

Note About Longhand Versus Shorthand CSS Properties

As a result of our discovery that longhand and shorthand could render differently in email clients, we thought it would be best to test a longhand-only version of our acid test. As it turns out, we only discovered two differences in rendering:

1. The Yahoo! Mail bug for list-style-image, which is obviously now a thing of the past.
2. Windows Live Hotmail does not support the background property, so background colors are unsupported with shorthand of that property. Whereas within longhand we use background-color, which is supported.

Last year Gmail asked their users to contribute to a collaborative video featuring the Gmail ‘M’. This year they are doing something similar with their story videos. These are pretty cool, a smart idea well executed.

Here at the Email Standards Project we’re not above borrowing a good idea, especially if it could help get some attention from Google! We’re going to put together our own video from photos you guys send in. Here’s the plan:

Project Gmail Grimace

Step 1. Make a face: We want to collect as many as possible head shots of web designers showing the face they make when trying to get their emails to render properly in Gmail. We know that Gmail has a few issues, and we’ve all made some faces out of frustration. So grab a camera, a webcam, a set of crayons or whatever, and capture that moment when you really can’t take it any more.

Step 2. Join the Flickr group: We’ve setup a Flickr group Project Gmail Grimace that is open to all. You should jump over and join the group, all free.

Step 3. Post your photo: Upload your photo to your own Flickr account, and go to the photo’s page. Click the “Send to Group” button between the photo title and the photo. Then choose the “Project Gmail Grimace” group.

That’s it! We’ll start collecting photos and when we have a reasonable number, cut them together somehow and make a nice video message to hopefully attract some attention from the right people at Google. I’m sure that among all you Email Standards Project supporters there is plenty of talent who could help us do that. This is just a fun way to keep the momentum going and make ourselves heard. Everyone can participate – even if you don’t have a Flickr account, send us your photos directly.

Project Gmail Grimace is go!

Some recent tests have lead to a discovery about how Windows Live Hotmail (Hotmail) processes and delivers HTML in emails. Following are the results of my exploration, covering the conversion, delivery and rendering process using our own acid test.

Because webmail isn’t a self-contained application, and can be accessed via most common web browsers, this post discusses cross-browser performance rather than cross-client performance. Specifically because browser performance is the variable in the findings.

The Conversion: HTML-to-ASCII

The first thing Hotmail does is convert all non-number/letter characters in the HTML to hex-formatted ASCII characters. So:

<h1>H1 headline (34px/1em)</h1>

Becomes:
\x3ch1\x3eH1 headline \x2834px\x2f1em\x29\x3c\x2fh1\x3e

And the source code is printed exactly the same (byte-for-byte) irrespective of the browser.

This has an impact on how emails render—not in every browser, just Safari and Microsoft’s own Internet Explorer. Regarding the latter, my guess is that this has something to do with an IE security vulnerability identified in the CVE dictionary, but of course I can’t say for sure. Why Safari doesn’t render the ASCII characters is also a mystery.

The Delivery: JavaScript innerHTML Function

Most popular webmail clients rely heavily on Javascript to print messages into HTML-based GUIs, and Hotmail is no exception. After Hotmail converts the HTML to ASCII characters, it prints the converted markup using the Javascript innerHTML function:

<script>document.getElementById("MsgContainer").innerHTML='[markup here]';</script>

And there is no alternative because scripting must be enabled to even log in to Hotmail.

The Rendering

While the markup prints the same across the board, IE and Safari renders the markup differently. Following are screen shots from Firefox/Netscape (same screenshot), Opera and Safari/IE (same screenshot):

Firefox 2 and Netscape 9

Opera 9

Safari 3 and IE 7

Notice how while Safari/IE do render the HTML in ASCII they do not render the CSS in ASCII. Yet if you view the converted message source you can clearly see that both the HTML and CSS have both been converted the same way. This is what I find especially perplexing.

I had considered that the meta character encoding or DOCTYPE may be different from one browser to the next, but as it turns out Hotmail delivers the same DOCTYPE and encoding across the board. There are some variables with browser-specific classes on the body and even a unique Javascript for Firefox; however, as far as I can tell they simply impact Hotmail design/functionality.

Conclusion

My research concludes that this issue is something which we can neither prepare for or remedy with special markup techniques. If you happen to be someone who understands how to force IE or Safari to render ASCII text, please feel free to share your comments below. In the interim, awareness is the key.

When we first tested Lotus Notes 8 we were using the readily accessible POP/IMAP version of the service. Although we did not know it at the time, there is a very significant difference between that version and Lotus Notes running on Domino Server.

A representative from IBM contacted us very soon after the Email Standards Project site launched to let us know, and we updated the results with a message explaining the version we tested on. We’ve been in conversation with IBM since then, and wanted to keep you all up to date with the situation.

Lotus Notes (Domino Server) vs Lotus Notes (POP/IMAP)

As you can see in these partial screenshots, the Domino server version renders much closer to our Acid Test. IBM tells us that almost 90% of their customers are using Lotus Notes 8 with Domino Server, which use Internet Explorer for HTML email rendering when viewing emails. This is great news! Your subscribers on Notes may be getting a better experience than previously thought.

However, 10% of (a very large number) is still a lot of people, and since there is not any immediate way to know which version any person is using, you can’t necessarily rest easy. IBM tell us that there is internal attention being paid to this issue, and that there is a push on to have the POP version improve support in a future version. There are no promises yet that this will actually happen, but they are listening, and the Email Standards Project has made an impact.

So our thanks to IBM for their responsiveness, and their willingness to be open to discussion on this, even if they are not able to make changes immediately. We look forward to continuing the conversation. Now if we could just find someone from Gmail with the same approach…

From Paul Boag and Headscape in the UK comes the weekly web design podcast, Boagworld. This week Mat Patterson was on the show to talk about the Email Standards Project.

Check out podcast 105 for the full recording and show notes. This is another way of spreading the message of the Email Standards Project to working web designers who may not have heard about it yet. We’d love for all you guys to spread the message yourselves, by mentioning it on your own podcast, or contributing to other people’s blogs or shows.

Thanks also to everyone who blogged about the recent Yahoo! announcement, it is great to keep the buzz going.

I find it truly amazing how responsive the folks at Yahoo! have been to many of the articles/posts I have written. They are actively involved in community discussions and receptive to notes about how things can be improved. This time, they respond to our call for standards-based email clients.

What strikes me profoundly is that while they have been ranked among the best performing email clients (regarding support for web standards) they are still unsatisfied. They want to support 100% of our recommendations, and for that they have my applause. Oh, those over achievers.

We reported that Yahoo! Mail (both New and Classic) supports our entire list sans list-style-image. Brian Goodman of the Yahoo! Mail team contacted us to report that they believed their client did indeed support that property. As we discussed possible variables which might be altering the results on various platforms, etc., we discovered that the problem actually resides with a shortcoming Yahoo! Mail has with CSS shorthand. As it turns out list-style-image is supported while list-style is not.

But most seasoned web designers use shorthand because it saves time and bytes. Especially in the email environment where every byte is valuable. The folks at Yahoo! Mail could have shrugged their shoulders and walked away, satisfied with their level of support. But they decided that support for shorthand is important and are going to do something about it.

I am happy to report that Yahoo! Mail has responded to our call! They are going to dig into their application, find the source of this deficiency and crush it. Yes, folks, with one of their future releases Yahoo! Mail will support 100% of our recommendations. When we see this come to fruition we will report the news, so stay tuned.

Thank you, Yahoo!

When Gmail first launched, and people were selling invitations for it on Ebay, it was easy to see why. A vastly faster and more efficient interface coupled with huge storage made for a really significant step in email via the web.

Web designers and tech heads loved it, and in fact all of our Email Standards Project email is accessed via Gmail. However, in one area Gmail has always lagged behind a little — rendering of CSS in HTML email. Whereas almost every other email client will render (with varying degrees of success) CSS from the head of an HTML document, Gmail strips it out completely.

It’s a confusing situation, because it’s not like you can’t use CSS at all in Gmail, you just have to code it inline. When you do, support is reasonably good, at least for the basics. Without going through the hassle of inline styles, you end up with what you see in our Gmail report, an unstyled page. Sure it degrades well, but it seems an odd distinction to make.

It’s not just us here at ESP that think so. Since the Email Standards Project launched, the Gmail report has been (after the homepage) by far the most popular page on the site. A lot of people are confused about how to get their emails showing up properly in Gmail.

We know that somewhere out there, somebody who has visited this site knows the right person from the Gmail team who can help us to understand why Gmail works the way it does. We have no doubt that it was done for a reason, probably a great, sensible, defensible reason.

All we want to do is start that conversation, to see if there is a way we can help the Gmail team improve the support for web standards without compromising their other requirements. So if you know somebody who could help, or somebody who might know that person – get in touch! We’ll either end up contacting the right person, or Kevin Bacon, so it’s win-win!

Even if you don’t know anyone, you can help the cause by commenting on this Google group asking Google to consider adding better support for CSS and HTML standards, because every voice counts.

Of course, if you are someone from the Gmail team, then we’d love to hear from you directly, because we really are here to be as helpful as possible. Gmail is great, but a Gmail that supported web standards would be even better.

Email Standards Project supporter and talented designer Doug Neiner has answered the call for some Email Standards Project bling with a great t-shirt design.

Great work Doug – I’d wear that for sure! The ‘support the future of email’ is also a good tagline. We’d love to hear what you all think about Doug’s work, so leave a comment below. If you’ve got your own ideas for taglines, shirts, tattoos, or anything else, then let us know.

Grab the logo files from the What you can do page and get cracking. One way or another we will use some of your ideas to promote the Email Standards Project, and we know there is a ton of talent who support what we are trying to do here.

P.S. My contribution to the taglines is “I believe in ESP — the Email Standards Project”. What have you got?