Designing Emails That Actually Work

No notes for slide

My name is Lindsay Siovaila, and I’m 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.

I’m a web designer and developer by training, but I’ve spent a large amount of time working on emails during my 4+ years at ExactTarget

Some emails I have created during my time at exacttarget

In fact, I’ve come to appreciate the art of email creation and find it a fun challenge to work within its constraints

So to outline the agenda, I’m 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 converting

The 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., it’s important to understand each stage of the subscriber experience so you can optimize each part

At 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, etc

From Name
Large and bold
Top hierarchy in the inbox
Approximately 25 characters

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

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

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

Gives the reader a brief glimpse into the message content.

Preview pane

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

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

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

You don’t 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.

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 layout
Contras of value and color for content distinction - main CTA
Large text ensures readability
Don’t cram - consider legibility over length
People are used to scrolling and skimming

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 you’re sending a newsletter with multiple articles, call out one of those stories as a featured article at the top. Don’t 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.

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

Don’t 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 email

This email is from Campaign Monitor

1. Single Column, Device-Agnostic Design
This 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 wide
Headings should be at least 30px
Body copy should be at least 20px
Average font size ~16px

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

* 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 blocks
What 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

GIFs are supported across most email clients
Can add an extra element of interactivity to an otherwise static email
Make your first frame of the gif the most descriptive in case it doesn’t 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 video

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

because no universal standard exists—and subscribers increasingly open emails on more devices

and in more environments

So if there’s 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, they’re definitely different. But under the hood, there’s some similarities and differences, too.

Design!
Links!
CSS

Email uses some similar markup in non-traditional ways

Separating presentation from content doesn’t have to be that important in email
>> emails don’t need to be controlled by stylesheets
>> don’t need to be maintained, they’re kind of one-and-done

Enjoy your time machine travels

The single most important guideline for HTML emails is that CSS layout just doesn’t work.

The major email clients either offer no support at all, or mangle it in myriad frustratingly different ways. Using CSS instead of tables was the battle cry of the web standards war, but coding HTML emails means raising the white flag and giving in. Unless you’re building an extremely simple email, or your whole audience is using a more modern email reading tool, it’s back to those all encompassing <table> tags.

The short answer is that scripting is unsupported in emails. This is hardly surprising, given the obvious security risks involved with a script running inside an application that has all that personal information stored in it. Webmail clients are mostly running the interface in JavaScript and are not keen on your email interfering with that, and desktop client filters often consider JavaScript to be an indicator of spam or phishing emails. Even in the cases where it might run, there really is little benefit to scripting in emails. Keep your emails as straight HTML and CSS, and avoid the hassle.

Control the layout using standard HTML tables and avoid CSS for layout (DIV, float, etc).

Use HTML tables, but don’t stack them. Nest all content and tables inside one structural table.

Good support for some CSS basics font-family, font-size, font-style, color, padding

Some support for margin, line-height, background-image, background-position,

Avoid floats, z-index

Block level elements such <p> and <h1> are stripped out or behave unexpectedly, which can

affect your layout. Enclose all text within <td> cells instead and use inline styles to control the text.

Since some email clients block images by default, make sure important images contain an alt

attribute. Use alt tags on all images, even if you don’t want one displayed. If no alt tag is needed,

insert a blank tag: <img alt=”” src…> Alt should come before source (src) to aid with mobile

rendering on Blackberry. Include font, font size, and color properties in your <img> tag to style

your alt text.

Design for images OFF since Gmail and Outlook 2003 and 2007 block images by default

Include alt attributes for images that have important content embedded (your company logo, a hero banner)

To prevent odd spacing issues, always add border=0 and display:block to each image

Always include height and width attributes to ensure proper sizing – set the height and width to the actual size of the image

Your subscribers want emails to work just as well on their mobile devices as they do on their larger

screens. To enhance the way an email looks and works on a smaller screen, you can adjust the

standard version of the email with a few code enhancements. This may include specifying larger

text sizes, resizing images, showing or hiding sections of the email, or making one side drop below

the other side, to name a few. This approach is called responsive design, and these techniques are

generally controlled by CSS. A few responsive design notes to remember:

Responsive email uses media queries
Is placed in the head tag
Is a conditional statement used to determine whether or not the styles inside it will be used at time of open
As you can see here, the media query is saying if the screen is no more than 480px wide, then use the following styles

Since we style everything in our emails using inline styles, we need to use !important declaration to override them

Graphic from Designing for the Mobile Inbox by ExactTarget Marketing Cloud

This is a great graphic showing you a nice optimized mobile email on the right, compared to the same email that hasn’t been optimized at all on the left.

You’ll notice that the desktop-centric graphic on the left has literally no mobile styles applied to the email, which causes the content of the email to shrink significantly on the iPhone

The graphic in the middle looks like there was some mobile considerations like taking the entire message to one-column, but it’s still really hard to read and links are still pretty small

The email on the right –there’s tons of mobile considerations coming into play here – extra large headlines and body copy with plenty of spacing between content, as well as increased size on the links so they are tappable

Before you ever open up a text editor or start to edit HTML, it really helps to know your audience

For all you know, your audience is looking at your emails on a blackberry and so plain text emails will do the trick

What you’re looking for in these reports is your lowest common denominator

Calculated from 552 million opens tracked by Litmus Email Analytics in June 2014

Calculated from 552 million opens tracked by Litmus Email Analytics in June 2014

KNOW YOUR AUDIENCE

http://venturebeat.com/2014/01/22/65-of-all-email-gets-opened-first-on-a-mobile-device-and-thats-great-news-for-marketers/

Rendering is inconsistent across devices and operating systems

So your email is not going to look the same in Gmail as it will on an iPhone

Litmus and Return Path are good email testing services

Otherwise, sign up for email addresses

Blog
Email Swipe Files