'

@lindsaylee13

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





Слайд 0

@lindsaylee13


Слайд 1

@lindsaylee13


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

@lindsaylee13


Слайд 10

@lindsaylee13


Слайд 11

@lindsaylee13


Слайд 12

@lindsaylee13


Слайд 13

@lindsaylee13


Слайд 14

@lindsaylee13


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

@lindsaylee13


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

@lindsaylee13


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

@lindsaylee13


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

@lindsaylee13


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


×

HTML:





Ссылка: