Email Marketing Coding: 2 Critical Good User Experience Tips

Email marketing coding is one of the most important aspects of email design. By coding your email correctly, you can create a good user experience that will be consistent across platforms. In this blog post, I will discuss two primary email considerations: creating a mobile-friendly email and ensuring consistency across platforms. I’ll also offer tips for ensuring a good user experience, such as minimizing image use and leveraging standard font stacks. Finally, I’ll provide solutions for common email display issues. Read on to improve your open and delivery rates!

The Two Primary Email Considerations

There are two primary email considerations that all email marketers should be aware of: creating mobile-friendly email and ensuring consistency across different applications. By coding your email correctly, you can create a good user experience that will be consistent across platforms.

Create Mobile Friendly Email

One reason email marketing coding should be mobile friendly is because more and more people are opening emails on their mobile devices. In fact, recent studies have shown that over 50% of email is now opened on a mobile device. So, if your email isn’t coded correctly for mobile devices, you’re likely missing out on a large portion of your audience.

There are a few key things to keep in mind when coding for email on mobile devices. First, use large font sizes that are easy to read on small screens. Second, avoid using too many images, as they can take longer to load on mobile devices. Also, make sure your call to action (CTA) buttons are large and easily clickable. By following these guidelines, you can ensure that your email looks great and is easy to use on mobile devices.

Ensure Consistency Across Platforms

Another primary email consideration is ensuring consistency across different email applications. Just as people are opening email on more mobile devices, they are also using a variety of email applications. In order to ensure that your email looks great and functions properly regardless of the email application being used, it’s important to code using industry-standard HTML and CSS. This will help ensure that your email is displayed correctly (as best it can) across all email applications.

By following these two primary email considerations, you can create a good user experience that is consistent across all platforms.

Ensure a Good User Experience

In addition to the two primary email considerations, there are also a few other email marketing coding tips that can help ensure a good user experience.

Minimize Image Use

One tip is to minimize image use. While images can be helpful in email design, too many images can make your email look cluttered and can also slow down email loading time. So, use images sparingly and only when they are absolutely necessary.

Further, make sure you optimize your images to be as small as possible (so that they load fast. There are several free online compression tools I use for images and related:

Leverage Standard Font Stacks

Another email marketing coding tip is to leverage standard font stacks. This will help ensure that your email looks great regardless of which email application is used to open it. By using standard font stacks, you can be sure that your email will be displayed correctly across all email applications.

I would suggest avoiding web fonts, because not all email clients (applications) support them. In my opinion, the best fonts to use for your email (in alphabetical order) are:

  • Arial (sans-serif)
  • Courier New (monospace)
  • Georgia (serif)
  • Times New Roman (serif)
  • Trebuchet (sans-serif)
  • Verdana (sans-serif)

This will normally result in no extra fonts having to download for display, and result in improved loading speed.

Your email marketing coding CSS could look something along the lines of:

@font-face {font-family:system;font-style:normal;font-weight:300;src:local("Arial"),local("Verdana");}

Then to use it (in the body for example) your email marketing coding could use something like:

body {font-family:"system";}

This has an advantage in that you would be specifying the font once, then simply calling it as needed (instead of specifying the font’s numerous times).

Tutorial from “Keep Coding”: Creating email marketing coding

Compress Email Code

Email code can be compressed to improve email loading time. This is especially important for mobile email, as slower loading times can lead to a poor user experience. Compressing email code can help ensure that your email loads quickly and looks great on all devices.

There are several ways to compress email code. One way is to use an online compression like Code Beautify (or any other you prefer). I should note, only compress the code whet you have completed and finalized your email marketing coding.

Provide a Singular Focused Message

When crafting your email, it’s important to provide a singular focused message. This means that your email should have one primary goal or call to action. By keeping your email focused on one message, you can help ensure that your email is successful.

When email is focused on one topic, it is easier for the reader to understand the message that is being communicated. Additionally, email with a singular focus allows the email designer to better control the layout and design of the email (which results in better email marketing coding). This can result in a more effective email marketing campaign overall.

Be Proactive and Have Solutions for Email Display Issues

There are a few email display issues that can occur, which can be problematic for email marketing campaigns.

One such issue, for example, is the email landing page may not match the email. This can be caused by different coding methods used on the email and landing page, or by different images being used in each. When this happens, it can be confusing for the reader and may result in a poor user experience.

To avoid email issues, it’s important to be proactive and have solutions in place. This can include things like media queries to load different things for different devices, or even something as simple as having a plain-text version of your email.

Ensure the (Website) Landing Page Matches the Email

One reason why the coding of your email should match the coding of your landing page is because it can help to avoid email display issues. When the email and landing page are coded using the same methods, it can help ensure that they look similar (or identical) to the reader. This can help to avoid confusion and create a better user experience.

In terms of the outputted visuals your email marketing coding produces, this also helps to ensure the user experience is consistent.

Include Plain Text Versions of Your Email

Another way to be proactive and have solutions for email display issues is to include plain text versions of your email. This can be helpful for a couple of reasons.

  1. Some email clients do not support HTML email (or may have HTML email turned off).
  2. Including a plain text version can help to ensure that your email is accessible to all readers.
Email Marketing Strategy: Plain Text Emails vs HTML Emails

Design Your Email for Those That Block Images

Some email clients block images by default, which can cause email display issues. To avoid this, it’s important to design your email for those that block images. This can be done by using Alt tags and other methods.

Again… By creating the appropriate email marketing coding to design your email for those that block images, you can help to ensure that your email is accessible to all readers.

Always Test Before Sending

It’s important to always (vigorously) test your email campaign messages before sending it out to your list. This can help to avoid email display issues and ensure that your email looks great on all devices.

The developer who complete your email marketing coding should be involved to she or he, can adjust your email code, or provide coded solutions to unexpected issues.

There are a huge number of email testing tools available, so be sure to find one that meets your needs.


Email marketing coding is an important part of ensuring your email messages are successfully communicated. By adding the tips in this post, you can help ensure that your email campaigns are successful.

You can learn much more about email marketing coding, by visiting our Small Business Email Marketing posts. As well as find out more about email coding.


Leave a Comment