Why Can't I Create Perfect Email Layouts?

Many clients come to me asking why they can't see certain features: such as a custom font or a floating image in their email. The quick answer is that email clients, the app or page that reads your email, do not provide that support. So regardless of how skilled a developer is or what code they write, most of it is ignored by the email client and only a limited amount of information is rendered.

What does that all mean? Let's get into the details

Web Coding Standards

When it comes to programming languages, and in this case web programming languages, there are 2 aspects to them. There are usually two parties involved, the reader and the writer. The writer is a developer or a program that writes code. The reader is the program that reads the code. The web browser is the code reader and web developers, and now many people and programmers write code for the browsers to read.

The reader, in our case either a web browser or an email app, must be programmed to read the code and take a specific action based on those instructions. In the web browser world, all browser makers, including Mozilla, Microsoft, Apple, and Google created a W3 Consortium. They defined W3 standards, and they agreed that when code writers provide a set of instructions, they agree to interpret them in the same way. Because of that, web developers can write only one set of intructions and they will be interpreted nearly identically in all web browsers.

Email and Web Standards

When it comes to email clients, the code readers do not have a common set of rules that they abide by. Each email client (Gmail, Outlook, Ymail, iCloud Mail, etc) has its own set of rules and decided which instructions it will read and which ones it will discard. For security and other reasons, email clients interpret only a narrow range of instructions that work in the web browsers. And that is why what one can do easily in a web page can be hard at times impossible to do in the email. To make things worse, each email provider behaves in their own specific way that is very different from others.

Limitations of Email Clients

Here is a quick list of things that are very hard to do consistently and predictable in all email clients.

  • Create complex multi-column layouts that will wrap nicely on mobile devices
  • Create color schemes for light and dark modes
  • Use custom fonts and expect all users to see them
  • Use vector graphics

Limitations of Email Sending Software

In addition to the email clients, the software that reads the email, the software that sends the email can also add additional code into the final email. The examples of software that sends email on big scale are MailChimp, Vertical Response, or any other CRM that offers that capability. Email clients such as Thunderbird, Outlook, Gmail, and YMail are also the senders. Most software that sends email will likely add their own code into the email body that cannot be seen or edited by a developer. This adds additional challenge. What can be done with one email sender may not be possible with another due to such limitations.

Finding the Middle Ground

Given all the limitations, it almost sounds that creating anything decent with the email is impossible. Luckily, that's not the case. The developers who have worked with email learn the unspoken rules of each email client through trial and error. Many wonderful developers and companies have shared their knowledge publically. All this creates the room for some middle ground.

Here are the common rules for HTML email engagement:

  • Do not expect the same features as you do with the web
  • Create simple one-column email layouts that will look good on small and large screens
  • Check if your email sending software can be customized in some way to give your developers a bit more control over the code
  • Test your email across all email clients to see if your feature works within expectations in all used email clients
  • Learn more about your audience and what email clients your customers may be using (this is not easy to do), focus on improving the aesthetics of your email in those email clients first

Personal Experience and Opinions

I have worked with various email senders, including Luminate Online Email, MailChimp, Solutions Reach, and others. I found that each software has the limitations, but at the same time one could craft professional and elegant email with each one of them as well as long as the rules of the compromise are followed.

Additional Resources