Have you ever wondered why some email newsletter look very poor? It is unlikely they were designed to look like this. They look poor because of the differences in the way different email clients show the styling used within HTML emails.
These differences can make huge differences to appearance and they make coding effective HTML newsletters very difficult for those not familiar with HTML style elements. This article looks at some of the major differences.
Basic layout is one of the most important things, yet Outlook 2007 and Lotus Notes (pre version 
do not support ‘floats’, which are often used to layout elements in a modern website. This can give some nasty surprises in layout.
Those with more HTML email coding experience are aware you should forget about modern webs design and code the HTML email using outdated table design. But how many are aware that support for styling within the basic table elements varies between email clients? The border-collapse style (very important for spacing out an email nicely) is not supported in Yahoo classic. If you use Yahoo and ever wondered why your emails looked strange this is a key culprit. Border spacing is completely variable with bout half email clients supporting it and half not. All flavours of Outlook and Lotus notes ignore this one along with AOL and Hotmail, but Yahoo allows this one to be used.
Treatment of empty cells in a table is another inconsistent minefield, but generally the more business like email clients do not allow this but the webmail type clients do.
What about the positioning of text within a table? Do you want it at the top or in the middle? Or maybe varying depending on how you view the email? The latter is easy to do as the vertical align style is treated differently with Outlook2007 being inconsistent with the rest.
Is styling the text any easier? The good news is that the colour of the text is treated the same in all commonly used email clients. But there is a string in the tail. The background colour is not treated the same! In this case it is Lotus Notes and Hotmail that are different.
Many people try using a background images, and this was popular a few years ago with outlook 2003, AOL, Yahoo and Apple all supporting this. But then Outlook 2007 arrived and this does not support this feature so the difficulties grew.
Designing HTML emails to generate response
There are many articles about designing websites as a marketing tool to actually generate business leads or sales rather than simply looking nice. And many business owners do now consider how well their website works at marketing rather than just how attractive it looks as an artistic piece of work.
But when it comes to emailer design, the same thought to designing for conversion is rarely done. The majority of email newsletters which arrive in our inboxes have not been visually designed with the purpose of getting a response. They have been designed primarily as an artistic exercise in looking good. This makes them far less effective.
Another issue is the number of email newsletter which look very poor in many email clients. This is because they have only been written to work in one or two email clients. It is not widely appreciated just how different every email client is when it comes to showing an email, and this is much greater than the difference between say Internet Explorer 8 and Internet Explorer and Firefox and Safari and other common browsers.
In fact two of the main business email clients, Outlook 2003 and Outlook 2007 render emails very differently, and the other common webmail clients just as Googlemail, Hotmail, Yahoo and many others all show the emails in a different way again. The most problematic is probably Outlook 2007 (and the most common for B2B email addresses). There was a major change between Outlook 2003 and Outlook 2007 in the way the browser generated the email to view; Outlook 2003 was based more on web browsers whilst Outlook 2007 was based more on Word. This then creates major inconsistencies in how an email newsletter looks between different email clients.
Let’s consider the basic styling of an email. A few years ago it seemed sensible to try implementing styles in the header of an email or at least by defining them with a style element. But this will not work even now in Googlemail and Lotus notes, two key email clients.
For those dealing with multiple languages, the support for right to left languages such as Arabic as available in many webmail applications such as Hotmail, Yahoo and Apple mail and was available in Outlook 2003, but is not supported in Outlook 2007 or Google mail. Recent (but not the most recent) versions of Lotus notes did not support many of the font tags so styling the text was very restricted in this popular corporate business product. Continue Reading...