Email is the King! Even after its inception 4 decades ago, email marketing is still the most popular medium of communication for marketers to build meaningful relations with their customers. If you take apart the layers, the core of a successful email campaign is a well-designed and attractive email template.
The quest for creating a flawless email experience is so high that monthly search volume for email templates is a whopping 8100. This is an indication that many email marketers wish to break away from the default email templates that ESPs offer in their template library. We at EmailMonks, understand your pain and this article is an honest effort to answer all the questions and troubleshoot the hassles involved in creating an email template.
Purpose of this article:
- For a marketer to understand what goes on behind-the-scene in developing an email template
- For a designer to learn the minimum elements required in an email and addition of different elements so as to create different emails
- For a developer to identify the challenges faced while coding an email and also while testing it across different email clients
What is an email template?
Everyone knows that an email is a combination of a subject line, a quirky email copy, an actionable call-to-action (CTA) and a CAN-SPAM compatible footer. Anything you add above these bare minimum email elements are like the seasonings you add to flavor your email template.
- Stick to the bones and you have a plain text email.
- Include attractive images and colorful text and you have a HTML email template.
- Include some CSS animations and you have an interactive email.
Isn’t it fascinating?
Let’s understand about plain text email and understand it’s significance in 2018.
Introduction to plain text email
Before the integration of HTML coding in the early 1990’s, emails were plain text emails available only in Unicode formatting (i.e. Unicode font and left aligned text only). Even after HTML was widely adopted, plain text emails still hold its own importance and till date, ESPs send a plain text version alongwith their HTML counterpart. Also, many email marketers make it a point to create a plain text version, as emails risk getting into spam folders. Also, some people are considered to prefer plain text emails to html.
The advantage of using plain text emails are:
- To supersede the spam filters of certain email clients, like Outlook and Gmail, as they require the plain text versions of html emails.
- Some email clients do not support html versions, which means that your html
Although, plain text emails are getting better open rates than html version, it lacks the luster of HTML emails and so has to rely on strong email copy to improve the click rates.
HTML emails and its variations
Coming to the second type of emails, HTML emails are the feature-rich version of plain text emails. Irrespective of using <div> or <table>, HTML emails have a structure, which can be manipulated to create an attractive email like this by Uniqlo:
Or an out-of-box email design like this one by Random Penguin House:
The advantage of using HTML emails are:
- When the best practices are followed, even HTML emails can avoid the spam filters.
- Most brands like to create a seamless experience across their website, emails and even landing page and HTML helps in achieving it.
- Different hyperlinks can be linked to different buttons in an aesthetic way.
- A picture as you know speaks many times more than words can describe, and image support in HTML helps in conversing better.
A custom-made template or ready-made template
ESPs have a library of email templates for you to use in your email campaigns. This is greatly helpful for email marketers who are starting out. But are you focusing on building relationships, rather than building brand identity. Moreover, ready-made templates are great opportunity for sending last-moment email campaigns. These email templates are mostly free or available for a small fee – a great way for reducing overall template production cost.
Unfortunately, you however tend to compromise on the brand identity, scope of customization and exclusivity.
On the other hand, custom-made templates are unique designs & customized to your requirement. For creating an interactive email design, you need to create a custom-made template. You create a brand identity that sets your email apart from the rest (once opened, obviously). Yet good things come to those who wait. Creating a custom template involves a lot more people right from design to code and testing the custom template. So, the overall turnaround time and cost need to weighed in when planning a custom email template.
Starting with your email template
It is time for action; it is time to plan your email template. Email templates are like clothes, each outfit is tailored for certain occasion and has certain purpose. While welcome emails are short in email copy and more visually attractive, lead nurture emails tend to be descriptive with individual CTA buttons. Again, transactional emails have the receipt of purchase along with some cross-selling. So, while creating your first email template, you need to start with…
Which type of email will it be? What goals will it satiate?
In the buyer journey of an email subscriber, there are a minimum of 5 (or 6, if you are an ecommerce brand) email types you need to send them.
- Welcome Email: An email thanking the subscriber for subscribing. The email copy should introduce your brand and the call-to-action should prompt the subscriber to complete their profile or update their preferences.
- Newsletter Email: This periodic email educates and informs the subscribers about your brand and its products / services. Such emails should make your subscribers interested to make a purchase from your brand.
- Sale Promotion / Announcement Email: The email that converts an email subscriber into a customer. This email will be purely marketing in tone and should make the subscriber believe that this purchase will solve the problem ‘get the job done’ that brought them to your brand in the first place.
- Order receipt Email: An email to confirm the purchase made by the subscriber. This email should be triggered when a subscriber makes a purchase and can be used to promote other relevant products but the ratio needs to be 80% transactional and 20% promotional.
- Re-engagement Email: Not all subscribers are going to stay active and keep opening your emails. This email will give a little nudge to such dormant subscribers and may bring them back to your sales cycle.
- (For ecommerce) Cart Abandonment Email: Owing to many reasons, a well-nurtured subscriber may abandon their purchase mid-way. It is toxic to your business and this email will try to draw such abandoners back and re-unites them with their carts. A must-have email for ecommerce emails.
Now depending on the industry your brand belongs to, there will be more emails that you are going to need such as birthday/anniversary emails, survey / review emails, re-order emails to name a few.
What are the pre-requisites for designing an email template
Once you finalize your email type, next step is to get it designed. The email design is a very important stage as it creates your visual identity and defines the brand personality. So before you rush off to sending your design requirements, consider the following pre-requisites.
- Your brand guidelines
- Images of your products
- Target Audience / Buyer’s Persona
- Are you going to A/B test?
- Will the mobile layout be separate?
- Is there any interactivity involved? If yes, which interactivity? Know the different interactive design elements you can use in your emails
- Email content copy (Discussed later)
- Hyperlinks to the landing page
Tools to see competitors email templates & Get inspired!
It is good to have some competition. By studying the email designs / templates of your competition you can understand the ongoing trends in your industry and decide either to follow them or create a new path for your brand. No matter which option you choose, following tools can help you scope out email templates for inspirations and competition.
- Really Good Emails
- Kurated Emails
- EmailMonks Inspiration
- Rue La la (For Fashion)
- Rival Explorer
- Beetle Email
What will the email copy contain?
While email design shall visually allure your subscriber, email copy is where they get to know about the message your email wants to communicate. Do you know, your email copy actually works the magic well before the email is even opened? Well, we are talking about ‘subject lines’.
An email copy essentially contains following elements:
- Pre-header and Subject line: This is the first thing that your subscribers are going to see. 80% of email opens depend on your subject line. Your subject line should hint what your email copy is about i.e. the purpose needs to be communicated here. Make sure it is not misleading.
- Body Copy: The meat of your email is the body copy. The conversation started by the subject line needs to be continued here. Your email needs to provide vital information and drive the subscriber to a landing page for more information. So, your body copy needs to be short and crisp.
CTA copy: The point where the effectiveness of your body copy is tested, the CTA button also needs to have effective copy. The CTA copy needs to be actionable such as ‘Start my free trial’ or ‘Download my copy’.
Unsure how different CTA copy can affect your email performance? Here’s an insight to help you >>
- Before you sign off: The footer copy or your email signature is where you sign off but most email marketers don’t utilize it the proper way. Email signature is a real estate where a small amount of marketing can be effective.
Formatting and text alignment is as important as the email copy as it helps subscribers to scan through your email with ease. Yet your email copy has better chance of converting when you include…
Personalization in email
Approximately 60% people have shared of unsubscribing owing to irrelevant content. Personalization by addressing your subscriber by their first name is a great step but only the first step to winning their hearts and trust. Any subscriber shares their email address in exchange of engaging content that is based on their preferences instead what you want them to read. Observe their online behavior and the stage of their buyers journey, to customize the content as per their requirement.
Designing the email template
Now that you have the decided the email type, it is time to move forward to understand the email template from the design point-of-view. Email design is an important factor when it comes to emails. Combined with the email copy, the email design is the frontend of your email that will engage with your subscribers.
What does email design contain?
Any email design is based on 5 pillars.
Email Layout: An email layout dictates the placement and hierarchy of different elements of your email. A good email layout will help a subscriber scan over the content and yet take away the gist of your email copy. There are two basic email layout style:
Single column layout where the email elements are stacked in a single column for minimal eye movement. This is layout is mostly preferred for creating mobile layout of emails as this layout leverages the small screen width to accommodate all the email elements without cluttering.
The two column layout as the name suggests has the email elements separated in two different columns. Generally, the email elements are placed in a zig-zag pattern as subscribers are known to scan in a ‘F’ pattern and zig-zag layout combined with ample whitespace can guide the subscriber’s eye path.
The header and footer are also a part of the email layout, even though they will remain static across all different types of emails.
Fonts / Typography: While the email copy conveys the message of your email, how you present the message also plays a vital role. This is where typography as well as the formatting comes into picture. Different fonts trigger different emotions in our minds and so it is important to choose the correct font.
While emails don’t have a wide support for custom web fonts, there are different ways to implement them. Check out an extensive infographic on Typography in emails >>
- Colors: Just like typography, different colors also communicate different emotions. The background colors, CTA button color, colors on the hyperlinks as well as the images are the part of brand guideline and define an email personality.
- Images and Visual media: A picture speaks a thousand words. By balancing text and visuals in your email, you encourage more interaction from your subscribers, since the email message is not lost behind a wall of words. This is specially important for online retails and ecommerce industry where a visual of the product enhances the description.
- CTA button: The point that measures how effective your email copy was, i.e. CTA button is what completes your email design. While the email copy may not be able to communicate your message completely, the CTA button redirects the subscriber to a relevant landing page and should never be missed while designing an email.
The typography and colors in an email are part of the brand guidelines that needs to be also followed while designing an email.
Importance of sticking to branding guidelines
Popular leaders and orators draw in large crowd of followers, thanks to their empowering personalities. Similarly, in order to make your emails engaging, it is important to have a towering brand personality also. You can easily replicate the brand personality in your emails by following the brand guidelines. Brand guidelines are a set of rules regarding how to use your branding elements such as colors, fonts, logos, watermarks and brand tone.
An email following brand guidelines is more identifiable and helps subscribers to build trust on your brand. Unfortunately, 38% of surveyed brands didn’t follow brand guidelines as per Litmus’ 2018 State of Email survey of 3000 marketers globally.
Why implementing a visual hierarchy can help conversions
Certain elements should catch the subscribers’ attention when they open the email. This is why creating a visual hierarchy right from the first fold is important. Most email designers visualize an inverted triangle while designing an email (like shown below) and place the most important information such as sale announcement, hero Images, CTA buttons, navigation buttons, etc. in such a way that the subscribers’ eye pattern is guided from a broad path in the beginning, ending to a point which is the centre of the CTA button.
As you can see in the above email from inVision, proper text formatting and semantic tags also create a textual hierarchy which aids in the visual hierarchy.
Let’s explore two elements of visual hierarchy that are sometimes placed together and sometimes at the extremes.
1. Hero image visuals – Stock photo or illustration
Hero image doesn’t fight against crimes or fly around saving damsels in distress but is a term adopted from the print industry, it is given to an image that prominently covers the entire width of a page. Hero images are placed in the first fold to act as an introduction to the email, with brands sometimes using compelling text within the image to tempt the subscriber to take action in some way.
Hero images either feature a real life photograph or an illustration to create the visual charm that entices the subscriber to open the email. Just like photographs of a product in real life helps subscriber visualize; illustration help subscribers visualize a concept which is not tangible.
Photographs as hero image are mostly used in online retails, ecommerce, travel & hospitality like the following email by the Plum Guide.
Illustrations as hero image are mostly used in industries providing I.T., SAAS or digital experience service like this email by Dropbox.
2. Placement of CTA button
Now, this is highly crucial. As stated earlier, CTA button is a testament of how well the email was able to convert your subscribers into customers. Owing to this, the placement of CTA button is a point that has been argued since long. Most marketers stand by their faith that no subscriber would be willing to click a CTA button without learning more from the email copy. However, there stands a drawback in doing so – their are chances of less people being inclined to scroll back to the top to click the CTA and hamper click rates if there is no secondary CTA button at the bottom of email. So, make sure your CTA placement is accurate. You can also A/B test.
On the other hand, marketers have managed to gain decent click rate from placing a CTA button in the first fold of the email.
We suggest that if your email is longer than 2 scrolls, it is a good practice to add another CTA button at the bottom of the email. Additionally, you could also place a fixed CTA button in your email >>
Things to consider while designing an email
Responsive email design
Roughly 34% of emails are opened in mobile devices and with different devices available in the market having different display sizes, it is very important that your emails are rendered flawlessly in all your subscribers’ devices. Owing to this most email marketers prefer to have a ‘mobile-first’ approach when having their email designed.
Mobile-first approach means having a one column layout created in a 600px width and adjusting the elements in a two column layout for desktop layout (only if needed). Additionally, responsive email design governs following factors:
- Use preheader text
- Use minimal body copy
- Use a clear and easy to click CTA button
- Increase the font size of body copy compared to desktop layout
- Images are resized appropriately
Current trends in email design
There are different styles of designs that have been used in web designs since long; we have observed some brands adopting the same in emails. These are mainly campaign or event specific email designs, yet they prove that email designers/brands are attempting to make them trend.
Color crossover (Gradient backgrounds): One of the most popular web designs, the gradient background, was overshadowed by the introduction of flat / material design in early 2013. Like a phoenix, gradient backgrounds are making a huge comeback with designers and brands like Jack Threads and American Eagle Outfitters using gradients of two contrasting colors in their emails.
Double Exposure: Superimposing two different images to create an altogether new form of visual medium was discovered by photographers while accidentally exposing a photographic film with different images.
Later on, designers started combining different images and layers to recreate artistic and trendy designs for the digital realm. While it is being widely used in posters and ad copies, email designers shall soon be using this illusion in email designs too.
Typography: The practice of email designers using custom stylized fonts is a thing of the past. Yet email designers using big bold text over the hero image (as a part of the email copy) is a twist to the existing trend. This email design by apparel retailer Banana Republic is a prime example of the same.
White Space/ Negative space design: One of the design trends that serves a purpose along with aesthetics is the ample use of white space, which not only improves the readability of the email copy, but also ensures that the email subscriber’s eyes are not strained while skimming through the email. Even though this is a trend that has continued for years, Monks predict that in addition to white space, email developers shall also dabble with negative space in email designs. Meanwhile, brands such as Sugarfix and Everlane have been doing well while using white space in their emails.
Single tone / Single palette (Monochromatic): Colors are all about shades, tones and tints. Yet, sometimes between the emails with colors picked straight from a bad acid trip, a monochromatic email can be a welcome change. Now with most brands acknowledging the importance of following branding guidelines , there is a chance that some more brands may come up with monochromatic emails.
Illustrations: Another favorite amongst most email designers, there had been a dip in the emails featuring illustrations. An illustration in email gives the feel of a brand that has a fun tone to it without edging out business goals. Brands such as Post Planner and Anthropologie have been consistently sending out emails that feature an Illustration.
Glitch Design: Taking a leaf out of old VHS tapes and CRT monitors, the glitch design has been a huge hit in the digital domain with many designers using the Glitch effect in various webpages, logo designs and other creative assets to recreate a retro look. With brands such as Steve Madden using the glitch effect only for its Cyber Monday promotions, there is chance that other brands shall also be inspired.
Minimalism: Somewhat similar to emails making use of white space, minimalistic emails are those which convey the message using very few design elements as well as a compact email copy. In the below email by Code School, there is a hero image of the courses they offer followed by a short description and relevant CTA button.
Contrasting colors and Pastel colors: One of the most radical design trends is that of using pastel and soft backgrounds with harsh and contrasting elements, so as to create attention all through the email. Based on the colors used, the email tone can be dominating like the one by Spotify or professional yet casual like the one by Church Media.
- Stock yet relevant images: Stock images are a boon to agencies who can’t spend an arm and a leg for a custom photoshoot. However, brands have made stock photos infamous amongst subscribers by using cheesy, non-authentic, outdated or irrelevant stock images. While the email looks made-up, it also loses the credibility. 2017 was witness to brands trying to eliminate the perception about stock images by using niche, relevant and actionable stock images.
Seamless design between email and landing page
Any email campaign strategy is incomplete if you only focus on the email template. An email copy only has a limited space to communicate everything and so the goal of such an email is to redirect the subscriber to a landing page by peeking their interest. Subscribers expect a seamless transition across all channels and so most brands tend to maintain a seamless design between email and landing page. This means using same design style, images and tones in both emails and landing page.
As you can see, J. Hilburn has a seamless design between both its email and landing page.
Coding the email template
Now that the email design is ready, it is time to code the 2-dimensional design into an email design. Getting an email rendered perfectly across all email clients is the dream that every email marketer and developer follows. Let’s look behind the scenes of coding an email template.
Most commonly used tags
An email marketer doesn’t need to poke their head into the email coding, yet having a basic knowledge about common used HTML tags in email coding can help you troubleshoot minor bugs in your emails yourself.
|<head></head>||Any style guide or media query is placed in the head section. This section is not visible to the end user.|
|<body></body>||This is the flesh of your email and anything placed here is visible to the subscriber.|
|<table>||Used to create a table|
|<tr>||Creates a row within the table|
|<td>||Creates a cell within the row|
|<a>||Used to hyperlinking anything placed in between|
|<img>||Specifies which image to be embedded from the source|
|<h1>,<h2>,<h3>,…||Heading tags to specify the formatting|
|<p>||Anything placed here will be shown as normal text|
|<ol>||Creates an ordered / numbered list|
|<ul>||Creates an unordered / bulleted list|
|<li>||Adds a list item|
|<span>||Implements a style to text as per the specified style sheet|
Workarounds for different email clients
A plain looking email without much bells and whistles involved will render perfectly across all email clients without much issues. Yet it is important to take care about rendering and workarounds for 3 main email clients:
- Apple Mail
Common challenges faced
<div> vs <table>
HTML was primarily used to code webpages, and developers adopted the practice to code emails. While webpage coding has evolved into providing better user experience using different coding technologies, emails are stuck to be coded using <table> layout.
While email clients like Apple Mail, iOS mail, Gmail and Yahoo support <div> html tag, email developers still code in table layout as Microsoft Outlook is still stuck to prehistoric rendering engines that doesn’t support <div>. Each <div> section can be nested inside individual <td> but that would increase the code weight. Exceed the 120kb limit and Gmail will clip your email >>
Coding for maximum compatibility or selective email clients?
Different email clients use different rendering engines to render an email. So there is a chance that some of your email subscribers may not be able to see the email the way you had visualized. While ‘View Online’ will help subscribers to see the original email but it involves more clicks and this may not be helpful from the conversion point of view.
At such a point you need to weigh in the pros & cons and code an email for maximum compatibility. In case you are including an interactive element in your email, it is a good practice to add a fallback support but it will restrict your creativity. Alternatively, you can also segment your email list based on the email clients and specifically send the email to only those subscribers with supporting email clients.
Webpage developers specify stylesheets either in the <head> section or by linking it to an external stylesheet. Email developers don’t have such a freedom and have to inline them. This increases the overall bulk of the code but reduces the overall loading speed of an email.
Tools to test your email template
An email template that has no gone through a stringent QA or testing process is a recipe to quickly reduce your email subscribers, and also the sign of an inexperienced email marketer. EmailMonks provide hand-coded email templates that are tested against 40+ email clients. Yet in case you make any alterations, it is a good practice to test your email templates once your email developer sends them across.
- Email template rendering
- HTML validation
- CSS inlining
- Litmus Builder
- CSS inliner by Campaign Monitor
- CSS inliner by HTMLemail.io
- Accessibility (Discussed later)
- IA Toolkit
- Google’s Accesibility Developers Tools
- Wave Tool
Building accessible emails
Accessibility in emails has been the topic of the year with everyone emphasizing on the importance of it. Designing for accessible emails means following certain regulations and respecting certain limitations when designing and coding an email. Checkout this insightful infographic on Email Accessibility created by EmailMonks in collaboration with accessibility enthusiast Paul Airy.
Following these guidelines makes email easy to access for over a billion people globally fighting disability in some way and also makes emails easy to understand for rest of your subscribers as well. Moreover, this will greatly improve the conversion potential of your existing emailing list as well.
Things to take point while coding
- Use Semantic Code: People rely on screen reader for ‘reading’ emails. By using relevant semantic code for heading <h_> and paragraphs <p>, screen readers can differentiate between the two and making reading your email a pleasant experience.
- Add a relevant title: Adding title in your emails can double up as the preheader text as well as help your email subscriber gain some context when relying on screen readers.
- Tables as presentation: By adding role=”Presentation” to each table, screen reader will read the content of your email body instead of each cell.
- Accommodate ample white space: Whitespace is the best friend of anyone who is going to read your email on a device held at an arm’s length while being surrounded in a crowded subway. whitespace provides a breathing space between different elements in your email and helps a subscriber to glance through the entire email copy.
Common Mistakes in email template
Balance between promotion and problem solving: As per Inbound marketing, your customers needs to approach your brand instead of vice versa. So, when they subscriber to your brand, they believe that your products / service shall solve their problems. Some marketers tend to tip over the line and start promoting their offerings while problem-solving aspect is in backburner.
Solution: Transactional email templates are always supposed to be 80% transactional and 20% promotional. Similarly, while creating an email template for lead nurturing automation, primary focus needs to be on educating the subscriber.
Single image email: This mistake is done by most email marketers. Email clients disable images by default and if your email copy is text included in the image, there is a good chance that it might get hidden away. Even worse is when marketers don’t include an alt-text to the image.
Solution: Don’t accommodate your email message on a single image and always add a relevant alt-text to your email images.
- Illegible email copy: Custom fonts look cool but lose the charm if they cant convey the message in your email copy. Certain fonts look good when used in headline and become illegible when used in a paragraph of text. Additionally, provide whitespace by adding proper line spacing between words in a paragraph and appropriate line length.
No CAN-SPAM compliant footer and Misleading email copy: According to CAN-SPAM act 2009, any brand sending out marketing or commercial emails, need to include certain information in their footer to be compliant to CAN-SPAM act. From email template point-of-view, an email needs to include a valid physical address of the brand, unsubscribe link at the end i.e. footer of email to be avoid heavy penalties.Similarly, marketers need to stay away from misleading email copy as this only helps you score a handful clicks but it will cost you greatly as your subscribers may feel cheated and this will lead to unsubscribes. ISPs monitor these unsubscribes and can flag your email address as spammy and always hit your email deliverability – sending your email into SPAM.
Also, certain email design methods may lead to your email being flagged as SPAM. Steer clear by learning about how email design can trigger SPAM traps.
- Not A/B testing: The most novice mistakes that most email marketers tend to commit is believing that they exactly know what their subscribers need / are looking for. Unfortunately for them, times change; tastes change with time. So, it is a good idea to A/B testing your email templates to check what works and what can be improved.
Email templates are an indispensable part of your email marketing strategy. Understanding what goes behind the scene of email template production can help you create better email templates.
Want to share your experiences with email templates? Help us by answering some questions here and stand a chance to get featured.