Things to Keep in Mind While Creating an HTML Email

HTML emails are stunning, impactful, and incredibly engaging which is why a large number of brands across the world love including them in their campaigns. But here’s the thing- designing and developing them is not really a walk in the park. Grown-up reading the maxim, “Nothing good comes easily”?

Well, sit down to create an HTML email, and we assure you that you will resonate with every single word of it. But, you don’t have to. Today, we have listed down a host of best practices that will allow you to make breathtaking HTML emails with ease and grace. Read on to find out!

Steer Clear of JavaScript and Other Complex CSS/HTML

Email clients offer as much support to JavaScript as water does to fire (that might have been a touch dramatic, but we think you get our point), so it’s best to avoid it. However, if you do want to include JavaScript and interactive elements, you can consider using AMP (accelerated mobile pages) for email. But, even that has limited support.

At present, AMP components in the email are supported only by Gmail, Mail.ru, and Yahoo!. So, the bottom line is, always stay away from Javascript, Flash, and other complex CSS/ HTML. In some cases, you might be tempted to use CSS3 and HTML5 (which get limited support) in a bid to add that extra bit of oomph to your emails. That’s alright, as long as you make sure that you thoroughly test each and every email that contains advanced code before sending it out.

Embrace Font Stacks

Complex CSS/HTML aren’t the only things to not receive support from email clients; custom web fonts (Google Fonts, for instance) feature in that unenviable list as well. Therefore, it is extremely important to use font stacks while developing HTML emails. Failing to do so will result in your email design appearing inconsistent across different clients.

Don’t just declare fallback fonts while operating with custom web fonts; use them when you are dealing with email-safe fonts too. Why? Because there’s not even a single font that enjoys support from ALL email clients. So, it’s always better to get on the safe side.

Now, the question is, how does one compile a font stack? It’s easy; just list them in order of priority. At the top, place the font you want to use in your email. Below it, specify the email-safe alternatives (in decreasing order of priority), and at the very end, put the default font.

To avoid complications, many brands choose to create their font stacks using web-safe and email-safe fonts. This allows them to cut down on display issues during testing. Some popular email-safe fonts that you could consider including in your font stack are Arial, Arial Black, Georgia, Webdings, Comic Sans MS, Verdana, Impact, Trebuchet MS, Courier New, ??????2 (Symbol), and Times New Roman.

Be Mindful of Your Loading Time

Nothing stomps on your subscribers’ nerves as furiously as an HTML email that takes forever to load. Email loading time contributes immensely to the success of your campaigns and hence you should take all possible measures to optimize it. Listed below are a few:

• Try to use as few images as possible. There’s no denying that they make your emails visually appealing, but too many high-quality images can severely impede their loading time. Remember, for every image that you load, a new request is issued to the server. And the more the number of requests, the greater the loading time. Additionally, to prevent rendering issues, you must always optimize your image size. Experts recommend setting the content width to around 600px for best results.

Take a look at this email by Camper. Even with few images, it manages to look quite arresting.

• Get rid of unnecessary code. The best way to go about this is by using an HTML minifier. It automatically removes junk code, thereby improving your email’s loading time.
• Keep your copy crisp. The idea is simple- the more content your email has, the more will be its file size. So, you should always strive for email copy that is concise and to the point. Besides, in this age of dwindling attention spans, you stand a better chance of attracting your reader’s attention with brief paragraphs rather than long, winding essays. For instance, see this email by Boatsetter.

Nothing better than short and sweet to get the job done, is there?

Ensure Your Emails Are Accessible

Making certain that your emails adhere to accessibility best practices is critical to enhancing the reach and visibility of your campaigns. But, practising accessibility isn’t merely about registering handsome scores against performance metrics; it is about fostering inclusivity. Should your HTML emails fail to be accessible, your brand reputation will be tarnished beyond repair.

Not to mention, the legal trouble it invites. Countless international legal frameworks have now made it mandatory for organizations to make their communication and content accessible for people living with auditory, visual, cognitive, speech, and physical disabilities. Failing to comply can land them in the midst of several unending lawsuits and disputes.

That said, what techniques can one implement to make their HTML emails accessible? Take a look.

• Use single-column layouts. Most HTML emails are developed using tables. And with tables, it is essential to specify the right content order. Should your sequence not abide by the standard left to right and top to bottom reading order, readers using assistive technologies such as screen readers will have a tough time consuming your emails. Simply put, a single-column layout helps you establish a logical reading order. Moreover, employing a single-column layout lets you avoid rendering issues such as overlapping columns, shifting of images, overflowing text, and the like. The icing on the cake is that emails with single-column layouts are pretty pleasant to the eyes too.

Here’s an example by Seed.

Found it hard to peel your eyes off that, didn’t you?

• To make sure that screen readers navigate your HTML emails smoothly, it is important that the meaning of each element within your email is clearly defined. You can achieve this by employing HTML semantic markup in your code. Semantic elements offer additional context to screen readers, thereby helping them to interpret the email content more accurately for their users.
• Include a skip navigation link. Screen readers parse through content sequentially and unlike us, have no ability to determine which portion of the email is more important than the rest. This is why skip navigation links are important. They give screen reader users the choice of jumping directly to the email’s most critical part.
• Add the “lang” attribute. Without it, the screen reader will read your emails in the default language its user set during installation.
• Write descriptive alt text. They are what screen readers rely on to interpret images for their users. Draft your alt texts such that they are able to paint a vivid image in the minds of your subscribers.

Wrapping It Up

We hope the techniques shared above will ably guide you as you develop your own HTML emails. Although it might seem a bit overwhelming at first, don’t give up. Once you get the hang of it, you’ll be crafting bewitching campaigns in no time!

Source: WittySparks