In this day and age where all we do is move forward, it’s hard to believe that the HTML code used in email is still in the dark-ages. As a designer or developer of HTML emails it’s hard to comprehend that it’s important to often take a step back to create something which will work correctly every time. 

When we look at HTML based emails as a whole we will see that we are essentially still using old technology with some new tricks incorporated to keep the masses happy. To explain this I will need to first discuss some of the best practices in email coding:

Tables

  • Yes to some this word is their bane of existence, but to others it’s a well-known time-honoured way of making sure things display in their right full order. For any new agers or even junior (fresh) designers this is a very difficult concept to grasp as the control is a lot more involved and does not allow for a ‘one-change-fits-all’ approach as CSS offers in standard web coding.
  • This is however the only way to make sure that your emails render correctly every time, no matter what the email client is (Lotus Notes excluded). Nested tables, or the method of using tables in tables (sometimes to the 10th degree) is still a very tricky method of placing content and is relatively high risk due to its complexity and the amount of areas needed to be changed should you need to edit one section.

No CSS

  • Whilst the world is slowly starting to accept and change over to HTML5 and CSS3, and to a degree starting to ignore the horror which is Internet Explorer 6, email has in many ways not progressed to these features; due to technical limitations of email clients as well as the fact that emails cannot really call on external files and commands to display content. The use of very few CSS tags has purely been implemented into best practice guides as some email clients need them to render emails correctly.
  • A good example of this would be Gmail’s ability to strip thetag of its attributes and thus a simple thing like an email’s background colour or image would be removed. So to circumvent this we would use carefully selected CSS attributes in the HTML itself.

No Background Image

  • One of the most frequent queries/complaints I get from clients is that they are restricted in their design due to the fact that best practice does not recommend the use of background images. This is purely because some email clients such as Outlook 2007 and 2010 do not allow background images on sections or tables. A restriction of this magnitude forces some clients to either use an image with the text on it or tone down on the creativity.
  • Designers and Developers need to be aware of this before starting work on email creative – to find aesthetically pleasing solutions which work across all email clients and thus gives all the third party viewers the same experience. Knowing and planning for this will also allow you to plan your text to image in more detail as this can affect deliverability.