Session Presentation

1. Thriving in the Chaotic World
of Email Design
your presenters
Email Design Process & Mobile-Scalable Formatting
Matthew Caldwell • Sr. Creative Director • Yesmail Interactive
Leveraging Email to Promote Other Marketing Channels
David Refaeli • Director of Email & SMS Marketing • Saveology.com
Navigating Priority Inbox & Video in Email
Jeff Worcester • VP of Operations • Proximity Marketing

2. Matt Caldwell – Agenda
Here’s what we’ll cover
1. Email Design Process
Tips & tricks to get it done faster & easier
2. Mobile-Scalable Email Formatting
How to make ONE email layout for all – desktops, phones & tablets

3. The Design Process
Here’s what we’ll cover
• Key steps in the design process
• The importance of setting expectations
• Wireframing & Document outlines – from your designer
• Copy & the act of copy-distilling
• Revision tracking – not in email!
• Design Approved – Clear endings
• One email layout for all devices

4. 6 Steps in the Design Process
1. Discovery – quick informal, easy
2. Kickoff – Official start, fully brief your designers
3. Documentation – Designers “brief you back”
– Message outline – simple list of contents
– Wireframe – simple lines and boxes to represent outline
4. Design & Present
5. Revise
6. Design Approved
7. Code
8. Launch

5. Step 1 - Discovery
• Informal, quick easy, 15- 30 minutes
• Just meet with your teams
• Tell them what your intentions
I’ve got an
idea

6. Step 2 - Kickoff
• Formal Start, 1 hour
• Tell your designers everything, all aspects of the challenge
• Meet in person or on the phone – interaction is key
• If your designer asks no questions – you’ve got a problem

7. Step 3 - Documentation
• “Documentation before design”
• In busy email world, often this step is skipped – big mistake
• Designers need to ‘brief back’ with outline & wireframe
– This is what I heard you say
– This is the contents and order of the email – OUTLINE
– This is what can actually fit in the email

8. Step 3 Documentation
The message outline
– A list of all the content
– In order from top to bottom

9. Step 3 Documentation
The wireframe
– Matches the outline graphically

10. Step 3 - Documentation
Setting expectations
- The most important step the design process
- Skip it and expect costly redesigns, extra revisions,
frustration, rush

11. Step 3 - Documentation
OBSERVATION: eager, young / new designers,
tend to ‘jump’ into design, too quickly and
often miss the mark.

12. Step 4 - Design
Tip: require 2 designs. The second
design will almost always be better

13. Step 5 – Design presentation
Don’t “throw over the fence”!
Designers: Never email the layout
Designers must always present their
designs, rationale and reasons
in person or on the phone.
Bottom line: the whole process will go smoother
with less revs if presented

14. Step 6 – Revisions
• Two types of revisions:
1. Big Picture REVISION
“I like what you did but it needs to be more energetic”
2. Details REVISION
“change that URL to…”
• Big Picture revision = always in person/phone
– Don’t try to write this out, it’ll take a lot of time & never sounds right
• Detail Revisions = listed out
– Always write this out in a clear list

15. Step 6 – Revisions
TIP: Keep design revisions out of the inbox
• Instead use a central spread sheet
or central tracking system
• Will greatly reduce your email churn
• Will create a nice clean log of changes
REVISIONS
in your INBOX

16. Step 7 – Design Approved
• Design must be approved before coding
• By requiring this step, last minute edits avoided
• Forces the client to finalize before coding
• Many skip this step = revision keep coming
No more
It’s Design changes?
Approved! We’ll
move to
coding

17. Email in a Mobile World

18. It’s Happening… fast
43% 18%
of all phones in the US Average number of
are now a smart phone “opens on mobile device”
for all Yesmail clients
Smartphones: cellphones with operating systems resembling those of computers.
SOURCE The Nielsen Company – 3rd Quarter 2011 SOURCE Yesmail Enterprise 122 clients

19. It’s Happening… fast
ACTUAL PHOTO: Margaret Caldwell, my mother, checking her email on a droid (Samsung Galaxy S)

