Designing an Email Campaign: Think Like a Marketer

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.

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://michael-rose.co.uk Michael

    Nice article, reading more about designing email newsletters at the moment. Using mailchimp for it and its just great.

    But good read, gives a nice base on what should be included when designing one. Thanks

  • http://www.dekinderfotograaf.be Mathias

    Does sombody knows some good up to date tutorials about coding an email template?

    I also use Mailchimp but their is always a limitation about the design.

    • Pam

      Hi Mathias,
      check Campaign Monitor’s blog: http://www.campaignmonitor.com/blog/
      It is an Australian company which supply emails software focusing on designers.
      They also have lots of email templates and they are always on top of the game with tips and tricks (they saved my day more than once).
      Also Emailonacid is a good starting point http://www.emailonacid.com/blog

      Good luck

  • http://siriusthought.com/ Chris Kopyar

    I used to use the invisible pixel with alt text work-around back in the day, but then found that some of the isp’s can consider it a gray area and may raise the spam score of your email because of it. Because of that, I usually recommend the preview text. Good tip on thinking about an email from a disabled image perspective. Designing the email to be attractive in both states is a great way to entice a user to download the rest of your images. and view the full monty.

    • eddie A

      Chris Kopyar,
      Can you give more details about your “preview text” method? I don’t understand the invisible pixel or preview text. Thanks.

  • Pingback: Designing an Email Campaign: Think Like a Marketer | Shadowtek Hosting and Design Solutions

  • http://www.codedevelopr.com/ Jason

    Great article, I just recently started a newsletter for my Web Developer blog http://www.codedevelopr.com/ and these are some great tips, really like the invisible image with alt tag trick

  • DDP

    This is one of the best email marketing blogs around written by an ESP (email service provider). Have a read through their articles and gain some insider knowledge ;)

    http://www.campaignmonitor.com/blog/

  • DDP

    P.s: This article is good from a designer perspective, however it does not cover the most important aspect of email.. KEEP IT SIMPLE!

    Emails need to use HTML coding principles from the stone age (tables, in line CSS, no javascript or external files of any kind etc etc).
    The more complex your emails are the harder they are to maintain and debug when testing in multiple email clients which all do different things with the code!

  • agung01

    First,
    Thanks for great advice! Truly what I am looking for.

    Then about make the template that mobile friendly (I mean will display on mobile nicely).

    Does using “meta viewport” is similar like “@mediaquery”?

    I am an email template designer, I rent my service on Fiverr for only $5. But most of my clients wanted for mobile compatible template.

    If both of them have the same function, then does using “meta viewport” is simpler than “@mediaquery”?

    Please, I need an advice!