Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

A step-by-step Guide to Create Your Own HTML Email

From inception to finally reaching your subscribers’ inbox, an Email goes through various stages. Initially, the purpose of sending that specific email is finalized by the email marketer. The email copy is created along with the wireframe of the email. It is then passed to the email designer, who creates a prototype of the email design based on the wireframe. The finalized design is then forwarded to the email developer, who transforms the design into a functional HTML file, which is loaded in the ESP and sent to the subscribers.

Owing to the number of people involved in the creation of an email, the dependency involved in getting any change done, is quite time-consuming. To ease your work and to avoid the time put in by the email developer to make a small correction, we shall teach you how to create an HTML email, which you can refer to for basic troubleshooting of your email templates.

P.S: Even though this guide is written for someone with little to no technical knowledge, always rely on your email developer for corrections and use this guide only in dire conditions.

Also, never 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 or edit the code in the code editor of your ESP.

HTML Basics

Any HTML template is made of two parts:

  1. Header section: Any code placed between and is considered, by the rendering engine of an email client, to be the header section. Any media queries, styling and CSS animations are specified in this section.
  2. Body: Any code placed between and is the body section and the rendering engine uses the code to create the structure of your email.

Step 1: Preparing your HTML template

The head section of any email resembles the following code:


Test Email Sample

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 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.


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.


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

tag. When a subscriber clicks on “view online”, the title of the email is displayed on the browser tab. <h3>Step 2: Styling your email</h3> <p>Whatever styling you are going to implement in your email such as text formatting, image size, media queries go between the </p> <p><strong>Text formatting</strong>:</p> <p>In case you need to add a centralized formatting condition for any text, you can specify the attributes in the specific class.</p> <p>e.g. in order to disable text decoration in hyperlinks, add</p><pre class="crayon-plain-tag">.em_defaultlink a { color: inherit !important; text-decoration: none !important; }</pre><p><strong>Media Queries</strong>:</p> <p>In case you are coding a responsive email, the media queries need to be added in the following format.</p><pre class="crayon-plain-tag">@media only screen and (min-width: ___px) and (max-width: ___px) { .(class_name) { (attributes to be implemented) } }</pre><p>For example, consider the following media query:</p><pre class="crayon-plain-tag">@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; } }</pre><p>When the email is viewed in a device that is between the screen width of 481 and 699px:</p> <ul><li>The width of the email (em_main_table) is forced to be 100% owing to “width: 100% !important;” attribute.</li> <li>The section that is associated with em.hide class shall be hidden due to “display:none !important;” attribute</li> <li>The section that is associated with em.h20 class will have the fixed height of 20px due to “height: 20px !important;” attribute</li> <li>Any element associated with class em_padd will have a fixed padding of 20px (horizontal) and 10px (vertical).</li> </ul><p><em><span style="color: #f26522;">P.S: !important forces the rendering engine to not make any alterations to the media query.</span></em></p> <p>For mobile layout, separate media queries are specified to be activated at screen widths lesser than 480px.</p> <p><strong>Interactivity</strong>:</p> <p>In case you wish to include any interactivity in your email, the CSS part of the code is to be added before you close the </p> section. <p>For including Navigation Menu and Carousel in emails, we have created DIY tools; do check them out by clicking here and here.</p> <h3>Step 3: Final code</h3> <p>So, our final </p> code looks like<pre class="crayon-plain-tag"> <title>Test Email Sample

Step 4: Building your

The 600px range for emails 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 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 #f6f7f8.

tag" >

In this we add a table that is center aligned at 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.

Create-email-html-template-View-Online

Now, we add the hero image.

Create-email-html-template-Hero-Images

Now, we add a separate table for the email copy:

Create-email-html-template-email-copy

Now, we add a CAN-SPAM compatible footer:

Create-email-html-template-Email-Footer

Now, before we close the body, we add the following code:

This adds extra spacing to force the desktop layout in Gmail

So, your final email code should be:


Christmas Email template
Test Email Sample | View Online
Welcome to EmailMonks Newsletter
This is a sample email which shall be accommodated in a single paragraph
 
This is paragraph 2 of font size 18px and #fbeb59 font color with a line spacing of 15px
 
This is paragraph 3 of font size 18px and #fbeb59 font color with a line spacing of 25px and Uppercase
fb   tw   yt
PRIVACY STATEMENT | TERMS OF SERVICE | RETURNS
© 2017 Companyname. All Rights Reserved.
If you do not wish to receive any further emails from us, please unsubscribe
Test Email Sample | View Online
merry Christmas
This is a sample email which shall be accommodated in a single paragraph
 
This is paragraph 2 of font size 18px and #fbeb59 font color with a line spacing of 15px
 
This is paragraph 3 of font size 18px and #fbeb59 font color with a line spacing of 25px and Uppercase
fb   tw   yt
PRIVACY STATEMENT | TERMS OF SERVICE | RETURNS
© 2017 Companyname. All Rights Reserved.
If you do not wish to receive any further emails from us, please unsubscribe

There you go! You’ve successfully created an HTML Email!

Create-email-html-template-Email-Footer

Desktop Version

Create-email-html-template-Mobile-View

Mobile View

Wrapping Up:

By following this step by step guide, you can create an HTML template that can be used for any last moment email campaigns.

P.S: for those who are looking for an easier way out, we even have readymade Master Templates that you can modify as per your brand requirements.

The post A step-by-step Guide to Create Your Own HTML Email appeared first on Email Monks Blog: Email Marketing Tips & Best Practices.



This post first appeared on Email Monks Blog: Email Marketing Tips & Best Pr, please read the originial post: here

Share the post

A step-by-step Guide to Create Your Own HTML Email

×

Subscribe to Email Monks Blog: Email Marketing Tips & Best Pr

Get updates delivered right to your inbox!

Thank you for your subscription

×