Email marketing has become an essential part of digital marketing strategies for businesses of all shapes & sizes. But what customers need is an interactive & interesting email. For this, organisations are shifting their focus to responsive emails that catch & retain the attention of their customers, drive traffic and boost sales.
But creating a responsive HTML email template from scratch can seem like a bit of a challenge. But with the right knowledge & guidance, it can become a piece of cake. To make it so, here we have listed a step-by-step process of how to create a responsive HTML email templates effortlessly!
- Choose HTML Email Doctype
The very first thing you’ll be creating for the email template is the email doctype. Ideally, choose a type that is the most compatible and works best for most email clients. We suggest you choose either HTML5 doctype or XHTML doctype for your responsive email template.
2. Compose HTML Head Metadata
The header of your HTML document will ideally include meta tags. Meta tags or metadata are used to let your email client or the browser know how you want to display your template content. To do this, follow the given steps:
- Declare the character set of the document. You can choose UTF8, the standard character set for alphabets & numbers on the internet.
- Add a compatibility meta tag for browser rendering.
- Configure the template layout for mobile browsers.
- Configure the email template for dark mode compatibility with the last set of meta tags.
3. Add Internal CSS Style
In this step, you need to include the internal CSS styling in the <head> section of the HTML document, below the meta tags and title. Then, use the <style> tag along with media queries to execute the internal CSS styling.
4. Add Media Queries
Media queries are essential to specify the CSS styling within the HTML framework. However, this is particularly applicable for modern email clients, like Google, and doesn’t work on older clients, like Outlook, where creating an inline CSS is necessary. So for modern email clients, add the media queries inside the <style> tag of the <head> section.
5. Build the HTML Email Body
Now comes the email body. This will set the template’s appearance in browsers and email clients. To do this, try to begin with a clean canvas as much as possible. Strip some default styling from the HTML document and configure the internal style sheet as per preference. Set the margin and padding to zero to remove any spacing at the edges. Also, make sure to capitalise the M in margin for better rendering in Windows email clients. You can also add a background colour.
6. Add Email Preheader Text
The email preheader text refers to the preview text of the email message. In HTML, you’ll need to add the preheader text through raw code. Ideally, make sure that the length of the preheader text is somewhere between 40-130 characters. This ensures that the message is short enough to fit even mobile phone layouts, allowing better responsiveness. Now, where the code is concerned, add the code for email preview immediately beneath and inside the <div class=”wrapper”> and <div class=”outer”> tags.
7. Include Social Media Icon Header
Don’t forget to add the social media icons in the header of your email template. To do this, add a new table row by starting the section with the <tr> table row tag, followed by a <td> tag for table data. For the header, add some padding in the inner <td> tag before adding the social media icon images within the <td> tag.
8. Add the Logo Section
Now add the logo section of the template in the same way as before and add some padding similarly.
9. Add Email Banner Image
Adding the email banner image in HTML requires minimum coding. There’s no need for any spacing or styling. You need to add a set width to the image using the ‘width’ attribute.
10. Build a Responsive Email Template Layout
To pull everything together, you’ll need to build an HTML email template layout. You can create a three-column email template for optimum responsiveness. To do that, follow the given steps:
- Add styling to images like the previous sections but instead of using the second <td> tag, add a “three columns” class to the element to specify the individual columns.
- Style this section with the class and centre align the content using the ‘text-align: centre.’
- Add some spacing over & below the section to differentiate it from the template banner image and footer, respectively.
- Apply ‘font size:0’ so that the 200px columns get easily aligned.
- To add the email columns individually, create a new <table> and name it “column” to identify it with the first of the three columns. Create a <td> tag inside the table to apply to space and separate the column content from the allotted 200px width of the template edge.
- To ensure that the three columns maintain responsiveness, stack the columns by using the ‘display: inline-block style declaration and the ‘vertical-align: top’ styling.
- For padding around the columns, apply the 15px space.
- Add content inside the columns, within the <tr> and <td> tags.
You can learn the more intrinsic details of creating an HTML table by taking TAFE courses in programming & coding.
11. Add the Email Footer Section
Once the other basics & configurations of the HTML email template body are covered, add the email footer section. Include a simple border spacer before & after the template footer. Use the header background colour for the spacer to make it well put. Next, apply colours to the background of the inside of the footer, images, texts, and links.
