The most commonly used form of communication for both personal and professional purposes is Email. It is a great way to reach a large audience in a visually appealing manner. Whether you are sending out a newsletter, promotional material, or important updates. In fact, emails are one of the most channels for digital marketing.
HTML emails provide a more visually appealing, interactive and customizable experience when compared to random plain text. However, it is worth noting that, while creating this template; ensure it is optimised for various screen sizes e.g tablets and smartphones etc. Also, keep in mind that email clients have different options for supporting HTML and CSS but using stipulated guidelines and tools for testing, it is very possible to create a professional and acceptable template.
In this tutorial, we'll go through the process of creating a simple, yet professional HTML email template fully optimised for cross-platform compatibility. While taking note of basic technicalities, we will explore practices, tips and tricks, and necessary tools you need to get started.
For proper understanding, we will take it one stage beginning with the process before the coding and finally to the process after the creation is completed.
BEFORE CODING YOUR TEMPLATE
a. Define the purpose
Identify whether the email is for updates, marketing or news; as this will guide your decision and structure of the template from style, to even editor.
b. Choose a layout
At this point, you should have defined the purpose of your email. So the next thing is to decide on the layout and structure of your email template. There are two main types of email layouts:
Hybrid Layout: This is a combination of tables and inline CSS styles. This layout can be difficult to work with because of the restrictions on CSS but is however supported by most email clients.
Responsive Layout: Thought to be more compatible, this layout uses media queries to adjust the layout of the email based on the screen size of the device. For this tutorial, we will be using the responsive layout.
c. Choose an Email Service Provider (ESP)
Some popular ESP you can consider are Mailchimp and Constant Contact. While deciding, ensure you select the one that meets your specific needs because all ESP differ in features and limitations e.g size of the mailing list, cost of the service etc.
d. Choose an email client and code editor
By this we mean, some popular email clients include Gmail, Yahoo, and Outlook, while popular code editors include Notepad++, Sublime Text, and Visual Studio Code.
DESIGN YOUR TEMPLATE
It’s time to design your template. When designing, try to make your designs simple and straightforward to ensure compatibility among different email clients. Your design can include images, text and buttons.
Here are a few design sections, best practices and what they should include:
a. The header
This section builds the first impression so make it count. It should include your logo and header image that accurately represents your brand or personality.
b. The body
Plan to make it focused, clear and concise. It should include headings, subheadings, and images to break up the content and make it easy to read.
c. The footer
It should include important information such as your address, links to social media, and an unsubscribe link. Plan to make it simple and uncluttered with clear fonts.
d. Use tables to structure your email
Due to compatibility issues with CSS, it is best for you to structure the email using tables, make sure to use the cell padding and cell spacing attributes to create space between elements.
e. Use inline CSS
One important factor to consider when designing your email template is the use of CSS. While CSS provides a lot of styling options, many email clients do not support CSS in the same way that web browsers do. Illustration below:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
To ensure that your email design is consistent across different email clients, it’s best to use inline CSS not embedded. This means that the CSS is included directly within the HTML, rather than in a separate file.
f. Avoid using CSS float and positioning
CSS float and positioning are not supported by all email clients, so it’s best to avoid using them in your email design. Instead, use tables to structure your email. Use ALT tags for images
CODE YOUR TEMPLATE
Once you have designed your email template, it's time to code it. To create an HTML email template, you need to have a basic understanding of HTML and CSS.
Here is a step-by-step guide to creating an HTML email template:
a. Start with the basic structure of an HTML document. This includes the doctype, head, and body elements.
Php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Email Template</title>
</head>
<body>
</body>
</html>
b. Define the styles for your template. In an HTML email, it's important to use inline styles, as email clients may not support the use of external style sheets.
Php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Email Template</title>
</head>
<body style="background-color: #f2f2f2; font-family: Arial, sans-serif;">
</body>
</html>
c. Add a header section to the top of your template. This could include your company logo, a navigation menu, or other branding elements.
Php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Email Template</title>
</head>
<body style="background-color: #f2f2f2; font-family: Arial, sans-serif;">
<table align="center" width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-collapse: collapse;">
<tr>
<td style="text-align: center; padding: 20px 0;">
<img src="your-logo.png" alt="Your Company">
</td>
</tr>
</table>
</body>
</html>
d. Add the main content section to the middle of your template. This could include text, images, or other media.
Php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Email Template</title>
</head>
<body style="background-color: #f2f2f2; font-family: Arial, sans-serif;">
<table align="center" width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-collapse: collapse;">
<tr>
<td style="text-align: center; padding: 20px 0;">
<img src="your-logo.png" alt="Your Company">
</td>
</tr>
<tr>
<td style="padding: 20px;">
<h1 style="margin: 0 0 20px; font-size: 24px;">Welcome to Our Newsletter</h1>
<p style="margin: 0 0 20px; font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo lacus a enim rutrum, eu blandit velit bland
e. Add Media Queries
Media queries allow you to apply different CSS styles based on the device and screen size of the email client. Here's how you can add media queries to your HTML email template:
i. Start with a basic HTML email structure, including the head and body sections:
<html>
<head>
<style type="text/css">
/* Your base styles */
</style>
</head>
<body>
<!-- Your email content -->
</body>
</html>
ii. Within the <style> tag, define your media query by using the @media rule. For example:
<style type="text/css">
/* Your base styles */
@media only screen and (max-width: 600px) {
/* Your styles for small screens */
}
</style>
iii. Inside the media query, add the styles that you want to apply only to devices with a screen width of 600 pixels or less. These styles will override the base styles you defined outside the media query:
<style type="text/css">
/* Your base styles */
@media only screen and (max-width: 600px) {
/* Your styles for small screens */
table {
width: 100% !important;
}
}
</style>
iv. Repeat steps 2 and 3 for any other media queries you need to create, adjusting the media conditions and styles as necessary.
TEST YOUR TEMPLATE FOR COMPATIBILITY AND ACCEPTANCE
After you are done with coding the email template, it’s time to test the template in all possible email clients to be sure of compatibility.
Popular email testing tools to use are Litmus or Email on Acid, which will allow you to preview your email in a variety of email clients and devices.
During the test, look out for issues in layout, font compatibility, image rendering, and functionality. If you find any issues, you may need to make adjustments to your HTML or CSS code.
IMPLEMENT YOUR EMAIL TEMPLATE
Once your email template has been tested and is working correctly, it's time to implement it in your ESP. Most ESPs will have a feature that allows you to upload your HTML email template or you can paste your HTML code directly into the ESP's email editor.