Понравилась презентация – покажи это...

Слайд 1


Слайд 2


Слайд 3

Слайд 4

Слайд 5

Слайд 6

Слайд 7

@lindsaylee13 @lindsaylee13

Слайд 8

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

Слайд 9

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

Слайд 10


Слайд 11


Слайд 12


Слайд 13


Слайд 14


Слайд 15


Слайд 16

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

Слайд 17

From Name Subject Line 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


Слайд 27

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

Слайд 28

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

Слайд 29

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

Слайд 30

Слайд 31

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

Слайд 32

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

Слайд 33

Слайд 34

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

Слайд 35

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

Слайд 36

Fun Stuff Animated GIFs can add extra interactivity Video…

Слайд 37

Слайд 38


Слайд 39

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

Слайд 40

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

Слайд 41

Слайд 42

Time to Code Like 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 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!

Слайд 45

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

Слайд 46

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

Слайд 47

What About Responsiveness?

Слайд 48

Слайд 49

Responsive Email Uses Media Queries

Слайд 50

Слайд 51


Слайд 52

There are tons of email 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 Market Share Stats from Litmus’ emailclientmarketshare.com, June 2014

Слайд 55

65% of all emails are opened on a mobile device

Слайд 56

Test, test, test

Слайд 57


Слайд 58

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

Слайд 59

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

Слайд 60

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

Слайд 61

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

Слайд 62

@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

Слайд 63

Thank You! @lindsaylee13