If you like this presentation – show it...

Slide 0


Slide 1


Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

@lindsaylee13 @lindsaylee13

Slide 7

Email is Your Friend; It Does Not Suck. @lindsaylee13

Slide 8

You Can Create Emails That Perform Well and Deliver Results. @lindsaylee13

Slide 9


Slide 10


Slide 11


Slide 12


Slide 13


Slide 14


Slide 15

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

Slide 16

From Name Subject Line Preheader Open Preview Pane Full Message Tap/Click Landing Page @lindsaylee13

Slide 17

From Name ?

Slide 18

@lindsaylee13 Subject Line ?

Slide 19

@lindsaylee13 Preheader ?

Slide 20

@lindsaylee13 Open

Slide 21

@lindsaylee13 Preview Pane

Slide 22

@lindsaylee13 Full Message

Slide 23

@lindsaylee13 Tap/Click

Slide 24

@lindsaylee13 Landing Page

Slide 25


Slide 26

Concise Content Over Length Your email is a doorway into other channels Tell them the essentials

Slide 27

Scannable Layout Clear headings One or two column layout Contrast of weight and color for content distinction

Slide 28

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

Slide 29

Slide 30

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

Slide 31

Remember Image Blocking When possible, use HTML text instead of graphical text Alt text is your friend

Slide 32

Slide 33

Design with Mobile in Mind 65% of all opens are on mobile Single column layout Make headlines ~28px Body copy ~16-20px

Slide 34

…More Mobile Considerations Think about elements you see in apps What can be communicated through icons? Let your content breathe Huge buttons

Slide 35

Fun Stuff Animated GIFs can add extra interactivity Video…

Slide 36

Slide 37


Slide 38

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

Slide 39

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

Slide 40

Slide 41

Time to Code Like its 1999

Slide 42

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>

Slide 43

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!

Slide 44

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> ? ?

Slide 45

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.jpg” height=“250” width=“200” alt=“Cute kitty” style=“display:block; font-family:Helvetica; color:#0084ff; font-size:18px;” border=“0”>

Slide 46

What About Responsiveness?

Slide 47

Slide 48

Responsive Email Uses Media Queries

Slide 49

Slide 50


Slide 51

There are tons of email clients out there @lindsaylee13

Slide 52

Know Your Audience You never know…sometimes plain text emails will do the trick Look for the lowest common denominator

Slide 53

Email Client Market Share Stats from Litmus’ emailclientmarketshare.com, June 2014

Slide 54

65% of all emails are opened on a mobile device

Slide 55

Test, test, test

Slide 56


Slide 57

@lindsaylee13 Litmus Learning Center litmus.com/learning Email client market share Code tips

Slide 58

@lindsaylee13 Email Design Review emaildesignreview.com Lots of inspirational email design

Slide 59

@lindsaylee13 ExactTarget Blog blog.exacttarget.com Current market trends Home to the Email Swipe Files

Slide 60

@lindsaylee13 Email Swipe File on Pinterest pinterest.com/exacttarget/email-swipe-file/ Curated examples of great email design

Slide 61

@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

Slide 62

Thank You! @lindsaylee13