PPTX, PDF34,861 views

Designing Emails That Actually Work

The document provides guidelines on creating effective email campaigns, emphasizing the importance of a positive subscriber experience and clear calls to action. It highlights the need for mobile-friendly designs, concise content, and proper HTML formatting while avoiding overly complex CSS. Key advice includes testing various designs and considering the audience's preferences to enhance engagement and conversion rates.

Design◦Marketing◦

Designing Emails That Actually Work

1.
@lindsaylee13
2.
@lindsaylee13
7.
@lindsaylee13 @lindsaylee13
8.
Email is YourFriend; It Does Not Suck. @lindsaylee13
9.
You Can CreateEmails That Perform Well and Deliver Results. @lindsaylee13
10.
@lindsaylee13
11.
@lindsaylee13
12.
@lindsaylee13
13.
@lindsaylee13
14.
@lindsaylee13
15.
@lindsaylee13
16.
The subscriber experience isthe flow in which someone digests your email before converting. @lindsaylee13
17.
From Name SubjectLine Preheader Open Preview Pane Full Message Tap/Click Landing Page @lindsaylee13
18.
From Name ✔
19.
@lindsaylee13 Subject Line ✔
20.
@lindsaylee13 Preheader ✔
21.
@lindsaylee13 Open
22.
@lindsaylee13 Preview Pane
23.
@lindsaylee13 Full Message
24.
@lindsaylee13 Tap/Click
25.
@lindsaylee13 Landing Page
26.
@lindsaylee13
27.
Concise Content Over Length •Your email is a doorway into other channels • Tell them the essentials
28.
Scannable Layout • Clearheadings • One or two column layout • Contrast of weight and color for content distinction
29.
Make Your Calls toAction Obvious • Only have a few moments to catch attention • Can you narrow down to one main CTA? • Repeat your main CTAs
31.
Be Transparent inYour 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
32.
Remember Image Blocking • Whenpossible, use HTML text instead of graphical text • Alt text is your friend
34.
Design with Mobile inMind • 65% of all opens are on mobile • Single column layout • Make headlines ~28px • Body copy ~16-20px
35.
…More Mobile Considerations • Thinkabout elements you see in apps • What can be communicated through icons? • Let your content breathe • Huge buttons
36.
Fun Stuff • AnimatedGIFs can add extra interactivity • Video…
38.
@lindsaylee13
39.
Email HTML CSS Images Text Design Links Hierarchy Web HTML CSS Images Text Design Links Hierarchy ✔ ✔ ✔ ✔ ✔ ✔ ✔ Some Ways Emailand the Web are the Same
40.
Web <div> <h1> <p> em <style> background-color margin Email <table> <td> <td> px style=“font-face” bgcolor padding Some Ways Emailand the Web are Different
42.
Time to CodeLike its 1999
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 StylesSimple) • 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>Iam 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 • Stylealt 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”>
47.
What About Responsiveness?
49.
Responsive Email UsesMedia Queries
51.
@lindsaylee13
52.
There are tons ofemail clients out there @lindsaylee13
53.
Know Your Audience •You never know…sometimes plain text emails will do the trick • Look for the lowest common denominator
54.
Email Client MarketShare Stats from Litmus’ emailclientmarketshare.com, June 2014
55.
65%of all emailsare opened on a mobile device
56.
Test, test, test
57.
@lindsaylee13
58.
@lindsaylee13 Litmus Learning Center litmus.com/learning • Emailclient market share • Code tips
59.
@lindsaylee13 Email Design Review emaildesignreview.com • Lotsof inspirational email design
60.
@lindsaylee13 ExactTarget Blog blog.exacttarget.com • Currentmarket trends • Home to the Email Swipe Files
61.
@lindsaylee13 Email Swipe File onPinterest pinterest.com/exacttarget/ email-swipe-file/ • Curated examples of great email design
62.
@lindsaylee13 Some People IFollow on Twitter ETMC Design @ETMC_Design Andrea Smith @andreasmith77 Chad White @chadswhite Justine Jordan @meladorri Brian Graves @briangraves Anna Yeaman @stylecampaign
63.
Thank You! @lindsaylee13

Editor's Notes

#3 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
#4 Some emails I have created during my time at exacttarget
#5 Some emails I have created during my time at exacttarget
#6 Some emails I have created during my time at exacttarget
#7 Some emails I have created during my time at exacttarget
#10 In fact, I’ve come to appreciate the art of email creation and find it a fun challenge to work within its constraints
#11 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
#17 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
#18 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
#19 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.
#20 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
#21 Gives the reader a brief glimpse into the message content.
#23 Preview pane
#24 Preview pane
#25 Preview pane
#26 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
#27 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
#28 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.
#29 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
#30 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.
#32 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
#34 This email is from Campaign Monitor
#35 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
#36 * 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
#37 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
#38 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
#39 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
#40 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
#41 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
#42 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.
#44 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.
#45 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
#46 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.
#47 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
#48 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:
#50 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
#51 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
#54 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
#55 Calculated from 552 million opens tracked by Litmus Email Analytics in June 2014
#56 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/
#57 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
#61 Blog Email Swipe Files

Designing Emails That Actually Work

More Related Content

Viewers also liked

Similar to Designing Emails That Actually Work

Recently uploaded

Designing Emails That Actually Work

Editor's Notes