In this tutorial, I am going to share some ultimate HTML Email Design Guidelines that will help you to design HTML Email effectively.

Why Exactly Do We Need To Follow It..??? As nowadays, companies are trying to promote their latest services to customers so that customers can utilize their applications.

For this, Email Marketing is the best way to make people aware about their product. Hence, when HTML Email Design is done correctly, it is one of the best ways to promote. Emails helps to ensure we’re getting the best possible response from our email efforts.

So, Now lets get assured that our email template design created with an Email Template Builder will get displayed at receiver’s end the way we want it to be by following below steps..


Things To Keep In Mind While Designing HTML Email:

1 :- Starting Tag Inside Body Must Be Table Tag

Always put your <div> tag inside the <table> tag. Html email supports <table> tag, so inside <body> tag- starting tag must be <table> tag.

<body>
<table>
<tr>
<td>
<div>
//write your tag's here.
</div>
</td>
</tr>
</table>
</body>

Note:- Don’t put your <table> tag inside the <div> tag.

<body>
<div>
<table>
<tr>
<td>
<div>
//write your tag's here.
</div>
</td>
</tr>
</table>
</div>
</body>

2 :- How To Put Your Content Inside <tr> Tag

Always put single <tr> in a <table> tag.

<table>
<tr>
<td>
//write somthing here.
</td>
</tr>
</table>

Note:-  Put multiple <tr>tags inside a single <table> tag like this.

<table>
<tr>
<td>
//write somthing here.
</td>
</tr>
<tr>
<td>
//write somthing else here.
</td>
</tr>
</table>

3 :- How To Use Image Tag In HTML Email Designing.

Always put your <img> tag inside <a> tag. Write absolute source path of image and never forget to write alt property. It’s a required field in html email design. You must style <img> tag  with property display: block;

<a href="#"><img src="must write absolute source path"
alt="must write something" style="display:block;" /></a>

HTML Email Design Guidelines

Note:-  Don’t put your <img> tag without <a> tag. Because specially in Gmail Download link will apear when you mouse hover over image.

<img src="write absolute source path" alt="write
something" />

4 :- Keep The Width Of HTML Emails Under 650 Pixels.

5 :- Always Set Given Below Style On Every <table> Tag.

style="margin:0; padding:0; cellpadding:0; cellspacing:0;"

6:- Always Style Every <td> Tag From Property Which Is Given Below.

style="margin:0 auto;"

7:- Always Put Inline CSS Into Your HTML Email.

<div style="display:block;"></div>

Note:- External CSS or Internal CSS not supported by Email Client.

<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" /> //External CSS
</head>
<body>
</body>
</html>
or
<html>
<head>
<style>  //Internal CSS
body{
background-color:#eee;
}
</style>
</head>
<body>
</body>
</html>

8 :- Put Your Style To <table> Tag Instead Of <body> Tag.

As most of Email Clients are not paying attention over <body> tag and just ignore its style. So, always add style in starting<table> tag  present inside <body> tag to take its advantage.

<html>
<head></head>
<body>
<table style="width:100%;background-color:#eee;">
//write your content here.
</table>
</body>
</html>

9 :- CSS That Email Client Do Not Support.

Never try to give property given below to any element in email template designing as it is not supported by email clients.

float: none|left|right|initial|inherit;
position: static|absolute|fixed|relative|initial|inherit;

10 :- Don’t Use Background-Image Property.

In HTML Email Designing, avoid using background-image property instead of this use bgcolor or background-color on Tag.

11 :- Don’t Try To Add JavaScript In HTML Code Because It Will Be Stripped

12 :-  Always Define CSS Property Individually.

style="border-width:1px;
border-style:solid;
border-color:grey;"

never try to define in shorthand method like this.

style="border:1 px solid grey;"

13 :- Use <span> Tag Instead Of <p> Tag.

Use <span>’s for writing any Text instead of <p> tag. Because <p> tag generate extra space that will become problem for HTML Email Designer.

14 :- Must Align Your Text With Style Align.

15 :-  Use HTML Entities Whether It Is Name Or Number.

Define HTML Entity like this [&#34;] [&#8217;] [&copy;] instead of symbol. Here [] used as html entity separator.


Conclusion :-

So this was all about how you can design HTML Email. Hope you liked it. Keep visiting our website for more interesting blogs. 🙂