How to Create Professional Email Template

Rahul Tripathi Aug 26th, 2020

Document :- we create email template for automatic replies. These are used in the cases where an automatic response is required to send to an e-mail recipient for info section, newsletter, bills, registrations, to provide market information, advertisement etc. It helps in reducing logo issues in the web browser. With this we are less liked to run into problems as compare to email clients.

Email structure:- Email template is a responsive template. It supports all type of browsers, web, tablet and mobile view on all email accounts like Gmail , YopMail , Outlook etc. This email template is created in a table form through HTML. We use CSS inline and Internal. Since it is a single page template, we do not use CSS external in it.

Email Template Format:-

<!DOCTYPE html>
<html>
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Email Template</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
  <body>
     <table>...............</table>
  </body>
</html>

Step 1:- Firstly we create email body using HTML. We use table and tag image and any other tags for the content.

Step 2:- we use Inline CSS to create email template as per the design. We use internal CSS to perform the same, which helps us making this template response.(We Build the Responsive Template).

Inline CSS and Internal CSS Example :-

Inline CSS:- 
<p style="float :left;color:red;">text here</p>
Internal CSS:-
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20P%7B%0A%20%20%20float%20%3Aleft%3B%20color%3Ared%3B%0A%20%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

Step 3:- we use “Floating Elements” , for example,

.We also add a table with a width of 100%. This acts as a true body tag for our email template.Step 4:- you can test you email template only on the email browser. To test this there are only two ways:1 – if you need to put it on a site then you can test it on that site, but you need to have admin panel access to do the same.2 – there few online email root check free tools where you can upload the email template and send it to you own email ID.Email Test Tools Url :- https://putsmail.com/https://htmlemail.io/send/https://www.mailgun.com/email-testing-tool/html-email-tester/free-html-email-tester/
Email Template Input Code Example :-

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Welcome Email Template</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body style="background-color: #e9ecef;"> <!-- start body here --> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <!-- start logo here--> <tr> <td align="center" bgcolor="#e9ecef"> <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;"> <tr> <td align="center" valign="top" style="padding:36px 24px;"> <a href="#" target="_blank" rel="" style="display: inline-block;"> <img src="" alt="Logo" border="0" width="100" style="display: block;"> </a> </td> </tr> </table> </td> </tr> <!-- end logo --> <!-- start text block --> <tr> <td align="center" bgcolor="#e9ecef"> <table border="0" cellpadding="0" cellspacing="0" style="max-width: 600px;"> <!-- start copy --> <tr> <td bgcolor="#ffffff" align="left" style="padding: 24px;font-size: 16px; line-height: 24px;"> <h1 style="margin: 0 0 12px; font-size: 32px;line-height: 48px;">Welcome, User!</h1> <p style="margin: 0;">Thank you for signing up with Paste. We strive to produce high quality email templates that you can use for your transactional or marketing needs.</p> </td> </tr> <!-- end --> <!-- start button here--> <tr> <td align="left" bgcolor="#ffffff"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" bgcolor="#ffffff" style="padding: 12px;"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" bgcolor="#1a82e2" style="border-radius: 6px;"> <a href="#" target="_blank" rel="noopener noreferrer" style="display: inline-block; padding: 16px 36px;font-size: 16px; color: #ffffff; text-decoration: none; border- radius: 6px;">Do Something here</a> </td> </tr> </table> </td> </tr> </table> </td> </tr> <!-- end button --> <!-- start User Name here --> <tr> <td align="left" bgcolor="#ffffff" style="padding: 24px;font-size: 16px; line-height: 24px;> <p style="margin: 0;">Cheers,<br> Name</p> </td> </tr> <!-- end--> </table> </td> </tr> <!-- end text block --> </table> <!-- end body --> </body> </html>

Email Template Input Code Output:-

Rahul Tripathi - Marketing Manager, Enveu

Rahul Tripathi is an experienced Brand and Marketing Strategist driven by ROI’s. As a Marketing Manager, he looks after the company's marketing efforts and helps the company to drive bucket loads of awareness and sales that generate revenues.