Email HTML Templating: A nightmare for newbies
Recently at work, I was given a task to develop an html template supporting all major email clients. I was given a fairly simple looking UX with a background image and a centre div with some images, text and disclaimer. Upon first look, It felt like an easy job to do. Oh boy was I wrong!
So, after some research on email templating and some hands on experience I thought of sharing with you all the resources helpful while building email template and all the pain-points to look after.
- STYLING RESTRICTIONS (CSS LIMITATIONS)
There are a couple of points to remember while trying to style an email template.
1. Try to write inline css: Lots of email client does not support style tags either in their browser version or app or both. I will link some resources for exact limitations:
References:
https://www.emailonacid.com/blog/article/email-development/12_things_you_must_know_when_developing_for_gmail_and_gmail_mobile_apps-2/
2. CSS Support: Email templating comes up with a limited css properties being supported in all email clients hence, while building html email templates, do check some of the below mentioned resources to check which properties are supported in which email clients:
References:
1. https://templates.mailchimp.com/resources/email-client-css-support/
2. https://www.campaignmonitor.com/css/ - WEB FONTS COMPATIBITLITY
Another important point to pay attention is regarding usage of web fonts. Email clients do support web safe fonts such as Arial, Verdana, Georgia, Times New Roman, and Courier because they’re the default fonts that are found on different computers, devices, and operating systems.
The UX that I was given had some fonts except the web-safe font, hence while importing them and using it I made sure to use some web safe fonts as fallback options.
But you can also check the below reference for more details if you want to use fonts other than the web safe fonts.
References:
1. https://www.campaignmonitor.com/blog/email-marketing/2019/02/10-things-need-know-web-fonts-email-right-now/ - RESPONSIVE DESIGN
In simple terms, Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).
After building a basic template, I was supposed to make it responsive and as most of you would have thought while reading this, media query was the first thing that came to my mind. Now, after dealing with the limitations of css property and web font support, I immediately looked up for support of media query in email clients and to my surprise I came up to some articles showing support in majority of email clients. So, without wasting much time, I thought of embedding a style tag in head and finished writing media query. Now, as you recall from css limitations, many email client apps don’t support style tags in head and also, many email clients don’t support media query itself.
Hence after a lot of struggle we had to scrap the idea of using media query and we tried to come up with some idea to have a responsive design by using css properties like min-width, min-height, max-width, max-height, etc.
For further and detailed information regarding media query, do go through the below resources.
References:
1. https://litmus.com/blog/understanding-media-queries-in-html-email
2. https://www.campaignmonitor.com/css/media-queries/media/
3. https://www.campaignmonitor.com/blog/email-marketing/2019/03/creating-a-centred-responsive-design-without-media-queries/
Conclusion:
Although, with a lot of limitations it was quite a struggle to develop html email templates but because of the resources mentioned above, I got a lot of information and help in building it eventually.
Thats all from my side.Thank you for reading my first blog on email templating with patience. :)