20. QUESTION:
Do you know what percentage
of your list opens on a mobile
device?
Analyze your USER AGENT STRING to find out

21. 3 Options for Mobile Opens
1. Link to your TXT version (snore)
2. Create dedicated mobile versions (pricey)
3. Redesign your layouts to be Scalable
(best & easiest)
Let‟s look at the pros and cons of each…

22. 3 MOBILE OPTIONS – Link to TXT version
• Easy
• Boring
• Requires extra click

23. 3 MOBILE OPTIONS – Link to dedicated mobile version
• Looks great, designed for mobile
• Expensive, another custom version
• Requires extra click

24. 3 MOBILE OPTIONS – Design your emails to SCALE down cleanly
• One version
• Looks great on desktop and
handheld
• Largely applies to iPhone

25. Mobile-Scalable Email Design:
A layout that when made smaller is:
• 100% readable without user resizing
• 100% clickable with a finger tip

26. Scalable email Designs:
Approximate message widths ratio of reduction

27. HOW TO CREATE
Scalable email Designs:
1. Big Scale on a narrow page
2. Grid system
3. Single column
4. Grouping Sections
5. Meta Tag

28. HOW TO CREATE
Scalable email Designs:
1. Big Scale on a Narrow Page
First consider a less wide page:
Then = 600 pixels wide
Now = reduce to 450, 500, 525
600 pixels wide 480-550 pixels wide

29. HOW TO CREATE
Scalable email Designs:
Your email, when made smaller must be
finger-tip friendly
44 PIXELS
The size of an
average finger

30. HOW TO CREATE
Scalable email Designs:
increase the size of your copy and buttons
Minimum font size = 14 points
Title case font size = 30+
Go big and chunky!
It‟s easier to read, but means less words

31. HOW TO CREATE
Scalable email Designs:
Warning: You will need to
go on a WORD DIET.
Scalable layouts depend on
character counts
Too many words and the large type
becomes overpowering.

32. Big Scale on a Narrow Page
520 pixels
wide
34 points

33. HOW TO CREATE
Scalable email Designs:
2. Grid System
A Grid System is an alignment tool for layouts.
A system of measurement in pixels that breaks down a layout into a series
of columns, gutters and margins.

34. Grid Systems

35. Why use a grid system?
• Orderly alignment
• Consistent spacing between sections
• Provides the ability to quickly create new sections
based on that grid system

36. Why use a grid system?
• Grid-aligned layouts scale down cleanly
Grid-aligned layout Non Grid-aligned layout

37. HOW TO CREATE
Scalable email Designs:
3. Single Column
yes no

38. HOW TO CREATE
Scalable email
Designs:
4. Grouping sections
 Distinct sections
 Rounded corners
 Contrasting colors
 Space between sections
 Background color as divider

39. HOW TO CREATE
Scalable Email Designs:
• “Grouping Sections” use the background color as the divider.
• Typically sections are created by horizontal rules
Traditional sections “Grouping Sections”
horizontal rules Background color divides

40. HOW TO CREATE
Scalable Email
Designs:
4. Grouping sections
What works in mobile
works in email design

41. HOW TO CREATE
Scalable email Designs:
5. Viewport Meta Tag
<meta name="viewport"
content="width=device-width,
initial-scale=1.0, maximum-scale=1.6,
user-scalable=no" />
Viewport : Changes the logical window size used when
displaying a page on iOS.

42. HOW TO CREATE
Scalable email Designs:
5. Viewport Meta Tag
with Meta Tag without Meta Tag

43. EXAMPLES
Scalable Email Designs:

44. EXAMPLES
Scalable Email Designs:

45. EXAMPLES
Scalable Email Designs:

46. See more ideas in the
Yesmail Interactive
Email Design Look Book
www.yesmail.com/2012lookbook
Matthew Caldwell
Sr. Creative Director
Yesmail Interactive
email: matt.caldwell@infogroup.com
twitter: @matty_caldwell
phone: 503-419-0596

