Thursday, August 28, 2014

Things to remember when creating an HTML email template

Every web developer knows about the kind of problems that can be encountered when supporting multiple browsers, especially older versions of IE. These days things are getting better though, even IE is able to do a half decent job. The world of email clients is another story all together though. The pain of supporting multiple browsers is nothing compared to the nightmare of trying to get your well designed email to render correctly in even a small selection of the hundreds of email clients out there.

Having spent the last few months doing a major overhaul of an application at work I decided it would be a good idea to redesign the email templates being sent from the system to be more in line with it's new layout.

As the emails are only received by members of staff during work I'm in the fortunate position of only needing to support two email clients. However, rather unfortunately the two clients we need to support a rather hideous; Microsoft Outlook and the built-in client used in BlackBerry devices.

There are two types of problems you'll encounter when designing email templates. Firstly email clients tend to lag far behind browsers in terms of HTML and CSS support and secondly there's a lot of weird quirky behaviour in some email clients.

For some strange reason Microsoft uses the same HTML engine used in Word to display HTML emails in Outlook, meaning that Outlook has minimal support for CSS properties. BlackBerry has full support for XHTML 1.0 and partial support for HTML 4 & CSS 2.1. So forget about using anything recent, email templates need to be done the old fashioned way, with tables.

To keep things simple I stuck to using a fairly basic layout using XHTML strict and validating it periodically using the W3C Validator to make sure everything was correct, not that it would make much of a difference, as some email clients (including Outlook 2007 and 2010) strip or ignore your doctype entirely.

Another section that is likely to be striped out is the head along with any style tags. For this reason it's best to use in-line styling on your markup. MailChimp provide a handy CSS Inliner Tool which can help do this once the design is complete.

No comments: