Successfully reported this slideshow.
Your SlideShare is downloading. ×

Designing Emails That Actually Work

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Kristina benjamin fonttag
Kristina benjamin fonttag
Loading in …3
×

Check these out next

1 of 63 Ad

Designing Emails That Actually Work

Download to read offline

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.

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.

Advertisement
Advertisement

More Related Content

Viewers also liked (16)

Similar to Designing Emails That Actually Work (20)

Advertisement

Recently uploaded (20)

Designing Emails That Actually Work

  1. @lindsaylee13
  2. @lindsaylee13
  3. @lindsaylee13 @lindsaylee13
  4. Email is Your Friend; It Does Not Suck. @lindsaylee13
  5. You Can Create Emails That Perform Well and Deliver Results. @lindsaylee13
  6. @lindsaylee13
  7. @lindsaylee13
  8. @lindsaylee13
  9. @lindsaylee13
  10. @lindsaylee13
  11. @lindsaylee13
  12. The subscriber experience is the flow in which someone digests your email before converting. @lindsaylee13
  13. From Name Subject Line Preheader Open Preview Pane Full Message Tap/Click Landing Page @lindsaylee13
  14. From Name ✔
  15. @lindsaylee13 Subject Line ✔
  16. @lindsaylee13 Preheader ✔
  17. @lindsaylee13 Open
  18. @lindsaylee13 Preview Pane
  19. @lindsaylee13 Full Message
  20. @lindsaylee13 Tap/Click
  21. @lindsaylee13 Landing Page
  22. @lindsaylee13
  23. Concise Content Over Length • Your email is a doorway into other channels • Tell them the essentials
  24. Scannable Layout • Clear headings • One or two column layout • Contrast of weight and color for content distinction
  25. 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
  26. 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
  27. Remember Image Blocking • When possible, use HTML text instead of graphical text • Alt text is your friend
  28. Design with Mobile in Mind • 65% of all opens are on mobile • Single column layout • Make headlines ~28px • Body copy ~16-20px
  29. …More Mobile Considerations • Think about elements you see in apps • What can be communicated through icons? • Let your content breathe • Huge buttons
  30. Fun Stuff • Animated GIFs can add extra interactivity • Video…
  31. @lindsaylee13
  32. Email HTML CSS Images Text Design Links Hierarchy Web HTML CSS Images Text Design Links Hierarchy ✔ ✔ ✔ ✔ ✔ ✔ ✔ Some Ways Email and the Web are the Same
  33. Web <div> <h1> <p> em <style> background-color margin Email <table> <td> <td> px style=“font-face” bgcolor padding Some Ways Email and the Web are Different
  34. Time to Code Like its 1999
  35. 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>
  36. 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!
  37. 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> ✔ ✔
  38. 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”>
  39. What About Responsiveness?
  40. Responsive Email Uses Media Queries
  41. @lindsaylee13
  42. There are tons of email clients out there @lindsaylee13
  43. Know Your Audience • You never know…sometimes plain text emails will do the trick • Look for the lowest common denominator
  44. Email Client Market Share Stats from Litmus’ emailclientmarketshare.com, June 2014
  45. 65%of all emails are opened on a mobile device
  46. Test, test, test
  47. @lindsaylee13
  48. @lindsaylee13 Litmus Learning Center litmus.com/learning • Email client market share • Code tips
  49. @lindsaylee13 Email Design Review emaildesignreview.com • Lots of inspirational email design
  50. @lindsaylee13 ExactTarget Blog blog.exacttarget.com • Current market trends • Home to the Email Swipe Files
  51. @lindsaylee13 Email Swipe File on Pinterest pinterest.com/exacttarget/ email-swipe-file/ • Curated examples of great email design
  52. @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
  53. Thank You! @lindsaylee13

Editor's Notes

  • 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

  • Blog
    Email Swipe Files

×