Email Template Design Archives
If you send B2C emails, about 53% of your subscribers first see your emails in a preview pane 1. If you send B2B, the number is even higher (around 80%).
The preview pane is part of the inbox in some email clients. It lets users peek at part of their emails to decide whether or not to open them.
If those few inches of space don’t entice previewers to open, they’ll simply ignore or delete your message. Don’t let that happen. Get the corner on the preview pane market with these easy design changes.
What to Include
(As an added bonus, your email will be more mobile-friendly as well.)
Make sure to include:
Fitting all this in the top of your email can be tough, depending on your design. Avoid unsightly cramming with this trick: a side column lets two items exist in harmony near the top.
What to Avoid
When filling the top with sticky content, you may need to make room by removing less compelling items. Make sure these common culprits aren’t hijacking precious preview-friendly real estate:
You may be thinking, “This is really going to change our design. Is it worth it?” As always, changes are important to test.
Think about which of these changes might be most effective in your own campaign, then split test your broadcast to monitor the results.
Do You Accommodate Preview Panes?
Do you use any of the techniques above? What kind of results are you seeing?
Do you have a favorite technique for appealing to the preview-pane market? If you do, please share your ideas!
*according to Marketing Sherpa’s Best Practices in Email Marketing handbook.
Read "Optimize Your Emails for Preview Panes"
When your subscribers check their email, they immediately start picking apart their inboxes. They harvest useful details, respond where necessary and trash junk mail (anything they’re not in the mood for).
It’s a heartless process. And it goes fast. If your message isn’t compelling and recognizable, “click” goes the delete button.
Your logo could prevent that delete. Logos remind subscribers of the brand behind the email – a brand they expect value from. With that value in mind, they may be more likely to read your entire message.
Outfitting your emails with your logo is as easy as inserting one quick link. The question is, how should you use it? Read on to find out how to create the effect you’re looking for.
First Things First: the Top Left
This common placement means the logo is the first thing readers encounter in a top-to-bottom, left-to-right world.
Here, Groupon’s logo identifies the sender for readers who didn’t pay attention to the “from” line – for example, those scanning through emails in a preview pane. It’s easily findable, but the subtle colors and modest size let the main content command attention.
Even better, Groupon presents its logo alongside the email’s main benefit. When readers see the combination, they’re reminded of the message’s value and excited to scroll down.
Snapfish’s logo is also inconspicuous but available, blending in with the email design. Like the Groupon logo, it’s strategically placed to trigger memories of past experiences on the way into this new one.
Incorporated Into the Header
Memorial Hospital includes their logo in a subtle way. They used the color of the logo to influence the rest of the header’s design. This keeps their design appealing and their branding consistent.
With the Call to Action
The Marketing Experiments logo follows the call to action in this email generated for an ME online clinic by Go2Webinar.
Since this email was sent only to registrants for the event, it was most likely expected. The logo doesn’t need to come first as a reminder of trust, but it’s still available as an identifier.
Another consideration is design. The logo’s bright colors keep it highly visible against the low-key text. This logo doesn’t need top placement to capture the eye.
Throughout the Design
Vosges’ logo borders the email at the top and bottom and extends into the rest of the design. For Vosges, the logo is part of the brand experience. Elegant and feminine, it denotes the luxury of gourmet chocolate.
The task of this email is selling customers on a high-end candy experience. The delicate glamour of the logo is part of the experience, so the design makes the most of it.
This full-design overhaul goes further than simply inserting a logo. Think about ways you could incorporate elements of your logo into the rest of your creative with colors, fonts and other images.
Invoking your website
The goal of Body Central’s email is to encourage shopping on the web site. Accordingly, the logo here is arranged as a full banner across the top just like the banner on the site pages.
The email body shows an example of a current deal on the site, but by the time subscribers view it, the logo itself has already done much of the work by evoking the shopping experience.
Tip – No matter where you position your logo, make sure to include alt text in case images aren’t displayed.
Creating a consistent brand
Your logo can help you create consistent branding. That’s a lot of impact from the few easy clicks it takes to insert it.
Does your logo fit with your email campaign? Could using it in any of these ways help your email accomplish its purpose? How do you use your logo in your emails?
Read "Email Design Tips: Leverage Your Logo"
HTML and plain text each have their place as email formats.
Plain text has a no-nonsense, businesslike air, and is simple to create. HTML grabs attention with colors and images. It lets companies incorporate logos and display data with graphics.
Sometimes, though, plain text is used by marketers who would prefer the gloss of HTML, but aren’t sure how to create it. The good news is, many email marketing services provide pre-designed HTML email templates that make the switch practically painless.
Of course, there are still a few things to learn. If you’re new to HTML email, follow these tips for polished, professional messages.
Getting Started With HTML Email
Your Plain Text-to-HTML Concerns
Have you made the switch from plain text to HTML?
If so, what were the trickiest bits for you to learn?
If you want to switch but haven’t yet, what concerns are holding you back?
Read "A Plain Text User’s Guide to HTML Email"
It’s not subject line personalization (although many email marketing campaigns do indeed use this).
It’s not that the sender chose to tweet the email newsletter.
It’s not that they were created from blog content using our RSS to email tools.
Nope, it’s even more basic than that. And it might surprise some of you (at least, based on some of your responses to Bob’s recent post on HTML email design examples).
So what is it?
Most Email Newsletters Are Sent In HTML
In August 2009, 73.9% of all broadcast messages sent through AWeber included an HTML version.
For comparison, in August 2008 only 58.9% of broadcasts included an HTML version. In other words, the use of HTML in email newsletters has increased 25.47% in the past year!
Here’s how the percentage has changed over the past four years:
I’ll admit that even I was when I saw the stats. A lot of marketers still believe that plain text is the “default” format to go with (just see the comments on Bob’s post), and while I knew that the reality was different (even 3 years ago, over 53% of the broadcasts sent from AWeber included an HTML version), I didn’t expect such a strong majority of broadcasts to include HTML.
Why Has HTML Email Become So Much More Popular?
I’d like to think that at least in part this is due to the increasing number of HTML email templates we’ve released over the past couple of years.
But that certainly isn’t the only reason, and it’s probably not the primary one. If you’re going to use HTML, you’re going to do so because you’ve found it gets better results than text, or you believe it has the potential to do so.
So what potential/results might people see in HTML email?
- An opportunity to provide an experience that more closely matches the one your customers & prospects have on your website.
- The ability to deliver product and other images directly in the email body; to link text/images; to display content in multiple columns and take advantage of other HTML formatting.
- Easier tracking of activity – no need to type out tracking URLs in the body where subscribers can see them; ability to track opens (even if opens are a somewhat imprecise metric, they can help you to compare the relative success of campaigns).
- You can add a preheader to remind subscribers why they signed up, encourage them to whitelist you and take other actions that can increase response and deliverability.
Don’t Join The Crowd “Just Because” – But Don’t Avoid HTML “Just Because,” Either
The point here isn’t “hey, 3/4 of broadcasts are in HTML, so obviously yours should be, too.”
It’s this: if you’re sending your emails in plain text only “just because” you always have, or because the people you receive email campaigns from send in plain text, then try HTML – run some tests with it to see how your subscribers respond!
After all, you never know until you try…
More On Email Newsletters and HTML
- Browse our HTML email templates and watch a video on how to use them.
- Video: introduction to AWeber’s email newsletter tools.
- See our Knowledge Base to learn how to send email newsletters with AWeber.
- More posts on email design, including several on text vs. HTML.
Were you surprised to find that so many broadcasts are sent in HTML?
Have you been sending yours with an HTML version, or as plain text?
Read "What Do 73.9% of Email Newsletters Have in Common?"
At AWeber, you can use any of our 100+ HTML email templates to create great-looking emails in a variety of color schemes – but what if you could match the look of your email marketing campaigns perfectly to your website?
To help make this happen, and have some fun in the process, I’ve created a couple HTML email templates based on some free WordPress themes that you can download and use for your blog.
Check them out…
“Outdoorsy” HTML Email Template
The “Outdoorsy” template is based on the free Outdoorsy WordPress Theme from Function.
It’s a 2-column (right-hand sidebar) email template with an organic feel and navigation links available to use in the header.
If you want, you can download and use this template outside of AWeber – but if you want to use it in AWeber, it’s already integrated for you! When you’re creating an email, just choose “Outdoorsy” from the list of templates.
- Login to your AWeber account to use this template in your autoresponders and email newsletters
- Download this HTML email template for using outside of AWeber
- Get the matching WordPress theme from Function
“SuperFresh” HTML Email Template
The “SuperFresh” template is designed to match the free SuperFresh WordPress Theme from ThemeTation.
It includes a “featured post” section at the top, and then a 2-column area (content and sidebar) beneath.
If you want, you can download and use this template outside of AWeber – but if you want to use it in AWeber, it’s already integrated for you! When you’re creating an email, just choose “SuperFresh” from the list of templates.
- Login to your AWeber account to use this template in your autoresponders and email newsletters
- Download this HTML email template for using outside of AWeber
- Get the matching WordPress theme from ThemeTation
Enjoy – And Tell Us How You’re Using the Templates!
If you use these templates and themes for your campaigns and site, let us know!
And if you have ideas for other HTML email templates, I’m all ears
Read "2 New HTML Email Templates"
Ever since we made the move to our new office, I’ve found myself really cherishing each morning — not only because our office literally feels like home (Eric and I are quite the decorators), but because as part of my morning routine, I get to check out what’s going on in the design community and what our customers are doing with their email designs.
To start my day, I:
- Water the flowers outside my office.
- Grab a hot cup of coffee.
- Catch up on my RSS feeds.
- Surf Twitter to see what cool stuff AWeber customers have been sending out.
Today, I’d like to give a subtle nod to some customers who put together awesomely designed newsletters:
Let’s See What AWeber Customers Are Tweeting!
Club Caitlin Newsletter – Cooking With Caitlin
I really like the way this newsletter was done. The contrast between the reds and the greens really makes it fun and interesting and its all tied together nicely with the gray background.
Whoever designed this email also spent time laying out the footer of the email (seen below)… something that can often be overlooked and neglected.
This newsletter design feels fresh. The pastel greens are very inviting and the imagery works well to balance out the newsletter.
Eye Spy Spain Magazine
Not only do the colors work very well but check out the exceptional detail they put into the text header above where the newsletter starts. That sort of detail makes an email look very clean, crisp and extremely professional. Bravo!
Inspiration Is Everywhere!
Now that I’ve shared a few examples of newsletters I’ve found inspiring, take some time to reassess the design of your emails.
Create a separate email address and start collecting newsletter subscriptions. Maybe you’ll stumble across something that will inspire you to take your newsletter design to a whole new level! Maybe your email newsletter will end up catching my eye…
Read "Design Inspiration From Fellow AWeber Customers"
While many of our users take advantage of the HTML email templates that he and fellow design whiz Eric have created, for those of you who want to design your own great-looking HTML emails, this article is a helpful resource to refer to as you create your own template.
Read "Improve Your HTML Emails – 6 Tips from Our Email Design Whiz Bob"
Sometimes our emails are focused on a single goal, aiming the entire message at driving to a specific landing page.
Other times when our purpose is more general, it makes a lot of sense to take a broader approach, aiming to get our subscribers back to nearly *anywhere* on our website. We can let them choose their own adventure from there, hoping they’ll eventually complete a site goal (e.g. ordering, membership sign up, etc.).
For those times, here are 3 techniques that could significantly boost your click through rates back to your website:
Include Some Website Navigation Links
If your site uses a navigation bar, most likely every page of your website contains those links in a predictable place, allowing visitors to select from at least a few things that might catch their interest, so why not experiment with adding them to your email newsletter?
Adding links to the most popular sections of your website in a consistent way across all messages might bring more overall traffic to your site.
As Chris Lovejoy points out, even if the specific topic of your newsletter doesn’t speak to someone, they may be interested in checking out more general (or specific) information section at your website.
Great tip, and definitely worth a split test.
Link More of Your Text
It’s called “the web” for a reason. Most websites aren’t structured hierarchically or in a linear way where a single page leads to just one other page, which leads to another, and so on.
Instead, pages are linked together from one another in a web, where a single page can link to many others, and many others pages can link to a single one.
A single email can link to several pages in this same way.
Hyperlinking Contextual Words and Phrases
The -> Click here < - type of linking strategies have gone out of fashion in favor of more relevant and contextual approaches involving words and phrases found directly within the paragraphs of the content (often strategically placed).
You probably already do this to some extent on your web pages. Have you ever tried this out in your emails with your headings and paragraph text?
Link Your Images to Relevant Web Pages
This tip is like icing on the cake, and because plain text messages are just that — plain-text — it’s an option only available to those of us sending HTML versions of our newsletters.
If you are sending in HTML, take a look the images in your messages. Readers’ eyes are naturally drawn towards them, and often times, so are their mouse pointers.
So, the difference between them seeing a (non hyperlinked) or (hyperlinked) pointer can ultimately make a minor or sometimes a significant difference in the click through rates for your campaigns.
It is especially important to link your logo, which people tend to expect is directed to your homepage, whether its seen on your website or in your email.
The above tips are for the established newsletter sender who already has a regular flow of traffic to their website. Not there just yet? Here are a couple of Knowledge Base articles that could help you out:
What Works Best For You?
Have you experimented with different tactics and strategies to drive traffic to your website using email marketing? I know I haven’t covered them all, so I hope you’ll join the discussion.
Read "3 Tips For More Clicks and Website Traffic"
Videos are a great marketing tool — they your prospects’ attention, they let you show (not just tell) about your products, and they get passed around (helping you to get more subscribers virally).
However, as many people have found out, creating "video emails" by embedding the video directly in an HTML email (like you would on a web page) doesn’t fly. It’s simply not reliable because most email programs disable or strip out the video.
But that doesn’t mean you can’t take advantage of video’s appeal in your emails!
You just have to get a bit creative…
Easily Send "Video Emails" Using Image Links
A Couple Pointers
I recommend using an image to link to your video — you can use text, too, but the image will naturally draw the eye and increase your response.
That said, not all of your subscribers will have images enabled in their email programs.
So, remember to put appropriate ALT text for your image, so that if they have images turned off, they know there’s a video to click to.
Have You Used This Tactic?
Has linking to videos this way worked well for you? Have you learned anything along the way that you think our readers could benefit from when creating their own video emails?
RSS Subscribers: Here’s a permalink to pass along to others you think would benefit from this tip!
Read "Here’s An Easy Way To Do Video Emails"
As an individual? Probably not much. But as a marketing example, possibly quite a bit.
A couple months ago, we posted about a possible compromise in the Text vs. HTML debate.
Inspired by a MarketingExperiments study on formatting, we discussed the idea that not all HTML was created equal, and that you might improve response by using a “Lite” (or if you prefer, “Text-y”) HTML — taking some advantage of HTML’s formatting flexibility while preserving much of the overall simplicity of Text.
Read "What Can Barack Obama Teach Us About HTML Email?"