thriving in the chaotic world of email design
TRANSCRIPT
Thriving in the Chaotic World of Email Design
Email Design Process & Mobile-Scalable FormattingMatthew Caldwell • Sr. Creative Director • Yesmail Interactive
Leveraging Email to Promote Other Marketing ChannelsDavid Refaeli • Director of Email & SMS Marketing • Saveology.com
Navigating Priority Inbox & Video in EmailJeff Worcester • VP of Operations • Proximity Marketing
your presenters
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
The Design ProcessHere’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
6 Steps in the Design Process1. 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
Step 1 - Discovery• Informal, quick easy, 15- 30 minutes• Just meet with your teams • Tell them what your intentions
I’ve got an idea
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
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
Step 3 DocumentationThe message outline
– A list of all the content– In order from top to bottom
Step 3 DocumentationThe wireframe
– Matches the outline graphically
Step 3 - Documentation
Setting expectations- The most important step the design process- Skip it and expect costly redesigns, extra revisions,
frustration, rush
Step 3 - Documentation
OBSERVATION: eager, young / new designers, tend to ‘jump’ into design, too quickly and often miss the mark.
Step 4 - Design
Tip: require 2 designs. The second design will almost always be better
Step 5 – Design presentationDon’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
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
Step 6 – RevisionsTIP: 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
REVISIONSin your INBOX
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
It’s Design Approved!
No more changes?
We’ll move to coding
Email in a Mobile World
It’s Happening… fast
43%of all phones in the US are now a smart phone
SOURCE The Nielsen Company – 3rd Quarter 2011
Smartphones: cellphones with operating systems resembling those of computers.
18%Average number of
“opens on mobile device” for all Yesmail clients
SOURCE Yesmail Enterprise 122 clients
It’s Happening… fast
ACTUAL PHOTO: Margaret Caldwell, my mother, checking her email on a droid (Samsung Galaxy S)
QUESTION:Do you know what percentage of
your list opens on a mobile device?
Analyze your USER AGENT STRING to find out
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…
3 MOBILE OPTIONS – Link to TXT version• Easy• Boring• Requires extra click
3 MOBILE OPTIONS – Link to dedicated mobile version
• Looks great, designed for mobile• Expensive, another custom version• Requires extra click
3 MOBILE OPTIONS – Design your emails to SCALE down cleanly
• One version• Looks great on desktop and
handheld• Largely applies to iPhone
Mobile-Scalable Email Design:A layout that when made smaller is:
• 100% readable without user resizing• 100% clickable with a finger tip
Scalable email Designs:Approximate message widths ratio of reduction
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
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
HOW TO CREATEScalable email Designs:
Your email, when made smaller must be
finger-tip friendly
44 PIXELS
The size of an average finger
HOW TO CREATEScalable 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
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.
Big Scale on a Narrow Page
34 points
520 pixels wide
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.
Grid Systems
Why use a grid system?
• Orderly alignment• Consistent spacing between sections• Provides the ability to quickly create new sections based on that grid system
Why use a grid system?
• Grid-aligned layouts scale down cleanly
Grid-aligned layout Non Grid-aligned layout
HOW TO CREATE
Scalable email Designs:
3. Single Column yes no
HOW TO CREATE
Scalable email Designs:
4. Grouping sections
Distinct sections
Rounded corners
Contrasting colors
Space between sections
Background color as divider
HOW TO CREATE
Scalable Email Designs:
• “Grouping Sections” use the background color as the divider.
• Typically sections are created by horizontal rules
Traditional sections horizontal rules
“Grouping Sections” Background color divides
HOW TO CREATE
Scalable Email Designs:
4. Grouping sections
What works in mobile works in email design
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.
HOW TO CREATE
Scalable email Designs:
5. Viewport Meta Tag
with Meta Tag without Meta Tag
EXAMPLES
Scalable Email Designs:
EXAMPLES
Scalable Email Designs:
EXAMPLES
Scalable Email Designs:
Matthew CaldwellSr. Creative DirectorYesmail Interactive
email: [email protected]: @matty_caldwellphone: 503-419-0596
See more ideas in theYesmail InteractiveEmail Design Look Book
www.yesmail.com/2012lookbook
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
Case Study 1: Mobile App DownloadsChallenge: Leverage Email to Increase Mobile App Downloads & Awareness
- Test Audience (mobile visitors)- Heavy Push (dedicated sends)- Continuity Push (buttons on local templates)
Case Study 1: Mobile App DownloadsKnow Your Data
Test Segment: Visitors to our site from a mobile device or mobile browser
Case Study 1: Mobile App DownloadsSubject: Exciting News! Saveology Has Gone Mobile
Case Study 1: Mobile App DownloadsTest 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)
Case Study 1: Mobile App DownloadsHeavy 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)
Case Study 1: Mobile App DownloadsContinuity Push: App Download Buttonson Local Templates
Case Study 1: Mobile App DownloadsContinuity Push: App Download Buttons on Local Deal Templates
Results:45% Increase In Total Downloads
5% Day Over Day Average Increase in Downloads
Case Study 1: Mobile App DownloadsChallenge: Leverage Email to Increase Mobile App Downloads
Results:
553% GROWTH IN MOBILE APP DOWNLOADS
Case Study 2: Facebook ‘Likes’ AcquisitionChallenge:
Leverage Email to Increase Facebook Likes
Results:11% Open Rate1.47% Unique CTR
24% Increase in Total Likes
99% Click to Conv. Rate
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
Case Study 3: Inbound CallsChallenge: 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 thanother mediums (ppc, seo, affiliates)
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.
Questions?
David RefaeliDirector of Email & SMS Marketing,
Saveology.com
linkedin.com/in/davidrefaeli
Text: DavidR to 70000
Jeff Worcester - AgendaWhat 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
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
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
Navigating the inbox: Hotmail
Navigating the inbox: Hotmail
YIKES!
Navigating the inbox: Hotmail
Suggested action
Navigating the inbox: Hotmail
Navigating the inbox: Hotmail
Navigating the inbox: Gmail
Navigating the inbox: Gmail
Marked a conversation as important
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
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
The arrival of HTML5 and Video in Email
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
HTML5 <Video> in Client Support
Graph courtesy of Campaign Monitor blog
Using HTML5 <Video> in EmailFor 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>
Chrome
HTML5 and Video in Email Support
HTML5 and Video in Email Support
IE8
Fallback image
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
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
Jeff WorcesterProximity Marketing, VP of OperationsP: 330-220-6100 ext. [email protected] @JeffWorcester