Best Practices to Follow While Designing your First HTML email Template

Unlike plain text email, HTML email allows you to add tables, colors, charts, diagrams, and other images. Brands use HTML emails to create their unique identities.. Today, HTML codes combined with CSS elements enable email marketers to create highly engaging and interactive emails for their targeted audience. Here are a few of the best practices to follow while designing your first HTML email template

Best practices to follow while designing an email template

Use email-safe fonts

While designing your email template, you might get carried away and want to use one of the fancier fonts. However, there is no guarantee that your subscriber will see your email design the way you intended it to be. This usually happens when the subscriber’s device does not support the font used in your email template. If you want to overcome this problem, HTML email developers are recommended to use email-safe fonts.

Email safe fonts are those fonts that are pre-installed in all of the systems. Naturally, all the email clients will have access to these fonts and can easily render your emails. If you still want to go for custom fonts to make your emails stand out from the rest, it is advised that you use at least a couple of fallback fonts as a backup. Serif and San Serif font families are the top email safe fonts.

Mobile-first approach

According to reports, 85% of the users view their emails from their mobile phones. This is why the majority of email marketers are designing their email templates based on the mobile-first approach. As the name suggests, the template is designed primarily to be viewed on mobile devices. Later on, these templates are optimized for desktops. This approach significantly increases the open rate of emails on mobile phones. Usually, the mobile-first approach is prioritized for simple transactional emails, password resets, and other generic account updates.

Outdoorsy uses the mobile-first template for their password reset notification emails. The template is short, and the user does not have to scroll too far to find the action buttons. Additionally, the action button is highlighted and surrounded by a white border to make it stand out from the rest. 

HTML email load time

Your subscribers are likely to start to unsubscribe from your email list if your email is taking longer to load. The larger the size of the HTML file, the longer it will take to load. The average file size of an HTML email is around 100KB. To reduce the file size of your email, you can reduce the amount of content included in your email. Using fewer colors and web-safe fonts enables the emails to load faster than usual. If you want to enter custom pictures, you can use Photoshop to make the necessary changes to your template and then convert the PSD to an email template.

You can further reduce the file size of your HTML template by using simpler codes. Inserting GIFs and other interactive visual elements can drastically increase the loading time. If the content of your email is engaging enough to retain the attention of your customer, you can overlook this size restriction. 

EmailMonks, now Email uplers, managed to code an entire interactive game in their email.

Do not use the image-only mails

Image-only emails can hurt the performance of your marketing campaigns. If the client has switched off their image download feature, your email will not render. Therefore, you should always add HTML text messages to your email templates. In addition to that, image-based emails consume a lot of data and will take longer to load in the recipient’s inbox. Also, if you are using an image as a background, try not to put any critical message as it might not get rendered. 

Create consistent experiences for different inboxes

Email clients play a significant role when it comes to viewing your HTML email. The emails will get differently rendered with different email clients. Even the various versions of the same email client will render your email with a slight difference. This can be avoided if you are aware of how different clients load CSS and HTML elements of your template. By knowing which unsupported tags to avoid, you can create a consistent viewing experience for your audience. 

Conclusion

Before you create your email template, you can create mockups in Photoshop to get a rough idea of the layout. If you are satisfied with the image in Photoshop, you can convert the PSD to HTML email template. You will need to add some additional HTML and CSS elements to the template to make it more interactive and robust. Finally, you will need to extensively test your templates to get the best results. 

Author: Kevin George is the head of marketing at Email Uplers, which specializes in crafting Professional Email Templates, PSD to Email conversion, and Mailchimp Templates. Kevin loves gadgets, bikes & jazz, and he breathes email marketing. He enjoys sharing his insights and thoughts on email marketing best practices on email marketing blogs.