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>

   </td></tr>
 </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

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
 <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

 


About Author

Nutan Verma

She works as a Frontend Developer. She keeps looking for challenges which demands the best of her professional ability in terms of technical, analytical skills. She is always energetic and competent.

Request For Proposal

Sending message..

Ready to innovate ? Let's get in touch


Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Chat With Us