47. David Refaeli - Agenda
• How can we leverage Email to promote
other marketing channels and/or business
units?
– Mobile App Downloads
– Facebook „Like‟ Acquisitions
– Inbound Calls

48. Case Study 1: Mobile App Downloads
Challenge: Leverage Email to Increase
Mobile App Downloads & Awareness
- Test Audience (mobile visitors)
- Heavy Push (dedicated sends)
- Continuity Push (buttons on local templates)

49. Case Study 1: Mobile App Downloads
Know Your Data
Test Segment: Visitors to our site from a
mobile device or mobile browser

50. Case Study 1: Mobile App Downloads
Subject: Exciting News! Saveology Has Gone Mobile

51. Case Study 1: Mobile App Downloads
Test Segment:
Visitors to our site from a mobile device or mobile browser
Results:
24% Open Rate
2.66% Unique CTR
21% Increase In Total Downloads (from original
amount)
(40% of New Downloads from Email Links, 60%
Awareness Search Downloads)

52. Case Study 1: Mobile App Downloads
Heavy Push:
Dedicated Email to All Subscribers
(Staggered over 5 sends)
Results:
16% Open Rate
0.7% Unique CTR
64% Increase In Total Downloads
(74% of New Downloads from Email Links,
26% from Awareness Search Downloads)

53. Case Study 1: Mobile App Downloads
Continuity Push:
App Download Buttons
on Local Templates

54. Case Study 1: Mobile App Downloads
Continuity Push:
App Download Buttons on Local Deal Templates
Results:
45% Increase In Total Downloads
5% Day Over Day Average Increase in Downloads

55. Case Study 1: Mobile App Downloads
Challenge:
Leverage Email to Increase Mobile App Downloads
Results:
553% GROWTH
IN MOBILE APP DOWNLOADS

56. Case Study 2: Facebook „Likes‟ Acquisition
Challenge:
Leverage Email
to Increase Facebook Likes
Results:
11% Open Rate
1.47% Unique CTR
24% Increase in Total Likes
99% Click to Conv. Rate

57. Case Study 2: Facebook „Likes‟ Acquisition
• Results Were Achieved Over a 2 Day Period
• Incentivizing Customers
– Reward Your Customers Instead of Buying Media to
Acquire Them on a Different Channel
– Increases Brand Loyalty
– Increases Likelihood of Repeat Purchases
– Gain Ability to “Touch” Customers Across Multiple
Channels and Stay “Front of Mind”
• Great Way to Maximize Surplus of Monthly
Advertising Budgets

58. Case Study 3: Inbound Calls
Challenge:
Leverage Email to Drive Calls to a Separate Business Unit
Results:
12% Open Rate
Cost Per Call:
4 Times Lower than PPC
Call to Close Rate:
5% Higher than
other mediums
(ppc, seo, affiliates)

59. What We‟ve Learned
• Email is a highly effective tool to promote other
marketing channels and/or business units
– Increased Mobile App Downloads by 553%
– Increased Facebook Likes by 24%
– Reduced Cost Per Call by 4 Times
as Compared to PPC
Key Takeaway:
Regardless of the acquisition channel (ppc, seo, affiliates,
etc), Email is the key to retention marketing.

60. Questions?
David Refaeli
Director of Email & SMS Marketing,
Saveology.com
linkedin.com/in/davidrefaeli
@Davref18
drefaeli@saveology.com
Text: DavidR to 70000

61. Jeff Worcester - Agenda
What we‟ll discuss
• Navigating the inbox: Priority Inbox and Graymail
– An overview of Hotmail and Gmail‟s new inbox tools and tactics
– What users see
– Tactics for avoiding the abyss
• The arrival of HTML5 and Video in Email
– Client support
– How to code your email
– What users will see

62. Navigating the new inbox
The new inbox is more fragmented. Both Hotmail (2011) and Gmail
(late 2010) have changed the way email is viewed and managed.
Other ISPs and desktop clients will likely adopt similar advanced
filtering technology to decide what gets priority in your inbox.
What‟s in the inbox?
Source: The Windows Blog: Hotmail declares war on graymail, 10/3/2011

