Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Crafting a beautiful and impactful HTML email with a consistent user experience is a daunting task, even for experts. The deal is being less progressive than web browsers, mail providers do not agree with each other in what features they support and how they render them. As a result, you are left with a limited amount of tools and a bunch of issues and unexpected bugs. However, it does not mean that you cannot nail email development on your own.
The key to successful email development lies in adopting the best practices, sticking to standards, using safe options, and benefiting from time-tested tools. Dive into our guide to HTML email development best practices to find out how professional email marketers create successful email designs with a high deliverability rate, and impressive conversions without losing their nerve.
We will start with the design since it is the first thing your customers see, understand, and respond to. It stands behind conversions and open rates. According to studies, more than 90% of respondents look at visual appearance when deciding to buy. Therefore, much like the core and functionality of HTML email, the design has to be flawless. Let’s walk through the HTML email best practices to find out what are key aspects that you need to master.
Every email marketing campaign starts with defining your target audience and segmenting the subscription list accordingly. Although it seems that it has nothing to do with the design, in fact, it is the cornerstone of everything in email marketing software; and creating HTML email design is no exception.
Knowing your audience and, most importantly, what mail clients are in use is the base to build one. As we have already pointed out, email clients, including big names like Gmail, Outlook, Apple iOS, and Windows Mail, differ in support of HTML email features. Therefore, you need to know what solutions and properties to use to avoid the design crash.
Using analytics tools, you can define user’s habits and preferences in devices. This information may help you to create a design that is compatible with the email reader the best. Many small businesses that target the local crowd or a specific market benefit from this practice all the time.
However, what if you target the international market or need to serve data to all sorts of groups. So, you have to deal with the situation when a mix of email clients is involved. In this case, segmentation may help you define several types of devices you need to cover. Follow this simple 3-step procedure:
This approach works great for the majority of mail readers, except for Outlook. The deal is, it is one of the most problematic email clients. It is tough to find a compromise, especially when the older versions are involved. It is just much easier to single out these subscribers and create an email design specifically for them. Therefore, if your users mostly employ Outlook, it is highly recommended to create a version only for this email reader and send it to the corresponding segment of subscribers.
What if this is your first campaign? What if you have never sent to this list of subscribers, or you simply do not have any information about device usage? Then follow this approach:
Email from Grammarly
According to recent studies, more than 70% of emails are open on cell phones these days. It goes without saying that HTML email design should be mobile-friendly. However, there is a hidden pitfall: email marketers often use responsive design and mobile-friendly design interchangeably, but they are not the same thing even though they have similar features.
When you create an HTML email, it is crucial to consider the design from a cellphone perspective. For example, when it comes to small screens, Apple recommends setting the typography to 16px since it makes characters legible and discernable. In contrast, the responsive design that is a one-size-fits-all solution implies only gradual changes in proportions. Therefore, we can often see mobile layouts where the font is set in 14px or even 12px size.
For some devices, responsive principles may work like a charm; however, if you want to ensure the best user experience for mobile users, it is vital to enforce the best practices for small devices.
Consider these ground rules of mobile-friendly design that every email marketer should know:
Mobile Usage Statistics Infographic
One of the pillars of good email marketing states, if you want a newsletter to bring about high conversion rates, you need your customers to connect emotionally with your product or service. Without an emotional connection, you will not be able to tug heartstrings and achieve significant results.
The key to this connection lies in personalization that is realized through message and design. While personalization features (like the name of the recipient or an offer based on the client’s purchase history) speak to the user, the design frames this dialogue and makes this connection impactful and emotional.
Whatever design you are up to, it is crucial to personalize it. Analyze your audience, segment subscribers based on preferences, buying habits, gender, location, age, and adjust the design accordingly.
A good example of realizing personalization through the design is the usage of the proper color. As we know, people make a subconscious judgment about a product based on color. If you use the right color for your target market, you will reinforce the emotional connection with the audience and ipso facto increase conversion rates.
For instance, when you create an email design for a female audience, it is advisable to go for soft tints of blue and purple since, according to color psychology, women favor them. In contrast, a male audience will be delighted to see bright shades of blue and green, whereas teenagers mostly fall for marketing-established colors like pink or blue.
As we have already pointed out, to ensure the success of HTML email design, you need to know your audience, use segmentation and capitalize on personalization. However, that is not all; some other tips can be beneficial for your project.
Let’s consider practices that lie at the core of each successful campaign regardless of the niche and scale of the organization. They are ten golden rules of good HTML email design. Bear them in mind and try to implement them in each project:
On top of that, it helps the newsletter to see through spam filters because it is one of several factors that ESPs check before granting the newsletter access to the user’s inbox. If the subject line “smells fishy,” the receiving server will block the email.
Therefore, make sure your subject line is strong, unique, and valuable. For this, ensure it follows the basic rules:
They have minimal support or no support whatsoever.
To enjoy all the benefits of email design, you need to ensure that the core of the newsletter (structure, layout, and functional units) works as intended. Therefore, follow the best practices for HTML email development.
As much as you want to use flexbox or grid in your HTML layout, unfortunately, it is impossible since email clients do not support these unique CSS features. Although you can try to use divs and floats, however, their abilities are also limited. Therefore, all you can do to play safe is to use tables. They are the most reliable tools to create a layout.
When using tables, remember that the general advice is, keep it simple and stick to a one-column structure. However, you can try two and even three-column layouts if you send newsletters to the audience that uses desktop or notebooks to open them.
To build a complex structure, you can nest tables. However, you need to bear in mind several important things:
CSS styles are one of the weakest spots in email development. The majority of CSS3 modern features are widely unsupported by mail clients. In addition, there are many no-nos for styling. For example, you need to stay away from such general practices as:
That is not all; when it comes to using styles in HTML, it is here where you need to use inline styles: a practice that is widely considered bad for website designs but turns to be a lifesaver for email designs.
To make matters worse, if you want to play safe, then it is better to use
Responsive design is one of the most crucial HTML email best practices since the mobile web is in charge these days. Here are the main recommendations that help email design to adapt to various screen sizes graciously:
There are several ways to pull off responsive design: media queries with a set of breakpoints and fluid layout with calculations done on the CSS side. Each approach comes with its cons and pros.
Check out these helpful articles to get a solid start:
Last but not least
When creating a responsive design, it is vital to stick to the standards of good code, such as:
Example of Responsive Email Design
Authentication protocols (SPF, DKIM, and DMARC) provide a security layer for your emails. Although they are not obligatory, however, they are highly recommended for every company. There are several good reasons to enforce them:
SPF, DKIM, and DMARC are secret ingredients that help professional email marketers to ensure their emails get to their destination safe and sound. Therefore, they should be in place.
Along with authentication protocols, there is one more thing that you need to do with your mail server administrator. It is to set up a list-unsubscribe header and reverses DNS lookup.
Although these two mechanisms are not related, they still work towards the same goal, that is, making your email look trustworthy and your company look reliable.
Let’s consider them a bit closer.
List-unsubscribe header is an email header that includes the command to unsubscribe users directly from a mailing list. It has instructions that tell email clients what mechanism they should embed to the email so that users can quickly and painlessly opt out from the mailing list. Note, an unsubscribe link inside HTML body email is not enough these days. To make your users feel comfortable in your relationships and ensure ESP that your company follows the law, it is important to set up a list-unsubscribe header.
Reverse DNS lookup – is a querying technique that maps domain names and IP addresses. It lies at the core of many analytics instruments. It is also one of the many factors that ESP considers when deciding on the authenticity of your newsletter. If reverse DNS lookup is not configured, ESP may easily reject the email from this server. Therefore, you need to ask your mail service provider to set it up for your domain because it is not configured by default.
No one wants to deal with companies that are blacklisted, and no one cares how it happened. Your reputation is everything: it should be flawless – end of story. Therefore, blacklists can be a real curse. They can destroy everything, starting from your sender reputation in the digital expanses and ending with a brand reputation in the real world. They have such bad implications for your brand as:
The main problem with the blacklist is, it is ridiculously easy to get into the blacklist and become blocked. For example, if you overstep the bounds of HTML email best practices, or get carried away during the holidays and send too many emails to subscribers, you can quickly get yourself into trouble.
The second big problem with blacklists is that you are not notified that you are in. You are left in darkness while the blacklist begins to destroy your sender reputation and nullify deliverability rates and open rates.
The third problem is, there are more than one hundred blacklists on the web: Malware Blacklists, DNS Blacklists, IP Blacklists, Phishing Blacklists, Spam Blacklists. They have their policy and criteria. Of course, not all of them have the same impact on your campaign; however, eventually, even the unpopular blacklist can ruin your marketing strategy.
So, it is crucial to stay away from blacklists. As one of the HTML email best practices states, check blacklists regularly and act quickly. For example, you may use such tools as
If you are in, do not panic. Visit the official website of the blacklist provider and familiarize yourself with the protocol of getting out. Fix all the issues with your campaign, domain, IP, and mail server and register a request to be delisted.
Blacklist check by Unspam.email
Accessibility always stays overlooked by email developers, mostly because they consider this aspect a prerogative of web design. However, your digital newsletter should also be accessible by any person. Impairment should never be an obstacle.
Therefore, follow these HTML email best practices to ensure a proper level of accessibility:
Check out Email Design Accessibility: Why It Is Important to Improve It for more information on this subject.
Whatever you create, it is crucial to conduct regular tests. It is one of the most important but sadly overlooked HTML email best practices. Regular checks ensure everything is fine with your email and campaign. Therefore, before sending email to your customers make sure you have done these things:
Last but not least, do A/B tests. Polishing your HTML body design is not enough to ensure the campaign’s success; it is crucial to understand how your subscribers react to the newsletter’s design, offer, and work since every taste is different. For this, you need to run A/B tests. They will give you clues about what should be included inside your newsletter to get a proper response from your subscribers and turn prospects into buying customers.
The great thing about HTML email development is that no one said that you have to do everything yourself. Creating a decent email is a challenge: there are so many practices to follow, so many instruments to involve, and so many checks to do. However, you can easily see through with some assistance.
For instance, if you have coding skills, you can enjoy the benefits of pre-made HTML email templates that provide a reliable foundation to build on. Check out these Free HTML Email Newsletter Templates.
If you do not have any tech skills, you can delegate this task to the tools that do all the heavy lifting, like Postcards. Postcards is one of the most popular and trusted assets of email marketers all around the World. It has an intuitive drag-and-drop email template builder, hundreds of beautiful hand-crafted field-tested units, handy customization options, and lots of features like version history or native integration with popular ESPs like Mailchimp.
Let’s be honest; email design has stuck in the dark ages. We can’t use modern CSS features or implement JavaScript to provide fallbacks. We are left with scarce solutions that do not even render similar in all email clients. As a result, we should face many challenges while creating a decent email design. However, it does not mean we cannot nail it.
To see through all the obstacles, it is essential to follow HTML email best practices – they make a huge difference in how your newsletter displays in different clients and how your target audience respond to your campaign – and, of course, benefit from tools that were created to help email marketers to feel solid ground under their feet.