HTML Email: 10 Rules a Marketer Must Know

An HTML email is a type of email that allows for all the fun elements. Images, links, videos, various fonts or colors, interactive elements—it has everything that plain text email does not. With the help of HTML (Hypertext Markup Language) emails, it is possible to create diverse layouts and make the user experience truly memorable.

HTML emails are widely used in email marketing because they provide brands with an opportunity to capture the attention of their audience through emails that are creative, colorful, and personalized. Additionally, with the ability to include design elements and track user interactions through embedded links, HTML emails allow marketers to engage with their audience more effectively, driving higher conversion rates.

While HTML emails are more resourceful in terms of provided opportunities, they also require more effort and knowledge to make them truly efficient. In this article, we decided to discuss some of the rules in the process of HTML email creation that allow for more efficient and user-friendly communication with recipients.

10 Rules for Creating an Outstanding HTML Email

Rule 1: Mobile responsiveness is crucial

Why it matters: When creating an HTML email (or any type of content), it is worth remembering that most emails are opened on mobiles. If your email is not mobile-responsive, there’s a high chance that it will be displayed incorrectly. The result: a poor user experience and reduced engagement. With contemporary users, like Gen Zs, being fast with their verdicts on emails, they will most likely delete your email or unsubscribe from future communications with your brand.

What to do: To make your HTML email mobile-friendly, use adaptable layouts, scalable images, and media. These elements allow your email to adjust to different screen resolutions and types of devices, such as smartphones, tablets, and desktop computers. So, test the responsiveness of your design before you send HTML emails. Like this, your content will stay attractive on any screen or device and provide a positive experience for all your recipients.

Rule 2: Email clients render HTML differently

Why it matters: Gmail, Outlook, Yahoo—each of those email clients handles HTML code in their own unique way. This means that an HTML email that looks great in one client may appear skewed or unprofessional in another. These inconsistencies negatively impact the user experience and damage the brand’s reputation. Consistency in how your email is displayed across different email clients is one of the pillars of your brand’s credibility.

What to do: Before you send HTML emails, you should test your emails across multiple clients. In general, if you want your HTML email to appear consistently across all email platforms, testing is a key. Here, tools such as Litmus or Email on Acid can be of great help. They can help you identify rendering issues, allow you to adjust the code, and fix email inconsistencies.

Rule 3: Use inline CSS instead of external stylesheets

Why it matters: Many email clients strip out external stylesheets, which can lead to broken or unstyled HTML emails. When your email has no intended styles, it may lose its professional design, which can lead to reduced effectiveness and readability. Inline CSS ensures that your HTML email retains its formatting, even when external stylesheets are removed. This aspect is crucial for maintaining a consistent design across different email platforms.

What to do: Always apply CSS inline, directly within the HTML tags, rather than relying on external stylesheets. This will ensure that your email retains its styling across all email clients. Inline CSS will help you avoid issues with stripped styles, maintaining a polished and cohesive design when you create an HTML email.

Rule 4: Optimize image use

Why it matters: We like seeing large, beautiful images in our emails. The problem with large images is that they can slow down email load times. This is one of the most frustrating things for most users. The result is not hard to predict—lower engagement, especially for mobile users on slower networks. Another problem is that some email clients block images by default, leaving users staring at empty spaces with no visuals.

What to do: When you make an HTML email, use images sparingly and compress them to reduce file sizes. This will improve load times and make the email more user-friendly. Good practice with images is always including alt text for every image. Like this, you ensure that your message is still communicated even if the images are blocked. So, even if the looks of your email are not perfect, the info will still be delivered.

Adding ALT text for email image

Rule 5: Balance text and images

Why it matters: A well-balanced HTML email, with a good mix of text and images, substantially increases the appeal of your message, as well as its deliverability. On the other hand, emails with too many images and too little text can trigger spam filters and make HTML emails land in the junk folder. Similarly, too much text can overwhelm the reader and reduce the visual appeal of your email.

