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

Слайд 0


Слайд 1


Слайд 2

Слайд 3

Слайд 4

Слайд 5

Слайд 6

@lindsaylee13 @lindsaylee13

Слайд 7

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

Слайд 8

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

Слайд 9


Слайд 10


Слайд 11


Слайд 12


Слайд 13


Слайд 14


Слайд 15

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

Слайд 16

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

Слайд 17

From Name ?

Слайд 18

@lindsaylee13 Subject Line ?

Слайд 19

@lindsaylee13 Preheader ?

Слайд 20

@lindsaylee13 Open

Слайд 21

@lindsaylee13 Preview Pane

Слайд 22

@lindsaylee13 Full Message

Слайд 23

@lindsaylee13 Tap/Click

Слайд 24

@lindsaylee13 Landing Page

Слайд 25


Слайд 26

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

Слайд 27

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

Слайд 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

Слайд 29

Слайд 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

Слайд 31

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

Слайд 32

Слайд 33

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

Слайд 34

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

Слайд 35

Fun Stuff Animated GIFs can add extra interactivity Video…

Слайд 36

Слайд 37


Слайд 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

Слайд 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

Слайд 40

Слайд 41

Time to Code Like its 1999

Слайд 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>

Слайд 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!

Слайд 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> ? ?

Слайд 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”>

Слайд 46

What About Responsiveness?

Слайд 47

Слайд 48

Responsive Email Uses Media Queries

Слайд 49

Слайд 50


Слайд 51

There are tons of email clients out there @lindsaylee13

Слайд 52

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

Слайд 53

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

Слайд 54

65% of all emails are opened on a mobile device

Слайд 55

Test, test, test

Слайд 56


Слайд 57

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

Слайд 58

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

Слайд 59

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

Слайд 60

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

Слайд 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

Слайд 62

Thank You! @lindsaylee13