Designing an Email Campaign: Think Like a Marketer


For marketers, effective email design is more than the fonts and images you choose. A good email template not only looks appealing, but also considers the special features and constraints of the email clients used to read the messages.

Email icon by Oliver Sin

Designing an effective email campaign means thinking like a marketer. Here’s what you need to know to make your templates great.

The Goal of an Email

Before you start designing, understand the email’s purpose - to get the reader to click through to a landing page or web site. The email is not the reader’s final experience with the brand or business, it’s just the first step.

Design your email templates to inspire action, whether it’s a share on social networks, forwarding to a friend or clicking to complete a purchase on a web site. The email is the gateway to the rest of the marketing experience.

When you start designing, you want to keep a few things in mind:

Your Template Shouldn’t be Wider Than 600px*

Most email clients can accommodate this width without requiring the reader to scroll sideways to see more.

*Unless you're confident enough to venture into the world of responsive web design.

Include a Preheader

The preheader is the few lines of small text above the main header image. Preheaders usually include whitelisting instructions, links to a mobile or web site version of the email, or a short summary of the message content. Place some dummy text here as a place holder for the preheader.

Include an Invisible Image at the Top

Gmail and Outlook display a preview of an email’s text beside the subject line. This text preview is called the snippet and is usually populated by either the preheader content or an alt tag description in the email’s first image.

The snippet can help marketers tease their message content and extend their subject lines. Including a small transparent image at the top of the template gives marketers the option of including the snippet in the alt tag of the image instead of devoting space in their preheader to snippet text.

Be Careful With Text on Your Buttons

If you’re designing buttons to call readers to action, be careful with the text you use. Phrases like “Buy now!” might feel natural, but can also scare off readers who aren’t ready to make a purchase yet.

Make the text less threatening but still direct - something like “Learn more” or “Find out how” can still inspire readers to click through without the bigger commitment of making a purchase.

Design for Preview Panes

When you’re designing an email template, you’re probably thinking about the big picture, how the message will look when it’s fully open in an email client or browser window.

But at least 64% of consumers don’t open their emails fully, instead reading them through their mail client’s preview pane.

Design with the preview pane in mind: place the company logo in the top left corner of the email and plan for important text information to display in the top left quarter, like Old Navy does above.

Use Alt Tags for Disabled Images

Many email clients block images by default as a safety measure. And only 33% of Internet users change this setting in their email account to allow images to display automatically.

Combat blocked images and make sure the marketer’s message can still get across by using alt tags to add descriptions of important visual elements - like logos, navigation buttons or coupons.

And don’t make your designs completely image-based. Include space for text in your template so the marketer won’t have to rely solely on images to get their readers’ attention.

Think Mobile

At least 34% of consumers use their mobile device to check email. But not all emails translate well to mobile users.

Whether you're designing responsively, or to a smaller fixed width layout, remember to include the viewport meta tag in the head of your template. This will ensure that all devices interpret your layout dimensions as you intend.

Use a larger font size to ensure readability on mobile devices. Also, remember to leave plenty of white space around buttons and links so they’re easier to tap with a finger.

Good Design Means Good Response

A well-designed email strengthens a business’s brand. Mixing an appealing layout with easy navigation creates a positive experience for the customer which can lead to better response rates for the marketer.

When you design like a marketer, the marketers you design for will notice.

Ready to design your own email templates? AWeber, the leading email marketing software for entrepreneurs, businesses and nonprofits, is running a template design contest to celebrate the launch of its new drag-and-drop message editor. The winning designers will be awarded membership to Tuts+ Premium and up to 10 runners up will receive 3 months of AWeber’s email marketing service for free. Head over to the AWeber blog for full contest rules and details.
Related Posts
  • Web Design
    E-commerce for Mobile: Making the Most of Your SiteMobile thumb
    In this article we’re going to address some mobile e-commerce hurdles. I'll break down a few of the most important steps to take account of in preparing an e-commerce site for mobile access and offer you some advice based on my experience.Read More…
  • Web Design
    Getting Started With MailChimp's Email DesignerMailchimp tool thumb 2
    This tutorial will walk you through the steps of using the MailChimp Email Designer tool to build a clean, mobile-friendly newsletter.Read More…
  • Web Design
    Applications and Tools
    The ThemeForest Author’s Guide to Unbounce TemplatesUnbounce preview
    In this tutorial I'm going to introduce you to Unbounce, a tool for building campaign-specific landing pages. We'll walk through the anatomy of various types of landing page, go through the tool’s features, then cover what’s needed to sell your own Unbounce templates on Themeforest.Read More…
  • Web Design
    The Complete Guide to Designing for EmailEmail thumb
    Designing for email is about getting to the point and making the most of the brief chance you have with your subscribers. You only get one shot, so it's worth employing as many tricks in the book as possible to make sure your message gets through. The underlying principles are all about respecting your readers by giving them something valuable in return for their time which is, after all, the reason they signed up to hear from you in the first place.Read More…
  • Business
    App Training
    How to Create an Email Newsletter with AweberAweber email newsletter
    AWeber is one of the top-ranked email newsletter tools, known for its high deliverability rates. Setting up a new email newsletter with AWeber is a little less friendly than some other email newsletter tools out there, but, in exchange, you have a lot more flexibility and opportunities to customize the emails you publish. This tutorial will focus on getting your first email list up and running, along with equipping you with the necessary know-how to send out both standalone emails and automated emails (known as auto-responders). While AWeber has plenty more features, these are the basics you need to know for any email list you operate.Read More…
  • Business
    Fundamentals of Effective Landing Page Design1 preview basic landing page design
    Creating a landing page is one of the most exciting aspects of online marketing. Your landing page is your opportunity to show your sales skills online, and - more importantly - where you make sales. Sales mean money, which is the lifeblood of any business, so how you design your landing page can literally make or break your business. As you create your landing page, you get to test your skills in writing headlines and copy, attention grabbing design. You also get to see that what you do has real results - the power of words and design. In this tutorial, I cover the basics of what makes a good landing page design. It's a bit like we're running a relay together. By showing you what works well in general terms, I'm running the first leg. But to make it work for your business, you've got to take the baton and continue running, until you discover the landing page design that works for your business.Read More…