Pick up every nuance that goes into creating a pixel-perfect HTML email and let your campaigns win over your subscribers!
As an email marketer, you have probably already had countless debates weighing the pros and cons of plain-text emails and HTML emails. And this must have told you that, at the end of the day, there is no clear winner. Both have their virtues and flaws, and can ably support your email marketing program.
The decision ultimately boils down to what you’re looking to accomplish with your campaign. If you’re someone who happens to be aboard the HTML email bandwagon, this article is for you. In this article, we discuss some best practices to follow while creating an HTML email.
Ensure Your Emails Are Responsive
At present mobile clients make for approximately 41.6% of all email opens, a number that is only going to increase in the days to come. Therefore, developing responsive HTML emails has become pretty much non-negotiable. If your emails aren’t mobile-friendly and do not render optimally across every screen size they are viewed upon, the visibility and reach of your campaigns will receive a huge blow.
Talk to any industry expert out there, and they will, without exception, advise you to adopt a mobile-first approach while coding and designing your emails. This is because if your HTML email renders well on a mobile device, it will invariably look good across desktop and tablet screens too.
In the current scheme of things, the success of your email marketing campaign is no longer solely determined by the quality of your email copy and design; plenty rests on the user experience you are able to deliver.
Over the years, email marketing has become more user-centric than content-centric and practicing responsive design helps businesses align with this trend. Now, even if your content is insightful, your emails won’t be received well if they are addled with aspect ratio, engagement link, and contact button issues.
So, what can you do to optimize your HTML email for all screen sizes? Let’s find out.
Embrace single-column layouts: While multi-column layouts continue to shape many brand newsletters out there, sticking to single-column layouts is the best course of action if you want your HTML email to be mobile-friendly. Using single-column layouts eliminates various rendering issues such as overflowing text, overlapping of columns, shifting of images, and the like. As a result, the readability of your email content improves significantly.
Typically, emails designed in a single-column layout contain relatively more white space as well. This makes it easier for the readers to consume and interact with your content. Most importantly, single-column layouts are excellent from an accessibility point of view. Most HTML email templates are coded with the help of tables. With tables, you need to be very mindful of the content order. Should the sequence fail to comply with the left to right and top to bottom reading order, subscribers using assistive technologies such as screen readers will have a tough time going through your emails. A surefire way of establishing a logical reading order and removing the risk of random content being read out is by designing emails in a single-column layout.
Here are some examples of stunning single-column layout emails.
In all these examples, you can see how easy it is to navigate through the content and identify the most important segments of the email.
Optimize your subject lines and pre-headers: The subject line is the first thing that a subscriber notices about your email. Next comes the pre-header- a brief text that adds to the subject line, giving readers further clarity about your email. Whether or not they open the email depends on the merit of these two. Thus, the key to effectively grabbing the attention of your mobile audience lies in optimizing your subject lines and pre-headers. For mobile devices, the ideal length for both is considered to be between 25-30 characters, meaning 5-6 words at most. So, beating around the bush is not an option, really. Be direct while trying to invite curiosity and urgency at the same time.
Take a leaf from the book of these subject lines:
Zillow: Is home solar a bright idea?
Ritual: Our most requested product is here
Peloton: Launching a New, Exciting Way to Strength Train 💪
Pay attention to the font size: Few things are more infuriating than being made to read minuscule fonts on a mobile screen. To steer clear of illegibility, ensure the font size in your mobile emails is at least 2-3 points larger than what you have used for your desktop versions. That said, don’t go overboard either. Unnaturally large fonts instantly draw the suspicion of spam filters. The sweet spot is believed to lie between 22-26px for the headline font and 14-16px for the body font. As long as your readers are not being forced to zoom into their screens to read your message, you are good to go.
Be careful with images: While images, no doubt, add life to your campaigns, using them without exercising caution can land you in trouble. Remember, most email clients block images by default. Hence, it is essential to be judicious with images in your HTML email. At the outset, avoid including any critical information in your images.
Use images to complement your copy rather than conveying anything through them. Ensure all the images are of very high quality; this goes a long way towards enhancing your brand reputation. However, too many high-quality images can hamper your loading time, so optimize them before adding. And lastly, do not forget to add alt text. Besides helping subscribers using screen readers, alt text helps in providing the context of the image to your recipients even when the image gets blocked by the mobile client.
Practice Email Accessibility
Against the backdrop of the global community striving to foster inclusion in every walk of life, email accessibility has emerged as a leading email marketing trend over the last few years. A number of international legal frameworks and policies have made it mandatory for businesses to make their content and communication accessible for people living with auditory, visual, cognitive, speech, and physical disabilities. Violating these norms can land you in unending disputes, not to mention the indelible stain it will leave on your brand image.
Now, the question is, how can you code your HTML email for accessibility? Find your answers in the points below.
Add semantic HTML markup in your code. This will allow you to define the meaning of every single element within your email. Consequently, it becomes substantially easier for browsers and screen readers to interpret the content. Semantic elements are included to give more context to screen readers with the aim of promoting smooth email navigation. For instance, they come in handy while shaping the email structure- with the help of header and paragraph tags you can help the screen reader distinguish effectively between different sections of your email. In their absence, it will assume every content segment possesses the same hierarchy.
Include the “lang” attribute. Without it, screen readers will communicate the email content not in the language in which it is written, but in the default language that the user set while installing it.
Insert a skip navigation link. Screen readers parse through content sequentially and have no way of figuring out if a certain portion of the email is more important than the rest. A skip navigation link enables the reader to hop directly to the email’s most critical portion.
Take Into Account Your Email Loading Time
In this age of dwindling attention spans, the duration of your email loading time is inversely proportional to the number of new leads you’ll acquire. Email loading time is dictated by multiple factors; to optimize it, you need to keep the following points in mind:
As mentioned earlier, the presence of excessive high-quality images can increase your loading time. So, either use few images or make sure you optimize your images before attaching them.
Keep the usage of custom fonts to a bare minimum. Of course, they look stunning, but they make your emails more complex too. The best course of action is sticking to standard web fonts. If at all, you really want to use a particular font, first check whether it is supported by the email client the majority of your recipients are using.
Employ an HTML minifier. It automatically discards unnecessary code in an HTML file. Getting rid of junk code can improve your loading time by leaps and bounds.
Never Forget To Test
No, testing your HTML email doesn’t mean testing it right before you have to send out. Instead, it needs to be inspected at every stage of its development journey. This way, you will be able to check whether it is holding up against different devices, operating systems, and email clients or not. Should there be any inconsistencies, you can fix it at the earliest; something that you won’t be able to do if you schedule the testing process at the very end.
Wrapping It Up
A lot goes into coding and designing a pixel-perfect HTML email and for the uninitiated it can be a tad overwhelming at the beginning. However, with the above best practices in mind, we are sure you’ll find your footing in no time and craft winning email campaigns.
Kevin George is Head of Marketing at Email Uplers, one of the fastest-growing custom email design and coding companies, and specializes in crafting professional email templates, PSD to HTML email conversion, and free responsive HTML email templates in addition to providing email automation, campaign management, and data integration & migration services. He loves gadgets, bikes, jazz, and eats and breathes email marketing. He enjoys sharing his insights and thoughts on email marketing best practices on his blog.
