The Most Common Email Coding Mistakes and How to Avoid Them

Despite all the bells and whistles of your email, coding mistakes can ruin it completely. Only one incorrectly shortened link or wrong color format — and your email will look wretched, especially if a user decides to check it via a smartphone instead of a web email client or switches to a gadget with a different screen resolution.

In this post, we’ll talk about common HTML email coding mistakes and share some advice on avoiding them.

Where do email display issues come from?

To put it simply, there are two possible reasons a user sees your email outside of the way you’ve planned. The first one is related to the technical characteristics of your user’s device. The second one is the email client, to be more precise — its rendering engine.

Technical characteristics of a user’s device

There are at least two technical characteristics of any device that you should take into account:

1. Screen resolution — the size of the screen, given in pixels. For example, the iPhone X has a screen resolution of 1125×2436 pixels. If your email contains two columns of text, 600 pixels each column, it won’t be displayed correctly.
2. PPI, or pixels per inch — the number of pixels in one inch of the screen. The iPhone X’s PPI is 458. Imagine: you need to add an action button into your email. If the button is less than 44 points, which for iPhone X means 132×132 pixels, it will take less than one-third of a square inch of the screen space, and the user will hardly be able to tap it.

One more thing to keep in mind: users often rotate their mobile devices, so your email should look neat and have full functionality in both portrait and landscape view.

To prevent problems associated with the technical characteristics of the user’s device, you should use a responsive email design.

First, you should add media queries into the head of your email. For example, the @media screen and (max-width: 600px) query means that the email design will be optimized if the screen’s width is less than 600 pixels. If the screen’s width is more than 600 pixels, the user will see the fixed-width version of this email.

Second, you should create an email in the form of a table with cells in it:

 
  

   

    
...
   
  
 

Then, you add style for each cell, for example:

However, even having taken these measures, you can still have problems with displaying your emails. The source of the problem is the email client’s rendering engine.

An email client

The second source of possible display problems is the email client your recipients use to open your campaigns. The core part of an email client is a rendering engine. It receives an email as a long script of code, processes it, and outputs in the way we’re used to receiving emails: comprehensible, structured, and formatted text with images, links, and other media.

Take a look at the example below. It’s a piece of code from a promotional email — as the rendering engine of Gmail sees it. If this email was displayed like that to a potential customer, they will hardly cut through the code and understand that there is a promo code for 40% off.

Each email client has its own rendering engine, which means that the same email, opened via different email clients, can have a totally different appearance.

Here is a list of the most popular email clients worldwide. Obviously, your recipients use one or even a bunch of them to open the emails you send.

All of these email clients have some peculiarities that you should take into account when HTML email coding.

For example, Apple Mail for iOS doesn’t support:

• inline-size CSS property;
• @media (orientation)media query;
• anchor links;
• HDR, PPM, and SVG image formats, and more.

Gmail supports various CSS properties and media queries apart from:

• box-shadow, text-shadow, and some other CSS properties;
• @media (prefers-color-scheme) media query, and more.

Common email coding mistakes and how to avoid them

The best general advice on avoiding email coding mistakes is to limit your inventory to code supported by most email clients, no matter how old their versions are. In simple words, to step back and code as if it were 1999. For instance, it’s widely recommended to use:

• CSS2 instead of CSS3,
• HTML4 instead of HTML5,
• color instead of background images,
• table-layout instead of
  ,
• inline CSS instead of style sets or