Building Responsive html email template
Posted By :Nutan Verma |22nd September 2020
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Responsive email template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>
2) Body and Main Table
<body style="margin: 0; padding: 0;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr><td>
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
<tr><td> Hello!</td></tr>
</table>
</table>
</body>
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
<tr><td
bgcolor="#70bbd9"> Row 1</td> </tr><tr><td
bgcolor="#70bbd9"> Row 2</td></tr><tr><td
bgcolor="#70bbd9"> Row </td></tr></table>
Here we have created a structure for the header footer and body, we can also color them as per our requirements
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;/>
</td>
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
4) Styling
<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;"><b>Lorem ipsum dolor sit amet!</b></td>
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
Ready to innovate ? Let's get in touch
Follow us
We are ISO 9001:2015 Certified
Resources
Connect with us
Follow us
