Designing Emails That Actually Work

Embed Size (px)

Text of Designing Emails That Actually Work

FileNewTemplate

@lindsaylee131

@lindsaylee13My name is Lindsay Siovaila, and Im a demo engineer for the Salesforce ExactTarget Marketing Cloud.

In my current role as a demo engineer for ET I focus on creating demos for our Sales team which means I do a mixture of web and email design and development to showcase our product for customers.

Im a web designer and developer by training, but Ive spent a large amount of time working on emails during my 4+ years at ExactTarget2

Some emails I have created during my time at exacttarget3

Some emails I have created during my time at exacttarget4

Some emails I have created during my time at exacttarget5

Some emails I have created during my time at exacttarget6@lindsaylee13@lindsaylee13

7Email is Your Friend;It Does Not Suck.@lindsaylee138You Can Create EmailsThat Perform Well and Deliver Results.@lindsaylee13In fact, Ive come to appreciate the art of email creation and find it a fun challenge to work within its constraints9

@lindsaylee13So to outline the agenda, Im going to start with an overview of the subscriber experience and what someone goes through from beginning to end when they read your email before converting10

@lindsaylee13

@lindsaylee13

@lindsaylee13

@lindsaylee13

@lindsaylee13The subscriber experience is the flow in which someone digests your email before converting.@lindsaylee13The subscriber experience is the flow in which someone digests your email before converting

Unlike other mediums, emails are experienced in chunks, and digested one part at a time.

And since your primary goal with email should be conversions and sending your subscriber to your website, landing page, blog, etc., its important to understand each stage of the subscriber experience so you can optimize each part16From NameSubject LinePreheaderOpenPreview PaneFull MessageTap/ClickLanding Page

@lindsaylee13At each stage in the subscriber experience, you want to be thinking about the ultimate goal which is getting them to convert

You want them to land on your website, blog, store, etcFrom Name

From NameLarge and boldTop hierarchy in the inboxApproximately 25 characters

Based on this alone, they may choose to read the message, ignore the message, or even delete the message.@lindsaylee13Subject Line

Next is the subject lineYou have about 35 characters to use in the subject line

J. Crew example donut?SmarterTravel Deal Alert 9 tips to the point@lindsaylee13Preheader

Gives the reader a brief glimpse into the message content.@lindsaylee13Open

@lindsaylee13Preview PanePreview pane@lindsaylee13Full Message

Preview pane@lindsaylee13Tap/Click

Preview pane@lindsaylee13Landing Page

This is the goal this is where you want your subscribers to arrive

And everything I just talked about will determine if your subscribers arrive here@lindsaylee13

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 timeConcise ContentOver Length

Your email is a doorway into other channelsTell them the essentials

Think about your email as a doorway into your website, app, or landing page.

You dont want your subscribers to spend a ton of time reading a lengthy monologue about why they should purchase your product or sign up for a free trial.

Tell them the essentials to get them hooked, then send them to the next step in their journey

Note: If you are in an industry or business where sending longer emails makes sense then by all means do so, but consider adding highlights at the top of the email or bullet points of the content to follow to give your readers an overview at the beginning.27Scannable Layout

Clear headingsOne or two column layoutContrast of weight and color for content distinction

Your readers are on information overload, so design your email to be punchy. Text should appear in clear, delineated chunks that get to the point.

Use clear headings and call out key concepts in bold type so that your readers can get the gist, even if they don't read everything (which most of them won't).

Single-column layoutContras of value and color for content distinction - main CTALarge text ensures readabilityDont cram - consider legibility over lengthPeople are used to scrolling and skimming

28Make Your Calls to Action Obvious

Only have a few moments to catch attentionCan you narrow down to one main CTA?Repeat your main CTAs

Your call to action is the action you want your subscribers to take once they have read your email.

Your subscribers will only look at your email for a few moments before moving on with their day, so make sure your calls to action stand out.

Try and determine what ONE thing you would want your subscriber to do when opening your email.

If youre sending a newsletter with multiple articles, call out one of those stories as a featured article at the top. Dont try and make everything in your email carry the same weight.

If your email is long and a user has scrolled all the way through your content, make sure they have easy access to another call to action without having to scroll all the way back to the top of your email.

29

30Be Transparent in Your LanguageNOClick HereBig Announcement!You Dont Want to Miss This!New Items

YESDonate NowSign Up for Our WebinarStart Your Free Trial NowWe Have New Shoes

This isnt necessarily a design tip but still goes along with making your calls to action obvious

Dont use cryptic language make your subject line, preheader text and headlines crystal clear

Tell your subscribers who you are, why you are emailing them, and what action you want them to take you are competing for your subscribers attention in their busy inboxes, so make it obvious why they should pay attention to your email31RememberImage BlockingWhen possible, use HTML text instead of graphical textAlt text is your friend

32

This email is from Campaign Monitor33Design with Mobile in Mind

65% of all opens are on mobileSingle column layoutMake headlines ~28pxBody copy ~16-20px

1. Single Column, Device-Agnostic DesignThis is hands-down the easiest way to have a mobile-friendly email. Using this method, the images and text are set to be quite large so that whether the email is viewed on a desktop or a mobile, the font is readable and the images are big enough already.Design your email at about 450px wideHeadings should be at least 30pxBody copy should be at least 20pxAverage font size ~16px

* Pro tip: font adjustments can make emails mobile friendly w/o having to overhaul entire email

34More MobileConsiderations

Think about elements you see in appsWhat can be communicated through icons?Let your content breatheHuge buttons

* People are used to using apps in their mobile environment * What are visual cues that you can take from mobile websites and apps * Allow content to breathe, clear beginning and end to content blocksWhat can be used as an icon instead of long text?

* 44px minimum button text size * 100% full-width button

* Pro tip: Divider lines, containers, and padding are your friend

35

Fun StuffAnimated GIFs can add extra interactivityVideo

GIFs are supported across most email clientsCan add an extra element of interactivity to an otherwise static emailMake your first frame of the gif the most descriptive in case it doesnt play

Avoid video. Video only works in Apple Mail/webkit-based email clients. If you absolutely must have moving images, the only reliable solution is to use an animated GIF.

You can add a screenshot of the video to your email with a play button and then link out to a landing page with the actual video36

GIFs are supported across most email clientsCan add an extra element of interactivity to an otherwise static emailMake your first frame of the gif the most descriptive in case it doesnt play

Avoid video. Video only works in Apple Mail/webkit-based email clients. If you absolutely must have moving images, the only reliable solution is to use an animated GIF.

You can add a screenshot of the video to your email with a play button and then link out to a landing page with the actual video37

@lindsaylee13HTML standards have long been in place for web design, but email remains a unique challenge

because no universal standard existsand subscribers increasingly open emails on more devices

and in more environments38Email

HTMLCSSImagesTextDesignLinksHierarchy

Web

HTMLCSSImagesTextDesignLinksHierarchy

Some Ways Email and the Web are the SameSo if theres anyone in the audience who works primarily on websites or apps, or who just has a general web background but maybe not email, I wanted to highlight some of the ways that email and the web are the same

In terms of user flow, theyre definitely different. But under the hood, theres some similarities and differences, too.

Design!Links!CSS

Web

em

background-colormarginEmail

pxstyle=font-facebgcolorpadding

Some Ways Email and the Web are DifferentEmail uses some similar markup in non-traditional ways

Separating presentation from content doesnt have to be that important in email >> emails dont need to be controlled by stylesheets>> dont nee