If you haven’t templatized your email workflow yet, you are missing out on a great opportunity to relieve some of that daily stress that comes from wondering "How should this next email look?".
This article will provide you with some general recommendations on templates you can build and have on hand so you don't have to start from scratch every time you need to send an email. You'll quickly see how trends and patterns emerge which reduces the creative, copy, and technical resources you need to drive traffic and sales to your business
Where to Start
When determining what templates to build it is always easiest to gather as many examples of businesses emails, for example, promotional marketing blasts, triggered lifecycle emails (like Welcome Emails or Abandon Cart Emails), transactional emails (like purchase, forgot password), business review emails, responses customers get from emailing support or contacting you, or any other type of email that is sent on behalf of your business.
Once you've got a list together you can start to organize the emails by theme. For example, what layouts are similar? Are there some that use all text? Do all emails come from the same sender? Pro Tip: It might help to print them out. These are just some examples of how to group them, but you start to get an idea of how many similar layouts exist and the idea of what templates make the most logical sense.
You might find as you work through this exercise that it is very easy to quickly get sucked down the rabbit hole and before you know it you are looking at 30 templates.
Try this instead
First, challenge yourself to consolidate as much as possible. You will likely only need 3 standard template groups, with a few versions at most in each.
Transactional
Promotional/Content (Make 3 of these)
Lifecycle
Now, let’s review each, the message hierarchy and strategy for each of the groups listed above.
Transactional Emails
These have the singular purpose of conveying a simple message regarding a customer's order, account, or to provide resources/direction should they need further help. For this reason, it is best to keep these emails simple themselves, eliminating anything that is unnecessary (I've found that in most cases images fall in the "unnecessary" category for transactional emails).
A simple layout might look like:
Header: This can be as simple and clean as just a logo, or a little more informative with the addition of a phone number, live chat link, blog link, category links, or a direct reflection of your homepage header.
Introductory text: This should immediately tell them what the email is regarding.
"Thanks for your order"
"Your password is reset"
"Your appointment is confirmed for tomorrow"
Body information: This will vary from email to email, but some general ideas of what types of information are useful would be things like:
Order Related (order number, cost, shipping type, shipping address, payment type, billing address, service type, appointment time, appointment with, appointment location)
Account Related (account type, password reset, account/service expiration date, account/service renewal date)
Shipping Related (tracking information, carrier information, shipping date, expected arrival date)
Footer: This is where you tie it all together with the legal bits. But before you get into that start with a logo and some social links. You'll need to add your physical address as well, but don't forget, since these are transactional you can leave the unsubscribe link off.
These are emails that need to convey important information to customers and ones they should not be able to unsubscribe from. As a result, you need to make sure they are valuable and straight to the point, but that doesn't mean you need to be all business. The addition of some "non-transactional" content can add a lot to these emails, but must not be part of the main message.
These types of content usually fit well in a single column banner:
Cross-sells
Up-sells
Buying Guides
Other services
Event Announcements
Seasonal Content
Blog Posts
Promotional and Content (aka blasts)
These are going to serve as the emails that deliver your valuable content, products and/or services to your subscribers. You should have at least three versions to start with in this category to help prevent messaging from getting stale.
The general layout might be something like:
Header: Same as above, It's easiest to use one header throughout all of your email types, so when changes happen (they are inevitable) it is easier to get them reflected across all your emails.
Hero Image: This can be designed in many ways, but a good start is to use an image with some text that conveys what your email is about:
"Spring Sale Starts Now!"
"10 Ways to increase email deliverability"
"Try our new service today"
You might need a CTA (Call To Action) button too, depending on your emails goal. This can be coded under the hero so that the email has a "bullet-proof" button. Meaning, if images are turned off for a recipients inbox they will still see a nicely coded button with an action to take.
Products/Categories/Articles/Services/Content Section: This section will deliver the meat of your email and can be organized in several ways. Play around with one column, two column, and three column sections. Mixing and matching to make the most of your product/service. You can easily get into trouble here by adding too many rows and creating an email that is way too long (Gmail might clip it, or worse, subscribers ignore it). For starters stick to five rows max, see how your audience interacts and go from there.
Here are three easy layouts to start with (You may of course need to add or subtract to make sure your brand and offering is well represented.)
Header, Hero (with coded CTA below), 2- 2 column rows, 1- 1 column row, Footer
Header, Hero (with coded CTA below), 2- 3 column rows, 1- 1 column row, Footer
Header, Hero (with coded CTA below), 5- 1 column rows, Footer
Each column section is likely to have an image depicting what it is offering, service, product, or category exploration to name a few. This is again, a good opportunity to make sure you have a good text to image ratio as well as a good user experience, by coding your CTAs under each image.
This is also a good area to utilize your recommendations engine if you have one. Content like "Recommended for you", "Top Sellers", or "People who bought this also bought that" are great additions and can reference products, services, articles and more. If you aren't currently utilizing any sort of recommendations but would like to, contact us today and we can help you get that running.
Footer: Same as above, except add an unsubscribe link. These are marketing emails and require that you provide the customer with a means of removing themselves from your send list.
Triggered/Lifecycle Emails
These are the emails that will be triggered from actions the user takes (or inaction) and similar to transactional emails should focus on that singular next action you'd like them to take. Some typical triggered emails and the following desired action would include:
Welcome - Browse the site
Product/Service Review - Leave a review of your product or service.
Win-Back - Come back and visit your site again
Browse Abandon - Add something to the cart...checkout
Cart Abandon - Checkout
The layout for most of these will be pretty similar to transactional, but for something like a welcome email I'd use one of your blast templates as they tend to be a little more on the content side in order to give your new subscriber a taste of all you have to offer.
For the rest a typical template might look like:
Header: Same as the two above
Body: Most triggered emails will revolve around a product, service, article, or other content the customer expressed interest in and the body should serve as a reminder, opportunity to pickup where they left-off, or guide to get them to the next step in the process. Try this simple layout for the body
Introductory text "You left these behind", "You might like these articles", "Finish booking your appointment"
Replication of what they saw last. Use the content you already have, were they on an article? Show them that article. Were they in their cart? Show them their cart. This should include a clear call to action as well (see above for desired actions), and don't forget to use bullet proof buttons.
Recommendations - Show them things you offer that are similar to what they showed interest in. These emails are one of the best places to show your customers you are here to help them find what they need.
Footer: Same as the blast emails. Arguably these are a gray area when we talk about transactional vs marketing and whether or not people should be able to unsubscribe. I like to error on the side of caution, let them unsubscribe.
These examples are meant to be a great place for you to start and are not a one size fits all kind of thing. You may have a use case that you don't think fits in any of these and if you're stuck trying to figure out what to do contact us today and tell us about it. We will make sure you get what you need.
Examples
Marketing Email - Click Image on left to get HTML file, images, and find/replace matrix for free.
What Next
Once you have your general template layouts you will need to create placeholder assets in order to build them in your ESP for use. One way is to create placeholder images and text so that when you copy the template to build your email you will be able to easily see if you missed something.
When you are first getting started try these steps to get you going.
Determine Email Width: There are a lot of articles that talk about the best practices around email dimensions, overall width, image size, load weight and more (we will have our own soon). In general you can choose practically whatever width you would like. This dimension is going to determine the size of every asset going forward so make sure you get it right for you and your business.
Create Your Image Assets: You'll need to create an image for each of the content sections, 1 column, 2 column, and 3 column.
1 column - These will be hero images and banners so visually you might want two with different heights, but you can use the same placeholder if you'd like as well.
Try these first:
600px x 600px (Hero)
600px x 200px (Banner- Useful for marketing content in transactional emails and supplemental banner content in other email types)
2 column - Aesthetically, these look better as squares
300px x 300px
3 column - These can look great as rectangles oriented in portrait or squares.
200px x 250px (rectangle)
153px x 153px (this leaves room for some nice padding and aesthetics, our sample template you can download utilizes this dimension)
Start Coding: This is where it starts to get a little more involved. You'll need to be familiar with HTML/CSS in order to get this right, or have someone on your team who is. If you aren't or don't, you've got nothing to worry about because you have us :)
This is where the image assets you made come into play. Host these images in your ESP image library and reference the appropriate URLs in the image source when you start coding your emails in your ESP.
The key to creating a good template is utilizing find/replace functionality, meaning your template should have placeholder values that you can easily find and replace with the final email values. Some examples of things you might want to utilize placeholders for include:
href - Your urls are going to change from email to email, if you have a placeholder value for them in your template you will be able to streamline the build process. Try "imageURL", "ctaURL", and "textLinkURL". Since you are likely to have multiples of each type you'll also want to add sequential numerals, imageURL1, imageURL2, and so on.
alt - alt tags describe the image and should be specific to each one you use, try alt1, alt2, etc, to keep your templates organized.
CTA text - These will inevitably change from email to email and you'll want to make it easy to replace them with what you want your CTAs to read.
Image Caption Text - If you are using a 2 column layout and you might include some text under each image describing what it is, "Shirts", "Articles", etc.Make sure your template is something easier to remember for those emails that get different categories.
In this way you can build emails right in your platform that are easily duplicated and editable. Placeholders are great reminders to replace all sections of the template with the right content and you will quickly find that you will have greatly streamlined the build and send process. If you find yourself getting stuck we are just a quick email or call away from helping you get your templates built and ready to use. We can work in any platform and will develop custom templates for every scenario.
For the more creative and advanced
After your templates are created and being utilized, you can open up the creativity and lessen the likelihood of the emails becoming “stale” or “background noise”. We like to call this step "building email legos", because we essentially dissect the templates piece by piece and create a library of building blocks. Following the examples in this article we would end up with separate code blocks for each "building block".
1 column
2 column
3 column
Header
Transactional Footer
Marketing Footer
CSS (you'll need this section to make sure all the pieces render as intended, the complexity here goes back to you needing to have a grasp on CSS or contacting us to help)
With these individual template pieces you can piece together different layouts on the fly. Giving you much more flexibility.
If you’d like to get more specific based on text or other variables that might be used with images you can create special building blocks for content like:
Product Recommendations
Categories
Text banner (This would typically be used to title the next section, "Employee Favorites" for example)
Articles
Services
This type of library allows you to mix and match these building blocks into a wider variety of email layouts while still providing the efficiency of templates. It is very important that you use comments in your HTML to separate blocks making sure that you know where each one starts and ends. This will help avoid mix-ups as you are building, editing, or moving pieces around. We usually build our CTAs into the template sections as needed, sometimes having variable versions.
In conclusion, templates will reduce the amount of time you spend conceptualizing emails by limiting the amount of decisions you have to make. Simply pick a template, pick imagery, pick text, pick links, and you’re done. Avoid the overwhelmingly daunting task of brainstorming how each email looks every single time you want to send one. Don’t worry that your emails follow the same design patterns - once you start to pay attention to most major emailers you’ll notice that they all follow this approach.
If you have any further questions, please contact us so we can provide clarity, and if this still seems too daunting, please let us help you get off the ground and teach you what you need to know to do this on your own.
Comments