@lindsaylee13

@lindsaylee13

@lindsaylee13

@lindsaylee13

Email is Your Friend;

It Does Not Suck.

@lindsaylee13

You Can Create Emails

That Perform Well and
Deliver Results.
@lindsaylee13

@lindsaylee13

@lindsaylee13

@lindsaylee13

@lindsaylee13

@lindsaylee13

@lindsaylee13

The subscriber experience

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

From Name

Subject Line

Preheader

Open

Preview Pane

Full Message

Tap/Click

Landing Page

@lindsaylee13


From Name

Subject Line

@lindsaylee13

Preheader

@lindsaylee13

Open

@lindsaylee13

Preview Pane

@lindsaylee13

Full Message

@lindsaylee13

Tap/Click

@lindsaylee13

Landing Page

@lindsaylee13

@lindsaylee13

Concise Content
Over Length

Your email is a doorway into

other channels

Tell them the essentials

Scannable Layout

Clear headings

One or two column layout

Contrast of weight and color

for content distinction

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

Be Transparent in Your Language

NO

YES

Click Here

Donate Now

Big Announcement!

Sign Up for Our Webinar

You Dont Want to Miss This!

Start Your Free Trial Now

New Items

We Have New Shoes

Remember
Image Blocking

When possible, use HTML text

instead of graphical text

Alt text is your friend

Design with
Mobile in Mind

65% of all opens are on mobile

Single column layout

Make headlines ~28px

Body copy ~16-20px

More Mobile
Considerations

Think about elements you see in apps

What can be communicated through

icons?

Let your content breathe

Huge buttons

Fun Stuf

Animated GIFs can add extra

interactivity

Video

@lindsaylee13

Some Ways Email and the Web are the Same

Email
HTML
CSS
Images
Text
Design
Links
Hierarchy

Web

HTML
CSS
Images
Text
Design
Links
Hierarchy

Some Ways Email and the Web are Diferent

Email

Web

<table>
<td>
<td>
px
style=font-face
bgcolor
padding

<div>
<h1>
<p>
em
<style>
background-color
margin

Time to Code Like its 1999

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>

KYSS (Keep Your

Styles Simple)

Inline CSS

Dont attach styles externally

Can use some CSS3 but

proceed with caution

<table>
<tr>
<td style=fontfamily:Helvetica, sansserif; font-size:16px;
font-weight:bold;
color:#e98300;>Hi, Im
text!</td>
</tr>
</table>

Hi, Im text!

Styling Block-Level Elements

<h1>I am a headline</h1>
<p>I am a paragraph</p>

<td style=font-size:24px;fontweight:bold;>This is a headline in email</td>

<td style=font-size:18px;fontweight:bold;>This is a paragraph in email</td>

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/im
age/cat.jpg height=250
width=200 alt=Cute kitty
style=display:block; fontfamily:Helvetica;
color:#0084ff; fontsize:18px; border=0>

What About Responsiveness?

Responsive Email Uses Media Queries

@lindsaylee13

There are tons

of email clients out there

@lindsaylee13

Know Your Audience

You never knowsometimes plain text emails will

do the trick

Look for the lowest common denominator

Email Client Market Share

Stats from Litmus emailclientmarketshare.com,

June 2014

65%

of all emails are opened on a mobile device

Test, test, test

@lindsaylee13

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

@lindsaylee13

Email Design
Review
emaildesignreview.com
Lots of inspirational
email design

@lindsaylee13

ExactTarget Blog
blog.exacttarget.com

Current market trends

Home to the Email
Swipe Files

@lindsaylee13

Email Swipe File

on Pinterest
pinterest.com/exacttarget/
email-swipe-file/
Curated examples of
great email design

@lindsaylee13

Some People I Follow on Twitter

Justine Jordan

Brian Graves

Anna Yeaman

@meladorri

@briangraves

@stylecampaign

ETMC Design

Andrea Smith

Chad White

@ETMC_Design

@andreasmith77

@chadswhite

@lindsaylee13

Thank You!

@lindsaylee13