Development of an HTML email is almost like metamorphosis of a tadpole into frog. It undergoes so many changes right from the conceptualization to the final delivery of the HTML email template. Once the email marketer determines the purpose of sending an email, the copywriter drafts the email copy according to the wireframe. Subsequently, the email designer works on the email design according to the wireframe. After the design gets approved, it is assigned to the email developer who transforms the PSD or AI or PDF file into a pixel perfect HTML email. This file is loaded in the ESP and deployed after thorough testing for flawless rendering. Most of the marketers send HTML email rather than a plain text email because of its enhanced aesthetics.
As a number of people are involved in the creation of an email HTML, even a minor change can take too long to ger resolved. In fact, it roughly takes 4-6 hours to develop an email template. The intricacies of the process add to the time taken in developing a single HTML email template.
Through this article, we will show you how to create HTML email template, which you can refer to for basic troubleshooting of your email template HTML code.
| P.S: It is always better to rely on experts like Email Uplers to ensure that your subscribers get an awesome and perfectly coded email. |
| We strongly recommend not to edit an HTML email on Microsoft FrontPage, Word, or Publisher as it will add an additional code to your email template. Use the basic text editor like Notepad or edit the email template HTML code in the code editor of your ESP. |
Table of Content:
- How to Prepare your HTML template?
- How to Style Your Email HTML?
- What does the Final <head> code look like
- How to build your Email <body>
HTML Basics: How to Create HTML Email Template?
A simple HTML email template includes two parts:
- Header section: Any code placed between <head> and </head> is referred to as the header section. All the media queries, styling and CSS animations are specified in this section.
- Body: Any code placed between <body> and </body> is the body section and the rendering engine uses the code to create HTML email structure.
Step 1: How to Prepare your HTML <head> template?
The head section of a simple HTML email template resembles the following code:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=“https://www.w3.org/1999/xhtml”> <head> <title>Test Email Sample</title> <meta http–equiv=“Content-Type” content=“text/html; charset=UTF-8” /> <meta http–equiv=“X-UA-Compatible” content=“IE=edge” /> <meta name=“viewport” content=“width=device-width, initial-scale=1.0 “ /> <style> <!— CSS code (if any) —> </style> </head> |
<!DOCTYPE> is used to inform the rendering engine which HTML tags to expect and which set of rules the HTML and CSS adhere to. Even though some email clients (webmail clients like Gmail, Google Apps, Yahoo! Mail and Outlook.com) strip away the code and apply their own, it is a good practice to include this in your email template HTML code.
Even though you are free to choose between XHTML 1.0, Transitional XHTML 1.0, and Strict HTML5, most email developers worth their salt use Transitional XHTML 1.0.
<meta http-equiv=”Content-Type” /> specifies how to process text and special characters in your email. The “text/html” instructs the rendering engine to consider the following strings of text as HTML.
<meta name=”viewport” /> instructs the device, on which the email is viewed, to set the viewable area of the email as per the screen width.
The title of the email is written between the <title> tag. When a subscriber clicks on “view online”, the title of the email is displayed on the browser tab.
Step 2: How to Style Your Email HTML?
Styling is cool, but its difficult.
Whatever styling you are going to implement in your email such as text formatting, image size, media queries go between the <style> tags as different classes. The basic format for adding <style> tag is <style type=”text/css”> where in “text/css” specifies the media type as CSS. Placement of the <style> tag is tricky as 6 out of 36 email clients do not support <style> tag in <head> and Gmail doesn’t support it in the email body.
Text formatting
In case you need to add a centralized formatting condition (shown below) for any text, you can specify the attributes in the specific class.
e.g. in order to disable text decoration in hyperlinks, add
1 2 3 4 | .em_defaultlink a { color: inherit !important; text–decoration: none !important; } |
Media Queries
In case you are coding a responsive email template, the media queries need to be added in the following format.
1 2 3 4 5 6 7 | @media only screen and (min–width: ___px) and (max–width: ___px) { .(class_name) { (attributes to be implemented) } } |
For example, consider the following media query in the email HTML code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | @media only screen and (min–width:481px) and (max–width:699px) { .em_main_table { width: 100% !important; } .em_wrapper { width: 100% !important; } .em_hide { display: none !important; } .em_img { width: 100% !important; height: auto !important; } .em_h20 { height: 20px !important; } .em_padd { padding: 20px 10px !important; } } |
When the email is viewed in a device that is between the screen width of 481 and 699px:
- The width of the email (em_main_table) is forced to be 100% owing to “width: 100% !important;” attribute.
- The section that is associated with em.hide class shall be hidden due to “display:none !important;” attribute
- The section that is associated with em.h20 class will have the fixed height of 20px due to “height: 20px !important;” attribute
- Any element associated with class em_padd will have a fixed padding of 20px (horizontal) and 10px (vertical).
P.S: !important forces the rendering engine to not make any alterations to the media query.
To create responsive email template, separate media queries are specified to be activated at screen widths lesser than 480px.
The media queries you have learned till now will render in a few mobile layouts. But rendering in some of the layouts require a specific set of media queries, and only an expert developer can help you do that. You can learn more about the challenges and opportunities of responsive email template in this blog.
Interactivity in email
In case you wish to send HTML email with interactive features, the CSS part of the code is to be added before you close the <head> section.
Interactivity is hard to code and requires a lot of testing to render perfectly in email clients. There might be email HTML code available on the internet, but it still requires a lot of coding experience to build interactive emails. You can learn more about interactive emails in our infographic – Interactive Email Design Elements. Here, you will also be able to download samples of each interactive element that can be added in HTML email template code.
Want us to create awesome interactive emails for you? click here now>>
Step 3: What does the Final <head> code look like?
So, our final <head> in the HTML email template code looks like
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=“https://www.w3.org/1999/xhtml”> <head> <title>Test Email Sample</title> <meta http–equiv=“Content-Type” content=“text/html; charset=UTF-8” /> <meta http–equiv=“X-UA-Compatible” content=“IE=edge” /> <meta name=“viewport” content=“width=device-width, initial-scale=1.0 “ /> <style> <!—Text decoration removed –> .em_defaultlink a { color: inherit !important; text-decoration: none !important; <!—Media Query for desktop layout –> @media only screen and (min-width:481px) and (max-width:699px) { .em_main_table { width: 100% !important; } .em_wrapper { width: 100% !important; } .em_hide { display: none !important; } .em_img { width: 100% !important; height: auto !important; } .em_h20 { height: 20px !important; } .em_padd { padding: 20px 10px !important; } } @media screen and (max-width: 480px) { .em_main_table { width: 100% !important; } .em_wrapper { width: 100% !important; } .em_hide { display: none !important; } .em_img { width: 100% !important; height: auto !important; } .em_h20 { height: 20px !important; } .em_padd { padding: 20px 10px !important; } .em_text1 { font-size: 16px !important; line-height: 24px !important; } u + .em_body .em_full_wrap { width: 100% !important; width: 100vw !important; } } </style> </head> |
| Is </head> giving you a headache? |
| We can be your painkiller. Talk to us now. |
Step 4: How to build your Email <body>?
The 600px range for HTML email design was calculated for Windows Outlook working on a 1024px desktop monitor, 10 years ago. Now devices with screen widths of minimum 800px are flooding the market; so you can build HTML emails with a width of 700px at least, and add background colors to emulate widescreen emails.
So, we start with a body of 100% width with color #efefefef.
1 | <body class=“em_body” style=“margin:0px; padding:0px;” bgcolor=“#efefef”> |
In this we add a table that is center aligned at 700px in the HTML email design.
1 | <table align=“center” width=“700” border=“0” cellspacing=“0” cellpadding=“0” class=“em_main_table” style=“width:700px;”> |
Now, we will include a pre-header text and “view online” as a part of a cell, made by nesting another table in the above-mentioned table.
1 2 3 4 5 6 7 | <tr> <td style=“padding:15px;” class=“em_padd” valign=“top” bgcolor=“#efefef” align=“center”><table width=“100%” cellspacing=“0” cellpadding=“0” border=“0” align=“center”> <tbody><tr> <td style=“font-family:’Open Sans’, Arial, sans-serif; font-size:12px; line-height:15px; color:#0d1121;” valign=“top” align=“center”>Test Email Sample | <a href=“#” target=“_blank” style=“color:#0d1121; text-decoration:underline;”>View Online</a></td> </tr> </tbody></table></td> </tr> |
Now, we add the hero image.
1 2 3 4 5 6 7 | <tr> <td valign=“top” align=“center”><table width=“100%” cellspacing=“0” cellpadding=“0” border=“0” align=“center”> <tbody><tr> <td valign=“top” align=“center”><img class=“em_img” alt=“Welcome to EmailWeb Newsletter” style=“display:block; font-family:Arial, sans-serif; font-size:30px; line-height:34px; color:#000000; max-width:700px;” src=“Location of your image” width=“700” border=“0” height=“345”></td> </tr> </tbody></table></td> </tr> |
Now, we add a separate table for the email copy:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <tr> <td valign=“top” align=“center” bgcolor=“#0d1121” style=“padding:35px 70px 30px;” class=“em_padd”><table align=“center” width=“100%” border=“0” cellspacing=“0” cellpadding=“0”> <tr> <td align=“center” valign=“top” style=“font-family:’Open Sans’, Arial, sans-serif; font-size:16px; line-height:30px; color:#ffffff;”>This is a sample email which shall be accommodated in a single paragraph</td> </tr> <tr> <td height=“15” style=“font-size:0px; line-height:0px; height:15px;”> </td> <!—this is space of 15px to separate two paragraphs —> </tr> <tr> <td align=“center” valign=“top” style=“font-family:’Open Sans’, Arial, sans-serif; font-size:18px; line-height:22px; color:#fbeb59; letter-spacing:2px; padding-bottom:12px;”>This is paragraph 2 of font size 18px and #fbeb59 font color with a line spacing of 15px</td> </tr> <tr> <td height=“25” class=“em_h20” style=“font-size:0px; line-height:0px; height:25px;”> </td> <!—this is space of 25px to separate two paragraphs —> </tr> <tr> <td align=“center” valign=“top” style=“font-family:’Open Sans’, Arial, sans-serif; font-size:18px; line-height:22px; color:#fbeb59; text-transform:uppercase; letter-spacing:2px; padding-bottom:12px;”> This is paragraph 3 of font size 18px and #fbeb59 font color with a line spacing of 25px and Uppercase</td> </tr> </table></td> </tr> |
Now, we add a CAN-SPAM compatible footer:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <tr> <td valign=“top” align=“center” bgcolor=“#f6f7f8” style=“padding:38px 30px;” class=“em_padd”><table align=“center” width=“100%” border=“0” cellspacing=“0” cellpadding=“0”> <tr> <td valign=“top” align=“center” style=“padding-bottom:16px;”><table align=“center” border=“0” cellspacing=“0” cellpadding=“0”> <tr> <td valign=“top” align=“center”><a href=“#” target=“_blank” style=“text-decoration:none;”><img src=“images/fb.png” alt=“fb” style=“display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:26px;” border=“0” width=“26” height=“26” /></a></td> <td width=“6” style=“width:6px;”> </td> <td valign=“top” align=“center”><a href=“#” target=“_blank” style=“text-decoration:none;”><img src=“images/tw.png” alt=“tw” style=“display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:27px;” border=“0” width=“27” height=“26” /></a></td> <td width=“6” style=“width:6px;”> </td> <td valign=“top” align=“center”><a href=“#” target=“_blank” style=“text-decoration:none;”><img src=“images/yt.png” alt=“yt” style=“display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:26px;” border=“0” width=“26” height=“26” /></a></td> </tr> </table></td> </tr> <tr> <td align=“center” valign=“top” style=“font-family:’Open Sans’, Arial, sans-serif; font-size:11px; line-height:18px; color:#999999;”><a href=“#” target=“_blank” style=“color:#999999; text-decoration:underline;”>PRIVACY STATEMENT</a> | <a href=“#” target=“_blank” style=“color:#999999; text-decoration:underline;”>TERMS OF SERVICE</a> | <a href=“#” target=“_blank” style=“color:#999999; text-decoration:underline;”>RETURNS</a><br /> © 2017 Companyname. All Rights Reserved.<br /> If you do not wish to receive any further emails from us, please <a href=“#” target=“_blank” style=“text-decoration:none; color:#999999;”>unsubscribe</a></td> </tr> </table></td> </tr> |
Now, before we close the body, we add the following code:
1 | <div class=“em_hide” style=“white-space: nowrap; display: none; font-size:0px; line-height:0px;”> </div> |
This adds extra spacing to force the desktop layout in Gmail
So, your final email template HTML code should be:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=“https://www.w3.org/1999/xhtml” xmlns:v=“urn:schemas-microsoft-com:vml” xmlns:o=“urn:schemas-microsoft-com:office:office”><head> <!—[if gte mso 9]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]—> <title>Christmas Email template</title> <meta http–equiv=“Content-Type” content=“text/html; charset=utf-8”> <meta http–equiv=“X-UA-Compatible” content=“IE=edge”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0 “> <meta name=“format-detection” content=“telephone=no”> <!—[if !mso]><!—> <link href=“https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800” rel=“stylesheet”> <!—<![endif]—> <style type=”text/css”> body { margin: 0 !important; padding: 0 !important; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; -webkit-font-smoothing: antialiased !important; } img { border: 0 !important; outline: none !important; } p { Margin: 0px !important; Padding: 0px !important; } table { border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; } td, a, span { border-collapse: collapse; mso-line-height-rule: exactly; } .ExternalClass * { line-height: 100%; } .em_defaultlink a { color: inherit !important; text-decoration: none !important; } span.MsoHyperlink { mso-style-priority: 99; color: inherit; } span.MsoHyperlinkFollowed { mso-style-priority: 99; color: inherit; } @media only screen and (min-width:481px) and (max-width:699px) { .em_main_table { width: 100% !important; } .em_wrapper { width: 100% !important; } .em_hide { display: none !important; } .em_img { width: 100% !important; height: auto !important; } .em_h20 { height: 20px !important; } .em_padd { padding: 20px 10px !important; } } @media screen and (max-width: 480px) { .em_main_table { width: 100% !important; } .em_wrapper { width: 100% !important; } .em_hide { display: none !important; } .em_img { width: 100% !important; height: auto !important; } .em_h20 { height: 20px !important; } .em_padd { padding: 20px 10px !important; } .em_text1 { font-size: 16px !important; line-height: 24px !important; } u + .em_body .em_full_wrap { width: 100% !important; width: 100vw !important; } } </style> </head> <body class=“em_body” style=“margin:0px; padding:0px;” bgcolor=“#efefef”> <table class=“em_full_wrap” valign=“top” width=“100%” cellspacing=“0” cellpadding=“0” border=“0” bgcolor=“#efefef” align=“center”> <tbody><tr> <td valign=“top” align=“center”><table class=“em_main_table” style=“width:700px;” width=“700” cellspacing=“0” cellpadding=“0” border=“0” align=“center”> <!—Header section—> <tbody><tr> <td style=“padding:15px;” class=“em_padd” valign=“top” bgcolor=“#f6f7f8” align=“center”><table width=“100%” cellspacing=“0” cellpadding=“0” border=“0” align=“center”> <tbody><tr> <td style=“font-family:’Open Sans’, Arial, sans-serif; font-size:12px; line-height:15px; color:#0d1121;” valign=“top” align=“center”>Test Email Sample | <a href=“#” target=“_blank” style=“color:#0d1121; text-decoration:underline;”>View Online</a></td> </tr> </tbody></table></td> </tr> <!—//Header section–> <!—Banner section—> <tr> <td valign=“top” align=“center”><table width=“100%” cellspacing=“0” cellpadding=“0” border=“0” align=“center”> <tbody><tr> <td valign=“top” align=“center”><img class=“em_img” alt=“merry Christmas” style=“display:block; font-family:Arial, sans-serif; font-size:30px; line-height:34px; color:#000000; max-width:700px;” src=“images/05be8b57-6b90-4ebd-ba17-4014c79f2e4b.jpg” width=“700” border=“0” height=“345”></td> </tr> </tbody></table></td> </tr> <!—//Banner section–> <!—Content Text Section—> <tr> <td style=“padding:35px 70px 30px;” class=“em_padd” valign=“top” bgcolor=“#0d1121” align=“center”><table width=“100%” cellspacing=“0” cellpadding=“0” border=“0” align=“center”> <tbody><tr> <td style=“font-family:’Open Sans’, Arial, sans-serif; font-size:16px; line-height:30px; color:#ffffff;” valign=“top” align=“center”>This is a sample email which shall be accommodated in a single paragraph</td> </tr> <tr> <td style=“font-size:0px; line-height:0px; height:15px;” height=“15”> </td> <!——this is space of 15px to separate two paragraphs ——> </tr> <tr> <td style=“font-family:’Open Sans’, Arial, sans-serif; font-size:18px; line-height:22px; color:#fbeb59; letter-spacing:2px; padding-bottom:12px;” valign=“top” align=“center”>This is paragraph 2 of font size 18px and #fbeb59 font color with a line spacing of 15px</td> </tr> <tr> <td class=“em_h20” style=“font-size:0px; line-height:0px; height:25px;” height=“25”> </td> <!——this is space of 25px to separate two paragraphs ——> </tr> <tr> <td style=“font-family:’Open Sans’, Arial, sans-serif; font-size:18px; line-height:22px; color:#fbeb59; text-transform:uppercase; letter-spacing:2px; padding-bottom:12px;” valign=“top” align=“center”> This is paragraph 3 of font size 18px and #fbeb59 font color with a line spacing of 25px and Uppercase</td> </tr> </tbody></table></td> </tr> <!—//Content Text Section–> <!—Footer Section—> <tr> <td style=“padding:38px 30px;” class=“em_padd” valign=“top” bgcolor=“#f6f7f8” align=“center”><table width=“100%” cellspacing=“0” cellpadding=“0” border=“0” align=“center”> <tbody><tr> <td style=“padding-bottom:16px;” valign=“top” align=“center”><table cellspacing=“0” cellpadding=“0” border=“0” align=“center”> <tbody><tr> <td valign=“top” align=“center”><a href=“#” target=“_blank” style=“text-decoration:none;”><img src=“images/fb.png” alt=“fb” style=“display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:26px;” width=“26” border=“0” height=“26”></a></td> <td style=“width:6px;” width=“6”> </td> <td valign=“top” align=“center”><a href=“#” target=“_blank” style=“text-decoration:none;”><img src=“images/tw.png” alt=“tw” style=“display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:27px;” width=“27” border=“0” height=“26”></a></td> <td style=“width:6px;” width=“6”> </td> <td valign=“top” align=“center”><a href=“#” target=“_blank” style=“text-decoration:none;”><img src=“images/yt.png” alt=“yt” style=“display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:26px;” width=“26” border=“0” height=“26”></a></td> </tr> </tbody></table></td> </tr> <tr> <td style=“font-family:’Open Sans’, Arial, sans-serif; font-size:11px; line-height:18px; color:#999999;” valign=“top” align=“center”><a href=“#” target=“_blank” style=“color:#999999; text-decoration:underline;”>PRIVACY STATEMENT</a> | <a href=“#” target=“_blank” style=“color:#999999; text-decoration:underline;”>TERMS OF SERVICE</a> | <a href=“#” target=“_blank” style=“color:#999999; text-decoration:underline;”>RETURNS</a><br> © 2017 Companyname. All Rights Reserved.<br> If you do not wish to receive any further emails from us, please <a href=“#” target=“_blank” style=“text-decoration:none; color:#999999;”>unsubscribe</a></td> </tr> </tbody></table></td> </tr> <tr> <td class=“em_hide” style=“line-height:1px;min-width:700px;background-color:#ffffff;”><img alt=“” src=“images/spacer.gif” style=“max-height:1px; min-height:1px; display:block; width:700px; min-width:700px;” width=“700” border=“0” height=“1”></td> </tr> </tbody></table></td> </tr> </tbody></table> <div class=“em_hide” style=“white-space: nowrap; display: none; font-size:0px; line-height:0px;”> </div> </body></html> |
There you go! You’ve successfully created an HTML Email! You can use this HTML Email Example and create your own.
Desktop Version
Mobile View
Wrapping Up
With the help of this step-by-step guide, you can build an HTML email template that can be used for your email marketing strategy. The above methodology is just one of the many processes used to train our developers and test the email templates rigorously using tools like Email on Acid to deliver pixel perfect results as per our clients’ requirements. You can easily use this HTML Email code to create Mailchimp Email Templates, Pardot Email Templates, Marketo, Salesforce Email Templates and many other ESP newsletter templates as well.
Ideally, being an email marketer you need to dabble into various aspects of email, including email design, email coding and template testing. At the same time, most brands and agencies partner with us for their email template production needs to deliver high converting email marketing campaigns.
Kevin George
Latest posts by Kevin George (see all)
7 Types of Email Campaigns You Should Be Sending From Salesforce Marketing Cloud
Email Sign Up Forms - The Types and How to Make Them Stand Out