With this post I'm going to start a new series called "e-mail analysis case studies". As the name suggests, from time to time I will analyze several aspects of real marketing emails or newsletters I receive that have interesting points or lessons to learn, in the right or in the wrong way. That means that we are going to see several good samples of good email pieces and several samples that reveal bad practices and things to avoid when sending email. I hope that you will find it interesting and hopefully all of us can learn something.
In this first post I'm going to talk about an email I received a few days ago in my GMail account. It was a marketing e-mail from HTC, the mobile device maker, which invited me to take a free test of their new online mail push service called HTCmail.
In the following picture you can see the contents of this email rendered in GMail with images enabled (sorry, the text is in Spanish, but that's not the point here):
Click image to enlarge
Not too bad. But, what happens when you not allow images to be displayed (which is the default case). Let's take a look:
Click image to enlarge
This reveals a good design done by the HTC marketing team. As you can appreciate, you still can read the whole contents perfectly, and the whole original message gets delivered to the recipient even though images are not displayed. Even the text in the header image is correctly displayed here. The "trick" in this particular case is that they have included the same text that is in the image inside the ALT tag of the <img> HTML label. In this way, when the image is not displayed this alternative text gests displayed instead in some e-mail clients like GMail (take a look at this article from Campaign Monitor for a list of email client behavior regarding the ALT tag).
However they have included the height of the header graphic in the <img> label too, which is not a good idea because it's a quite tall one. If the email client doesn't display the ALT tag, this leads to a 250 pixel-height blank area in the vast majority of the email clients in the market, and moves the main message almost below the fold, so a lot of people will not see it and maybe delete it immediately. In GMail that doesn't happen because it strips out totally the images when they are not allowed, and upon that it supports the ALT tag, that is the best of the situations for this particular content (not so good in other circumstances as we are going to see in the future).
The rest of the email is well distributed and with clean HTML (using tables not divs, a good practice in HTML email design) so that the message is displayed even in the less capable of the email clients. The only small thing to notice is that they forgot to translate the ALT tag for the sidebar image that reads "Aspectos destacados" in the Spanish graphic but is displayed as "Key features" (in English) in the no-images version. This is very usual in companies that make international marketing, and it's something that you must be careful about.
The rest of the email is apparently well displayed: it shows a few graphics and a shadowed border in the features sidebar with rounded corners too. However the small "arrows" you can see in the corners of the main content area reveal that something is not totally good here. And the dark gray "powered by" rectangle and the strange discontinued green bar in the left of the features are clues about something not working there.
Let's take a look to the original HTML contents displayed in a fully fledged Internet browser:
Click image to enlarge
As we expected there were problems with the correct displaying of the e-mail in GMail. First there is the lack of a grey background when displayed. The problem here is that they have used the "background" tag in the <body> HTML label:
<body bgcolor="#6a6a6a"...
This affects the lower part of the content and is the reason that the "powered by" graphic is quite like hanging there, with an ugly effect. In fact they were lucky here because they used a slightly lighter grey for the text that is even visible with the default white background. If they had used a white text in order to contrast more with the dark background the effect will have been that no text will be shown.
What they should have done is to have set the background in a external 1x1 table that contained the rest of the content. Generally the <body> tag and everything outside it is stripped by the email client before displaying the contents, so the background color is lost. In this case they included several embedded CSS styles in the header of the HTML page which were stripped out too and are not generally accepted or displayed by many of the email clients.
Analyzing the raw contents of the e-mail they included the whole HTML code between the <html> and </html> tags, which is not generally a good idea. They also included a text version of the email in order to render it on mobile devices (this is a good practice).
Summing up: the email structure and HTML are well designed and fairly well implemented, although they have failed in a couple of basic points that led to a not optimal behavior of the contents.
My score for this e-mail will be 7 out of 10 :-)