Zycevgnztyojkemm6qri Signature 422271bc94a48bcfcac0db8024b19be6b68536d38924560c2e650618f0226c4a Poli 150115181015 Conversion Gate01

8/10/2019 Zycevgnztyojkemm6qri Signature 422271bc94a48bcfcac0db8024b19be6b68536d38924560c2e650618f0226c4a Poli 150115181015 Conversion Gate01

1/63


2/63


3/63


4/63


5/63


6/63


7/63

@lindsaylee13


8/63

Email is Your Friend;It Does Not Suck.


9/63

You Can Create EmailsThat Perform Well and

Deliver Results.


10/63


11/63


12/63


13/63


14/63


15/63


16/63

The subscriber experience

isheow inwhich someone

digestsyour email

before converting.


17/63

From Name Subject Line Preheader

Open Preview Pane Full Message

Tap/Click Landing Page


18/63

From Name


19/63

Subject Line


20/63

Preheader


21/63

Open


22/63

Preview Pane


23/63

Full Message


24/63

Tap/Click


25/63

Landing Page


26/63


27/63

Concise ContentOver Length

Your email is a doorway into

other channels Tell them the essentials


28/63

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

for content distinction


29/63

Make Your Calls

to Action Obvious Only have a few moments to

catch attention Can you na rrow down to one

main CTA? Repeat your main CTAs


30/63


31/63

Be Transparent in Your Language

NO Click Here Big Announcement! You Dont Want to Miss T his! New Items

YES Donate Now Sign Up for Our Webinar Start Your Free Trial Now We Have New Shoes


32/63

RememberImage Blocking

When possible, use HTML text

instead of graphical text Alt text is your friend


33/63


34/63

Design withMobile in Mind

65% of all opens a re on mobile Single c olumn layout Make he adlines ~28px Body copy ~16 -20px


35/63

More MobileConsiderations

Think ab out elements you see in a pps What can be communicated through

icons? Let your content breathe Huge buttons


36/63

Fun Stuff Animated GIFs can add extra

interactivity Video


37/63


38/63


39/63

Email

HTMLCSSImages TextDesign

LinksHierarchy

Web

HTMLCSSImages TextDesign

LinksHierarchy

Some Ways Email and the Web are the Same


40/63

Web

em

backgr"#nd$c"l"rmargin

Email

!xstyle%&'"nt$'ace(

bgc"l"r!adding

Some Ways Email and the Web are Different


41/63


42/63

Time to Code Like its 1999


43/63

Tables areYour BFFs

Use nested tables to structure

the layout of your email Poor support for CSS

positioning, oats, and clears


44/63

KYSS (Keep Your

Styles S imple) Inline CSS Dont attach styles externally Can use some CSS3 but

proceed with caution


45/63

Styling Block-Level Elements

. a# a headline

his is a headline in e#ail

. a# a paragraph

his is a paragraph in e#ail


46/63

Format Perfect

Images Style alt attributes Set borders t o 0 Add style=display:block to

prevent gaps Set height and widths


47/63

What About Responsiveness?


48/63

RiE ilUMdiQi


49/63

Responsive Email Uses Media Queries


50/63


51/63

Therearetons


52/63

There are tonsof email clients out there


53/63

Know Your Audience You never knowsometimes p lain text emails w ill

do the trick Look for the lowest common denominator


54/63

Email Client Market Share

Stats f rom Litmus emailclientmarketshare.com, June 2014


55/63

65%of all emails a re opened on a mobile device

Testtesttest


56/63

Test, test, test


57/63


58/63

Litmus LearningCenter

litmus.com/learning

Email client market

share Code tips


59/63

Email DesignReview

emaildesignreview.com

Lots of inspirational

email design


60/63

ExactTarget Blog

blog.exacttarget.com Current market trends Home to the Email

Swipe Files

ll


61/63

Email Swipe Fileon Pinterest

pinterest.com/exacttarget/email-swipe-le/

Curated examples o fgreat email design

S PlIFllTi


62/63

Some People I Follow on Twitter

ETMC Design@ETMC_Design

Andrea Smith@andreasmith77

Justine Jordan@meladorri

Brian Graves@briangraves


63/63

Thank You!

Documents

Zycevgnztyojkemm6qri Signature 422271bc94a48bcfcac0db8024b19be6b68536d38924560c2e650618f0226c4a Poli 150115181015 Conversion Gate01