Contact me for your FOR YOUR PROFESSIOANAL SALES FUNNEL, CLICKFUNNEL AND LANDING PAGE BUILDING >>> https://bit.ly/34e40ER
You can design your html email template through fiverr by following this link https://www.fiverr.com/share/Vzk4gdcccv
“The sooner you stop fighting the quirks of email, the sooner you can use them to your advantage.” — Caity G. O’Connor
Popular HTML Email Templates on Envato Elements
Get 1 Month Free!
elements_cont_tuts-freemonth1-6hs4s4
Not what you’re looking for? No problem, this tutorial will teach you how to build your own!
The HTML Email Template We’re Building
1. Begin Your HTML Email Document
To begin with, it’s worth mentioning where I pulled some of the resources from.
- The lovely 2D icons are by Justicon on Envato Elements
- The social media icons are from Metrize Icons
Now, as we discussed in the previous tutorial, you’ll need to begin your HTML email template with an XHTML doctype, and the correct language for your subscribers, i.e. <html lang="en-GB">:
1
2
3
4
5
6
7
8
<!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" lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demystifying Email Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>
With that sorted, we can commence building the rest of the structure.
Advertisement
2. Create the Body and Main Table
First, we’ll add an overall structure for our email, starting with a <body> tag. We’ll set the margin and padding on the body tag to zero to avoid any unexpected space.
Then we’ll add role="presentation" to the table. This makes it more accessible, as it tells screen readers to treat it as a visual table, not a data table.
Set your cellpadding and cellspacing to zero to avoid any unexpected space in the table.
Note: We’re going to leave border="1" on all of our tables, so that we can see the skeleton of our layout as we go. We’ll remove them at the end with a simple ‘Find & Replace’.
1
2
3
4
5
6
7
8
9
<body style="margin: 0; padding: 0;">
<table role="presentation" border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<p style="margin: 0;">Hello!</p>
</td>
</tr>
</table>
</body>
Set this width using HTML instead of CSS, by using the width attribute.
“Style text elements with style=”margin: 0;”. This resets the spacing around them to make it more predictable”
1
2
3
4
5
6
7
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
<tr>
<td>
<p style="margin: 0;">Hello!</p>
</td>
</tr>
</table>
We’ve also added an inline style property that sets the border-collapse property to collapse. If we don’t do this, newer versions of Outlook will add a small space between our table and our border.
Contact me for your FOR YOUR PROFESSIOANAL SALES FUNNEL, CLICKFUNNEL AND LANDING PAGE BUILDING >>> https://bit.ly/34e40ER
3. Create the HTML Email Template Structure and Header
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
<tr>
<td>
<p style="margin: 0;">Row 1</p>
</td>
</tr>
<tr>
<td>
<p style="margin: 0;">Row 2</p>
</td>
</tr>
<tr>
<td>
<p style="margin: 0;">Row 3</p>
</td>
</tr>
</table>
Now we’ll colour them according to the design. As bgcolor is a valid HTML attribute, we’ll use that to set the background color instead of CSS. Always remember to use the full six characters of a hexadecimal code, as three character shorthand won’t always work.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
<tr>
<td bgcolor="#70bbd9">
<p style="margin: 0;">Row 1</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff">
<p style="margin: 0;">Row 2</p>
</td>
</tr>
<tr>
<td bgcolor="#ee4c50">
<p style="margin: 0;">Row 3</p>
</td>
</tr>
</table>
Ok, next up we’re going to focus on Row 1. We want to adjust the padding on the cell and then insert our image.
Using Padding
When using padding in email, you can either specify every single value (top, right, bottom and left), or if the top and bottom values, or the left and right values, are the same, you can specify padding in pairs, i.e. padding: 10px 20px;. If they’re not the same values, you can also use shorthand, i.e. padding: 10px 10px 8px 5px;, but if you are having trouble you may wish to write it out longform, i.e. padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;.
If you are having even greater trouble with padding (for example, if your send platform is stripping out your CSS), don’t use it at all. Simply use empty cells to create space. There is no need to use spacer GIFs, just make sure you add style="line-height: 0; font-size: 0;" to the cell, place an inside and give it an explicit height or width. Here is an example:
1
<tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr>
Next, we’ll use some inline CSS to add padding to the cell. Then we’ll insert our image, adding alternative text, and adding style="display: block;" which is a common fix that stops some email clients adding gaps underneath your images. We’ll center the image by adding align="center" to our <td> tag. We’ll also add an alt attribute which is important for when our email is being read by screen readers, and when its images aren’t displaying. And that’s our HTML header done!
1
2
3
<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>
Advertisement
4. Create the Content Area
Contact me for your FOR YOUR PROFESSIOANAL SALES FUNNEL, CLICKFUNNEL AND LANDING PAGE BUILDING >>> https://bit.ly/34e40ER