thriving in the chaotic world of email design

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: matt.caldwell@infogroup.comtwitter: @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

@Davref18drefaeli@saveology.com

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. 231jeffw@proximitymarketing.com @JeffWorcester