These are the slides I presented at Mixwest 2014, a digital marketing conference in Indianapolis, Indiana. My topic was designing and building emails that perform well and deliver results on screens and devices of all kinds.
28. Scannable Layout
• Clear headings
• One or two column layout
• Contrast of weight and color
for content distinction
29. Make Your Calls
to Action Obvious
• Only have a few moments to
catch attention
• Can you narrow down to one
main CTA?
• Repeat your main CTAs
30.
31. Be Transparent in Your Language
NO
• Click Here
• Big Announcement!
• You Don’t Want to Miss This!
• New Items
YES
• Donate Now
• Sign Up for Our Webinar
• Start Your Free Trial Now
• We Have New Shoes
34. Design with
Mobile in Mind
• 65% of all opens are on mobile
• Single column layout
• Make headlines ~28px
• Body copy ~16-20px
35. …More Mobile
Considerations
• Think about elements you see in apps
• What can be communicated through
icons?
• Let your content breathe
• Huge buttons
43. Tables are
Your BFFs
• Use nested tables to structure
the layout of your email
• Poor support for CSS
positioning, floats, and clears
<table width=“600”><tr><td>
<table width=“100%”
cellspacing="0" cellpadding="0"
border="0">
<tr>
<td width=“250”></td>
<td width="350"></td>
</tr>
</table>
</td></tr></table>
44. KYSS (Keep Your
Styles Simple)
• Inline CSS
• Don’t attach styles externally
• Can use some CSS3 but
proceed with caution
<table>
<tr>
<td style=“font-family:Helvetica,
sans-serif; font-size:16px; font-
weight:bold; color:#e98300;>Hi, I’m
text!</td>
</tr>
</table>
Hi, I’m text!
45. Styling Block-Level Elements
<h1>I am a headline</h1>
<td style=“font-size:24px;font-weight:bold;>This is a headline in
email</td>
<p>I am a paragraph</p>
<td style=“font-size:18px;font-weight:bold;>This is a paragraph
in email</td>
✔
✔
46. Format Perfect
Images
• Style alt attributes
• Set borders to “0”
• Add style=“display:block” to
prevent gaps
• Set height and widths
<img
src=“http://www.emails.com/image/cat.j
pg” height=“250” width=“200” alt=“Cute
kitty” style=“display:block; font-
family:Helvetica; color:#0084ff; font-
size:18px;” border=“0”>
62. @lindsaylee13
Some People I Follow on Twitter
ETMC Design
@ETMC_Design
Andrea Smith
@andreasmith77
Chad White
@chadswhite
Justine Jordan
@meladorri
Brian Graves
@briangraves
Anna Yeaman
@stylecampaign
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
Some emails I have created during my time at exacttarget
Some emails I have created during my time 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
Preview pane
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
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