Email HTML Templating: A nightmare for newbies

  1. 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/
  2. 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/

--

--

Software Developer by profession, with a passion of sharing knowledge.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store