emerge 2012: keys to email creative success

37
Cracking the Code: Keys to Email Creative Success Alex Williams New Orleans, LA April 1720, 2012 #cgxemerge

Upload: alex-williams

Post on 22-Nov-2014

516 views

Category:

Design


2 download

DESCRIPTION

Breaking down the "triangle offense" email design technique and how to design emails in the age of mobile devices and social media.

TRANSCRIPT

Page 1: Emerge 2012: Keys to Email Creative Success

Cracking the Code: Keys to Email Creative Success

Alex Williams

New Orleans, LA April 17–20, 2012

#cgxemerge

Page 2: Emerge 2012: Keys to Email Creative Success

Google me…

Page 3: Emerge 2012: Keys to Email Creative Success

8.15.2011 | Page # Internal Only

Page 4: Emerge 2012: Keys to Email Creative Success

58% of online

consumers begin the

day with email. -ExactTarget, “Subscribers, Fans, &

followers Report #1, Digital Morning

Page 5: Emerge 2012: Keys to Email Creative Success

It’s also branding, sales, content, layout, UX, and technical

execution. You don’t have to be a graphic designer to add value to

the creative process.

Today we’ll discuss:

• How to approach, develop, and evaluate email creative

• Updating your layouts for the new mobile paradigm

• How to connect with your subscribers in the social age

Email creative is more than just

design.

Page 6: Emerge 2012: Keys to Email Creative Success

What?

Why?

How?

Start every email with 3 questions

Page 7: Emerge 2012: Keys to Email Creative Success

What is the point

of this email?

What?

Page 8: Emerge 2012: Keys to Email Creative Success

Why should

they care?

Why?

Page 9: Emerge 2012: Keys to Email Creative Success

How do they take

action?

How?

Page 10: Emerge 2012: Keys to Email Creative Success

The answers to these

questions will help you

concept, build, and evaluate

your email creative using

“The Triangle Offense”.

Page 11: Emerge 2012: Keys to Email Creative Success

This design strategy

embraces the fact that most

people don’t read

emails, they scan.

“The Triangle Offense”

Page 12: Emerge 2012: Keys to Email Creative Success

What?

Why?

How?

Optimize each modular section of an email for fast comprehension of What, Why, How. Users might jump straight from What to How, with the general content and imagery of the inner triangle acting as the Why. Make sure your email passes the triangle scan test.

How it Works

Page 13: Emerge 2012: Keys to Email Creative Success

The Triangle in action

Page 14: Emerge 2012: Keys to Email Creative Success

The Triangle in action

1 problem…countdown to what?

Page 15: Emerge 2012: Keys to Email Creative Success

The Triangle in action

Don’t force decisions in the inbox.

Page 16: Emerge 2012: Keys to Email Creative Success

The Triangle in action

Watch what?

Page 17: Emerge 2012: Keys to Email Creative Success

The Triangle in action

Single Game Suites on Sale Now

Page 18: Emerge 2012: Keys to Email Creative Success

Which one scans better?

Page 19: Emerge 2012: Keys to Email Creative Success

The Keys to the Triangle

Communicate efficiently. Make sense. • Tie your headlines and calls-to-action

together

• Remove extraneous copy and visuals that

don’t support the goal of the email or

module

• Expect your subscribers NOT to read the

entire text

• Find the emotional need of your “What”

Page 20: Emerge 2012: Keys to Email Creative Success

Does this make sense?

Page 21: Emerge 2012: Keys to Email Creative Success

Does this make sense?

Page 22: Emerge 2012: Keys to Email Creative Success

MOBILE

Page 23: Emerge 2012: Keys to Email Creative Success

Smartphones & Tablets (also

known as “mobile”) have

changed email design forever.

Page 24: Emerge 2012: Keys to Email Creative Success
Page 25: Emerge 2012: Keys to Email Creative Success

How mobile are your customers?

Client A – 25% Client B – 11%

Plan based on the audience

Page 26: Emerge 2012: Keys to Email Creative Success

“Mobile Friendly” Email

Creative TOUCH

Thumbs and

fingers are the

new mouse.

Page 27: Emerge 2012: Keys to Email Creative Success

How to make your email “Mobile Friendly”

• The “mobile version” is a dated concept. Mobile

users expect a scalable, readable email.

• Prioritize content, remove “just in case” content

• Increase all font sizes, especially headlines

• Balance HTML & Images, latency can be an

issue (think “airplane mode”).

• Scalable widths will provide readability (640px

max). Explore fluid width tables.

Page 28: Emerge 2012: Keys to Email Creative Success

Desktop version of mobile friendly width

Page 29: Emerge 2012: Keys to Email Creative Success

Mobile version of mobile friendly width

Page 30: Emerge 2012: Keys to Email Creative Success

Advanced: @media queries

CSS style sheets that modify the email

design when device’s capabilities match

specific criteria.

Allows you to:

• Hide content from displaying in the email

• Show higher resolution images on iOS

• Add alt text to background images

• Progressive disclosure to show additional content on

click

• Change text sizes based on screen size

Page 31: Emerge 2012: Keys to Email Creative Success

SOCIAL

Page 32: Emerge 2012: Keys to Email Creative Success

Social = People Power

• Humanize your content

• Use public user generated

content

• Tweets

• Facebook Comments

• Reviews

• Speak using a real voice and

not in marketing/campaign

speak

Page 33: Emerge 2012: Keys to Email Creative Success

“Everybody’s doing it”

Page 34: Emerge 2012: Keys to Email Creative Success

Social Comments are 3rd Party Validation

Page 35: Emerge 2012: Keys to Email Creative Success

Take “you’re” word for it

Page 36: Emerge 2012: Keys to Email Creative Success

Let your customers speak for you

Page 37: Emerge 2012: Keys to Email Creative Success

Thank you!

Alex Williams Director, Creative & Digital Strategy Trendline Interactive [email protected] Twitter @alexcwilliams LinkedIn http://www.linkedin.com/in/emailmarketingstrategy