(Have you read part one to this blog? If not, go take a look at it before you start reading this one! If you have already read part one, enjoy part two and soak in all the email template knowledge that you can. 😊)
So, What's 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.
Try these tips to help you get 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, but don’t worry, you’ve got this! 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. Save the decision-making for where to grab the best breakfast burritos on your way into the office instead. When it comes to email conceptualizing, keep it simple: 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.
