The Anatomy of an Email Template
Your preheader text, sometimes called the preview text, is the first component of any email. I’ll delve into how to write an effective preheader in a future post. For now, account for an initial line of text at the very top of your email template. This is the text that will be displayed in the inbox preview of your email, after the subject line, so it’s important that it relays your message to your recipients. Your preheader text shouldn’t distract from the content of your email, so use a smaller font than your paragraph text. To further differentiate it from the rest of your email, it should be located on the content background area, and the font color should be a few shades darker than the email background color.
Your logo is the main element you use to define your brand, so you probably already know that your logo should appear in your email templates. However, how your logo appears is very important. If your logo is centered on your site, center it in your email templates; if it’s left-aligned, do the same in your templates. If you’re displaying your logo against the email background color, make sure your logo isn’t a clashing color. The size of the logo in your email templates should be the same as on your site, unless it’s taller than 150px. If your logo is more than 150px tall, it will push the core content of your email below the fold, which will force recipients to scroll to see it. Since your logo is the cornerstone of your brand, it’s also important to make sure that it’s high resolution — you don’t want your logo to be blurry.
You probably can’t fit all the links from your website’s navigation bar in your email template, so include the 3 or 4 most important links. In all your templates, be sure to include is a link to your website’s homepage. After that, if you’re unsure which other links to include, include links to your site’s most popular pages.
Stylistically, your navigation bar should match your website’s.
The body of an email is the part that is subject to the most variation, since it will change depending on the type of email you’re sending.
Email layouts come in two forms: single- or multi-column. Columns allow you to display content side-by-side on desktops, whether it be images, copy, or some combination of the two. On mobile, columns will stack, so it’s important to keep this in mind when planning their order.
Stacking columns on mobile eliminates the problem of images shrinking on smaller screens to maintain a column layout. There are advantages to both single- and multi-column emails, and which you use depends on the content and the email.
Multi-column emails are especially great whenever you’re including a series of images or paragraphs, like abandoned carts or emails with an image gallery.
Below the body section of your email is the footer. Start by including relevant social links or links from your site’s navigation bar that didn’t make the first cut, like links to your blog or RSS feed. By including these links at the bottom of an email, you don’t distract from the other calls to action, but they’re easy to find if a recipient is looking for them.
Contact Information, Preferences Link, and Unsubscribe Link
One required piece of information to include in your footer is your company’s contact information — namely your physical address. This is legally required by the CAN-SPAM Act. It’s also helpful to include an email address or phone number for sales or customer support.
In every non-transactional email, you should include an unsubscribe link. Unsubscribe links help you avoid being marked as spam, and make you a good web citizen. A common place people look for an unsubscribe link is at the bottom of an email. If you’re creating a newsletter template, you should also include a preferences link in the footer of your email. That way, recipients can simply update their mailing frequency preferences instead of unsubscribing.
Use this email structure as a starting point. In my next two posts, I’ll cover best practices for images and copy in each of these email sections.
If you’d like to download a higher resolution version of the email template example I went through in this post, click here!
Icons courtesy of Daniel Bruce.