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

1. ™
Cracking the Code: Keys to Email Creative Success
Alex Williams
New Orleans, LA April 17–20, 2012
#cgxemerge

2. Google me…

3. 8.15.2011 | Page # Internal Only

4. 58% of online
consumers begin the
day with email.
-ExactTarget, “Subscribers, Fans, &
followers Report #1, Digital Morning

5. Email creative is more than just
design.
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

6. Start every email with 3 questions
What?
Why?
How?

7. What?
What is the point
of this email?

8. Why?
Why should
they care?

9. How?
How do they take
action?

10. The answers to these
questions will help you
concept, build, and evaluate
your email creative using
“The Triangle Offense”.

11. “The Triangle Offense”
This design strategy
embraces the fact that most
people don’t read
emails, they scan.

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

13. The Triangle in action

14. The Triangle in action
1 problem…countdown to what?

15. The Triangle in action
Don’t force decisions in the inbox.

16. The Triangle in action
Watch what?

17. The Triangle in action
Single Game Suites on Sale Now

18. Which one scans better?

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

20. Does this make sense?

21. Does this make sense?

22. MOBILE

23. Smartphones & Tablets (also
known as “mobile”) have
changed email design forever.

25. How mobile are your customers?
Client A – 25% Client B – 11%
Plan based on the audience

26. “Mobile Friendly” Email
Creative
TOUCH
Thumbs and
fingers are the
new mouse.

27. 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.

28. Desktop version of mobile friendly width

29. Mobile version of mobile friendly width

30. 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

31. SOCIAL

32. 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

33. “Everybody’s doing it”

34. Social Comments are 3rd Party Validation

35. Take “you’re” word for it

36. Let your customers speak for you

37. Thank you!
Alex Williams
Director, Creative & Digital Strategy
Trendline Interactive
alex@trendlineinteractive.com
Twitter
@alexcwilliams
LinkedIn
http://www.linkedin.com/in/emailmarketingstrategy