25th Mar 2021

How to create responsive email template?

Web

Written By, Gyanesh Trivedi

Overview

In today’s world email plays a vital role in any business. Starting from a welcome email to subscription email and others. All these emails are made from email templates which can be easily available or self made.

Email templates either have a simple layout or columnar layout or combination of both. Let’s look at how to make one.

Simple layout

Here is the simple example with responsive
Code:-

Output:-
email-template-one-column

2 column layout

Here is the example of 2 column section with responsive
Code:-

Output:-

email-template-two-column

The above screenshot of Desktop View

email-template-two-column-mobile

The above screenshot of Desktop View

This is for mobile responsive which wrap the section

Internal vs inline css

Many mail editors do not accept internal css, so that’s the reason we prefer to apply inline css so that most mail client(s) will support & will look perfect. The below one is the best example of it.
email-template-internal-vs-inline-code
email-template-internal-vs-inline-code
email-template-css-support
Supporting style which allows all browsers here’s some reference will be useful to us,
https://www.caniemail.com/
https://www.campaignmonitor.com/css/

Conditions use for Microsoft outlook

Windows Outlook 2003 and higher uses Microsoft Word as a rendering engine, which can lead to some strange rendering problems. Outlook conditional comments allow us to add bits of HTML that can only be read by Word-based versions of Outlook.
Why Condition?
– Condition for outlook is for using mail exact view as compared to other mails which shows the simliar view of real view. Outlook does not support many of css property and that is the reason why MSO Code (Microsoft Office) help to look like that view
Here is the code to apply after
Target Outlook 2007 and up

Target Outlook 2000, 2002, & 2003

Target all Outlook versions

Other versions

Here is some references to test your mail template to check out their view,
https://www.litmus.com/
https://outlook.live.com/owa/

Full email template sample example

https://github.com/yudiz-solutions/email-template

Conclusion

I hope that this blog might be useful to write new mail templates in your code. In the future we will write more blogs on new email templates.

Written By,

Web Designer at Yudiz Solutions Pvt. Ltd