Designing a great looking email is only part of producing successful emails. The finished design needs to be translated into HTML code which will render correctly in the email reading programmes being used by the email’s recipients. This post takes a look a great design let down by its code.

Keeping ones self up to date with best practices is itself a good practice for freelancers, so whenever someone takes the time to put together a great blog post, I appreciate it. Recently I came across a showcase of 50 inspirational email designs, an article which was especially interesting as, not long before, I posted an updated guide to HTML coding for emails.

Scrolling down the designs in the showcase my eye was drawn to one email in particular. It looked great, and it seemed as though the designer must know of some coding techniques for email which were new to me. Happily a link to the HTML version provided the opportunity to examine the code and copy the code in order to carry out a test broadcast. Unhappily, the result of the test broadcast was not good, specifically:

• All the background images are missing (not supported in Microsoft Outlook)
• Some font styles missing (due to the styles being inline but not attached to the closest tag to the text)
• Positioning not working (not supported in Microsoft¬†Outlook)

The image below shows the email as displayed in a browser (left) and as it renders in Outlook (right).

Due to the coding techniques used, the email would most likely not render as entirely as intended in Hotmail either. Yet the person who coded the email did so with care and with skill, the HTML is good. So what has gone wrong? Well, without talking to the person concerned I can’t say for certain. However, it could be that the email was tested in a browser, where it looks fine, and then put to use, or it could also be that the email is simply a coding exercise not intended for use.

While it’s true that an email which renders correctly in email programmes will look correct in a browser, it’s not safe to assume that an email which renders correctly in your favourite browser will render correctly in email programmes.¬†Assuming this is a real email ¬†intended for actual use, there are a number of steps which can be taken to ensure that the email displays as intended:

• Understand which email programmes the recipients of the email are likely to be using
• Understand the limitations of those email programmes, and design and code around those shortcomings
• Take the time to send test emails to addresses which use the programmes in which the email must render correctly (or use a testing service such as Litmus)

Happy coding.

Tags:

• Email design
• HTML
• Tutorial