63. Navigating the inbox
• Hotmail is now automatically categorizing emails as they arrive in
the inbox
• Hotmail released a series of new tools that can shorten the
conversation between marketers and their audience
• Gmail has been determining the relevance of emails as they arrive
in the inbox
• Gmail‟s filtering algorithm is based primarily on engagement metrics

64. Navigating the inbox: Hotmail

65. Navigating the inbox: Hotmail

66. Navigating the inbox: Hotmail
YIKES!

67. Navigating the inbox: Hotmail
Suggested action

68. Navigating the inbox: Hotmail

69. Navigating the inbox: Gmail

70. Navigating the inbox: Gmail
Marked a
conversation as
important

71. The Moral of the Story
• Getting your share of the inbox is getting more difficult
• The SPAM filter is only the first gatekeeper
• Past performance DOES contribute to future relevance
• Hotmail‟s model requires users to change settings usually left on default
• Gmail‟s model is more of a challenge because it‟s predetermining relevance
on our behalf
• A series of failed attempts to engage could leave you out of Gmail‟s circle of
trust forever
• Other ISP‟s and email clients will likely follow soon

72. So What Can We Do?
Take a common sense approach to engagement:
• Personalization: the more personal, the more relevant
• Keywords are critical. Knowing user interests is more important than
ever.
• Require a double opt in
• Ask users to “Like” you on Facebook, follow you on Twitter or post on a
blog
• Calls to action must not only be clear, but should be more time sensitive
• Get users to physically reply to a message
• Target these two groups with a “how-to” message to manage their email
– Get Gmail users to start a conversation or mark it as important
– Instruct Hotmail users on how they can use a filter to manage their subscription

73. The arrival of HTML5 and
Video in Email

74. HTML5 <Video> in Email
• W3C has announced in February 2011 that July 2014 will be date that
HTML5 become the official recommendation of web standard
• HTML5 simplifies and standardizes video embedding protocols
• In addition to browser support, email support is expanding
• iOS has supported <video> in mobile devices and Apple Mail for several
years
• Full feature videos in email can be a game changer for marketers,
publishers, content providers and email users
• The best, part is HTML5 video implementation is simple

75. HTML5 <Video> in Client Support
Graph courtesy of Campaign Monitor blog

76. Using HTML5 <Video> in Email
For maximum compatibility for <video> embed in HTML5 use these formats.
1. .MP4
2. .OGG
3. .WEBM
Here‟s the source code….
<video width="600" poster=“TestVideo.png" controls autoplay>
<source src="http://yourdomain.com/test.mp4" type="video/mp4" />
<source src="http://yourdomain.com/test.ogv" type="video/ogg" />
<source src="http://yourdomain.com/test.webm" type="video/webm" />
<!-- Fallback if not supported -->
<a href="http://somefundomain.com">
<img border="0" src=" TestVideo.png " label=“VideoIsFun“ width="600">
</a>
</video>

77. HTML5 and Video in Email Support
Chrome

78. HTML5 and Video in Email Support
Fallback image
IE8

79. HTML5 and Video in Email Support
• Hotmail‟s support is not perfect, but it‟s better than no support
– Controls are stripped out, but autoplay still works (except IE 7/8)
– If autoplay is not on, only the first frame displays in Safari and right click is disabled
Graph courtesy of Campaign Monitor blog

80. HTML5 and Video in Email - Summary
• iOS support is universal across all devices
• Hotmail support is still a little dicey and support varies on the OS being used
• Most other email clients and mobile devices are displaying fallback content
well
• Support should be more rapid in the months ahead making video a great
opportunity for marketers, publishers and content owners to reach, influence
and engage their audience

81. Jeff Worcester
Proximity Marketing, VP of Operations
P: 330-220-6100 ext. 231
jeffw@proximitymarketing.com
@JeffWorcester