Don’t make me use Tables: 5 Points on creating Email Templates

Coming from a development background, with a lot of experience in HTML and CSS, I was recently asked to create the new templates for Akendi’s training emails and I relished the opportunity.

My experience with writing HTML and CSS, the creative brief for the emails and the designs from the Visual Design team looked like no problem to implement. Normally I use Google Chrome as my browser of choice, especially for doing web design as it uses the “purest” version of HTML and CSS, without applying any of its own styling to control. So off I went, and within a day I had reproduced the email templates and they functioned and looked perfect when compared to the creative brief when viewed in Google Chrome. I wasn’t using any real fancy CSS or using LESS or any pseudo elements to adjust the styling, but just the usual layout using floats, absolute positioning, etc.

Having reviewed the results with the Visual Design team and the Training coordinators, I was confident that I had reached my goal. Job done!

Oh how wrong I was!

You see, to write an email template you have to forget every HTML rule that you have learned as a front-end web developer. Here’s why:

Tables are Back!

In my previous job, one of my biggest pet-hates was the use of border-less tables to position elements on a page. It’s non-compliant for one thing, and just lazy for another. Tables are for tabular data and that should be their single use. But no, in email templates, tables are the only way you can get layouts in email templates to work.

Forget Using External Style Sheets, Even for Fonts

Email clients are notorious for filtering out any linked style sheets and images that aren’t directly included in the HTML template. So if you want to put a corporate font into an email, that won’t necessarily be installed on the recipient’s machines, then forget it. It just won’t work with the most common email clients.

Positioning Instantly Becomes Harder

As we have to use tables for the layout, all of the content will then end up inside a table cell. And in normal HTML table cells and rows don’t respond in the expected ways to positioning rules and styles that could otherwise be applied. This includes using absolute positioning to place logos and images on the page.

The Number of Email Clients is Way Higher than the Number of Browsers

The most common web browsers can be counted on one hand. There’s Google Chrome, Internet Explorer, Safari, Firefox and Opera and that’s pretty much it for the majority of your consumers. However, there are greater numbers of email clients that are desktop and web-based, and all of these clients have their own individual quirks that affect how emails present. So the job of creating a consistent template becomes a lot harder.

Email Templates HAVE to be Responsive

As more and more people check their emails on their phones and tablets, rather than using the desktop or web-based clients, responsive HTML and CSS are crucial. So the task instantly takes that little bit longer.

Conclusion

How did I get round this? I had to go back to the very basics of the design and communicate with the Visual Design team the limitations of writing email templates.

Also, there are a couple of online tools out there that make it a lot easier to test your email templates and how they will present on numerous email clients. I used emailonacid.com, which provides an image preview of how each email client would see the email.

Lastly, make sure that you keep referring back to the W3C HTML Compliance checker, which allows you to either upload HTML files or dump copy text into their web based editor. There’s no need to give email clients more reason to complain about your HTML.