Text-image balanced email

What to do: Aim for a 60/40 or 70/30 text-to-image ratio when you create HTML emails. Like this, your emails will remain readable while at the same time being able to pass through spam filters. Besides, when an email looks well balanced, it is visually appealing and aesthetically pleasing, which adds overall attractiveness to your communication.

Rule 6: Avoid JavaScript and embedded media

Why it matters: Most email clients block JavaScript and embedded media for security reasons. If you include these elements in your HTML email, they will likely not display correctly, leaving your email looking broken or incomplete. These blocked elements can, in turn, confuse or frustrate users and diminish their experience from your email campaign.

List of email clients with and without embedded video support

What to do: Instead of relying on JavaScript or embedded videos, turn towards animated GIFs that are great for displaying dynamic content. Another JavaScript alternative is including a static image with a clickable link to the video hosted on a website. Like this, you have more chances to keep your interactive elements within your HTML email functional and prevent issues with blocked content.

Rule 7: Keep the email size under control

Why it matters: Some email providers, like Gmail, tend to clip large HTML emails, which means your message might lose some of its essential parts even before your subscribers see it. Additionally, larger emails can take longer to load, especially on mobile devices or with slow Wi-Fi.

Picture-heavy email campaign

What to do: To prevent clipping by email providers and ensure faster load times, you shall keep your HTML email file size under 100 KB. Compress images, avoid excessive code, and altogether limit the use of heavy design elements. By optimizing emails by size, you can improve their performance and appeal, regardless of what device users access them.

Rule 8: Pay attention to the load speed

Why it matters: In today’s fast-paced digital world, a slow-loading HTML email can frustrate recipients. As it was previously mentioned, it is especially relevant for users on mobile devices with slower internet connections. If your email takes too long to load, users may not wait to view it and skip it in favor of more fast-loading emails.

What to do: When it comes to the email load speed of an HTML email, avoiding “heavy” elements is a key. So, focus on optimizing load speed by compressing images, avoiding unnecessary code, and limiting heavy design elements. If you follow these steps, you’ll soon notice improvements in email load times, while your users will be able to view and interact with your email faster and more efficiently.

Rule 9: Provide a plain text version

Why it matters: While HTML emails are more appealing in comparison to plain text, you’ll be surprised to find that not all email clients or recipients prefer HTML. For example, some mail clients may only display plain text, and like this, sending only an HTML email will be a failed strategy. If your email doesn’t have a plain text version, you may lose part of your audience who prefer or require plain text emails.

HTML email vs. plain text email

What to do: Always include a plain text version when you send HTML emails. Like this, all your recipients, regardless of their preferences or the email client they use, can view your content. Offering a plain text alternative helps improve accessibility and deliverability, making sure your message reaches as many people as possible.

With this strategy, you maximize your outreach efforts and improve your overall deliverability and visual appeal of emails.

Rule 10: Test, test, test

Why it matters: There are many reasons why HTML emails can break: minor coding errors, rendering issues, or media incompatibilities across different email clients. Even the smallest issue can impact how the email is displayed, affecting the overall user experience. So, testing before sending shall be your mantra if you want your emails to be displayed correctly.

What to do: Before you send HTML emails, test them using email testing platforms. Like this, you can eliminate rendering issues, broken links, and layout inconsistencies across various clients and devices. After all the issues with your emails are resolved, they will appear as expected for all recipients: professional and capable of maximizing their impact.

To Sum Up

HTML emails can make your email campaign stand out. Nonetheless, it is true only in case you are attentive to details while designing and sending it out. Ensuring proper formatting, optimizing for different email clients, managing images and media—these are just some of the steps you need to consider before clicking the “Send” button.

While this may require additional effort, the rewards in terms of better campaign performance and audience engagement make it an investment worth both your time and effort. With the right approach, HTML emails can become an efficient tool for building stronger relationships with your customers and driving business growth.