In this article, we'll learn how to build a responsive HTML email template from scratch.
1) Begining of Email Template
We will use XHTML doctype for the email templates.
2) Body and Main Table
Here, we will set margin, padding, cell padding, and cell space 0 to avoid any unexpected space. We have set the table width 100% so that it will act as a true body tag for our email, as the styling of the body tag is not fully supported.
Now we will place 600 wide tables inside the container table, here we will set the width using HTML and not CSS
600 pixels display comfortably in most of the desktops
3) Creating the structure and header of email template
Here we have created a structure for the header footer and body, we can also color them as per our requirements
We will always give padding to td tag, while padding we must specify every single value(top, bottom, left, and right), otherwise, we may get unpredictable results
For bold texts, we will use the <b> tag, because if it exists in HTML then we will prefer HTML over CSS
And finally do not forget to turn off borders, we need to replace border ='1' with border ='0'
So these are some of the important points to follow while creating any responsive email template