As marketers, we are responsible for the quality of emails that we send to our customers. We live in the age of digitalization - everyone has their personal computer in their bag and a wide range of sites, platforms, email clients, etc. on the internet.
When we code HTML pages, we use CSS styles to make fonts, logos, social media icons, and links look great and unique. Media queries help us to make our template responsive for different screen sizes. JS code makes HTML pages alive and gives users more opportunities to interact with content. Everything works well when you create a simple HTML page or site. But when you are working with HTML email templates everything is quite different.
There are a lot of aspects that we should take into account during creating responsive HTML email templates. In this article, we are going to explore the most important issues of writing responsive HTML email templates.
1. Not all email clients support the web fonts that you have chosen in the email layout.
According to this spreadsheet, you can see email clients which support web fonts. If the fonts are not supported, email clients exchange this font for the fallback font. In most cases fallback fonts will be: Helvetica, Arial, or a generic sans serif font, given they are the default fonts of the most popular email clients.
2. Don’t use scripts in HTML email templates.
Sometimes JS code opens horizons for developers because it allows us to solve different problems by writing a couple of lines of code. But it is bad practice to put JS script to HTML email templates. Try to use only HTML and CSS in your email templates.
3. What about media queries in the HTML email template?
It's wrong to create your email only for the desktop approach because when you open the email on mobile devices the email design breaks down. Media queries are the simplest and the most effective way to make your email responsive for different screen sizes. But you should take into account that not every email client supports media queries. The spreadsheet is showing you which email clients deal with this:
So, not a lot of email clients support media queries, but your template should look good with all email clients. Try to use CSS styles “max-width, min-width” for the particular blocks, it helps components not to break down when the screen size will become smaller. For the images it is possible to use “srcset”, this attribute may help you to make the image responsive for different devices.
4. Flexbox and Grid in HTML email templates
It is common practice to use Flexbox and Grid to put elements in the right place. Don’t forget that if you work with emails not all email clients support this CSS style.
5. Using CSS style “background” in HTML email template
If you use CSS style “background” in your email template, you should take into account that the email client Outlook 2007 and earlier versions don't support it. You may use the <img> tag instead of it. Don’t forget to point “width” and “height” for <img>.
So, to sum up, nowadays the competition between brands is very huge, and you need to make unique and quality marketing campaigns. The creation of responsive and well-looking email templates is a very complicated process which needs to know many nuances. Remember that there are two different things to write HTML for WEB pages and for emails and ,please, take into account all items that we considered during the article. Good luck!
