Social & Mobile in Email Design

Presented by:

Matthew CaldwellSr. Creative Director

Yesmail

Confidential Not to be shared with third parties

Topics Covered

1. How to bring Social to email

a) Linking, Sharing & Dispatches

b) Dispatches – graphical cues for that social look

2. Mobile email Design

a) Changing behaviors call for Scalable Layouts

b) Narrow pages + Big Scale

c) Grid Systems

SOCIAL IN EMAIL3 different ways to bring social into your email

SOCIAL in Email

3 ways to in use Social networking in email:

1. Linking

2. Sharing

3. Dispatches

SOCIAL LINKINGSimply linking to your companies social page

GOOD

INTERESTING / CHALLENGING

BORING / EASY

SOCIAL SHARING sharing specific parts of your email

BETTER

INTERESTING / CHALLENGING

BORING / EASY

SOCIAL SHARING sharing specific parts of your email

BORING / EASY

SOCIAL SHARINGSHARING = Liking, Sharing or Tweeting

1. Liking to Facebook

2. Posting to Facebook

3. Tweeting

SOCIAL SHARINGNo Javascript in email so how to implement?

1. Liking to Facebook

2. Post to Facebook

3. Tweeting

http://www.facebook.com/sharer.php?u=http://www.yourlinkhere.com

http://twitter.com/share?url=http://www.yourlinkhere.com&text=check this out

http://www.facebook.com/plugins/like.php?href=http://www.yourlinkhere.com/&layout=standard&show_faces=true&width=450&action=like

SOCIAL SHARING TIP

“It’s not really sharing if it takes more than 2 clicks.

Sharing must be• instantaneous • pre-populated

SOCIAL DISPATCHESinserting excerpts from social into email

BEST

INTERESTING / CHALLENGING

BORING / EASY

SOCIAL DISPATCHES

Social Dispatches is the act of taking snippets from social networks and reinserting them into email to creating relevant, interesting email content.

Social media = constantly changing

Email = regularly scheduled

SOCIAL DISPATCHESGraphical Social Cues

GRAPHICAL SOCIAL CUESTHE FORMULA FOR THE SOCIAL LOOK

Talk bubbles

GRAPHICAL SOCIAL CUESTHE FORMULA FOR THE SOCIAL LOOKAvatars

GRAPHICAL SOCIAL CUESTHE FORMULA FOR THE SOCIAL LOOKAuthor Photos

GRAPHICAL SOCIAL CUESTHE FORMULA FOR THE SOCIAL LOOK

Social Network Icons

GRAPHICAL SOCIAL CUESTHE FORMULA FOR THE SOCIAL LOOKBig Quote Marks

GRAPHICAL SOCIAL CUESTHE FORMULA FOR THE SOCIAL LOOK

Big Chunky Type, with 140 Chars or less

GRAPHICAL SOCIAL CUESTHE FORMULA FOR THE SOCIAL LOOK

Delineation – strong horizontal rules

SOCIAL DISPATCHESexample one – HP Tech at Work

SOCIAL DISPATCHESexample two – HP Shopping Consumer Reviews

SOCIAL DISPATCHESexample three – My Coke Rewards

SOCIAL DISPATCHESSexample four – VooDoo Gaming

SOCIAL DISPATCHESexample five – HP Newsgram

SOCIAL DISPATCHESexample six – Sephora

Why include Social Dispatches?

1. Looks fresh, timely and new

2. Displays a “community” angle to your content

3. When done properly can be very relevant

4. Can be a great source of content

SOCIAL DISPATCHESHow to produce them

1. You are the editor / curator

2. Search Twitter, Facebook, Blogs, YouTube for posts that apply to your content.

3. Ideally, information posted in the last 60 days

SOCIAL DISPATCHESor… Create your own

1. Call on your audience to respond

1. Tweet to #hashtag,

2. Post on Facebook

3. Reply by Email

2. Collect the best and fill out a Social Dispatches section

3. Users see their own inputs, create interactivity

SOCIAL DISPATCHESCreate your own - Overstock

EMAIL DESIGN: MOBILE

It’s Happening… fastMore and more users are opening your email on their phones

OPENS ON A MOBILE DEVICE

JAN 2008 JAN 2009 JAN 2010 JAN 2011

.25%1-3%

4%

12-15%

SOURCE: YESMAIL 2010 “USER AGENT” TESTING

PREDICTION: By the end of 2011, one third of your list may be reading your email on their phones.

It’s Happening… fast

28%of all phones in the US are now a smart phone

SOURCE The Nielsen Company – 3rd Quarter 2010

Smartphones: cellphones with operating systems resembling those of computers.

It’s Happening… fast

Margaret Caldwell, the authors mother, checking her email on a droid (Samsung Galaxy S)

QUESTION:What percentage of your list opens on a mobile device?

Analyze your USER AGENT STRING to find out

The Good news: HTML email on smart phones is getting better

SOURCE The Nielsen Company – 3rd Quarter 2010

HTML EMAIL ON PHONE?YES - iPhone – the gold standard, resizes to fitYES - Android – but does not resize, requires side scrollingYES - Window mobile – but images off by default, no resizingYES – Palm – yes, some odd formatting, does not scaleNO - Blackberry – still poor, even with new OS6NO - Symbian – your html copy will display, looks poor

Mobile is here – What should I do?

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 only applies to iPhone at

this time but does seem to be the future trend.

Scalable eMail Designs:

A layout reduces in size still looks the good and is

usable / readable.

Scalable email Designs:Approximate message widths ratio of reduction

HOW TO CREATE

Scalable email Designs:

1. Grid system

2. Single column

3. Grouping Sections

4. Big Scale on a narrow page

5. Meta Tag

HOW TO CREATE

Scalable email Designs:

1. Start with a 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:

2. Single Column yes no

HOW TO CREATE

Scalable email Designs:

3. 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:

3. Grouping sections

What works in mobile works in email design

HOW TO CREATE

Scalable email Designs:

4. 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 CREATE

Scalable email Designs:4. Big Scale on a

narrow page

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:

4. Big Scale on a narrow page

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.

HOW TO CREATE

Scalable email Designs:4. Big Scale on a

narrow page

34 points

520 pixels wide

HOW TO CREATE

Scalable email Designs:

5. Viewport Meta Tag

<meta name = "viewport" content = "width = 320">

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:

EXAMPLES

Scalable email Designs:

EXAMPLES

Scalable email Designs:

HOW TO CREATE

Scalable email Designs:

Wait, I’m not a designer what should I do?

1. Insist that your designs are on a GRID – ask ‘em “can I see the grid?”

2. Tell your designer you want a single column layout

3. Tell your designer to view their designs on the phone and big screen while designing, this will influence the outcome

HOW TO CREATE

Scalable email Designs:

Doesn’t that make very tall / long layouts?

•Yes. People scroll now, it’s 2011.

• It’s better to present one thing at a time for clarity & focus

• If twitter or facebook were screen captured it would be 9 feet tall on average

DEVELOPING / WORTH EXPLORING

CSS3 Media Queries

What is it?

•Media queries was introduced in CSS3 to allow a document’s styles to change depending on what it’s viewed on.

•For example: An HTML document can be rendered differently for

• “screen” (computer)• “handheld” (phones)• “print”, “braille” and more.

WORTH EXPLORING

CSS3 Media Queries

What does it look like? (simplified)

<style @media type=“handheld”; width=“320”>

In Summary:Bring Social media to your email not just by buttons but through “dispatches” and / or engagement with results displayed.

Create scalable layouts for iPhone and as more smart phones with “scaling email” functionality enter the market.

Thank you

Matt CaldwellYesmail / Infogroup InteractiveSr. Creative Director

Email: matt.caldwell@infogroup.comWeb: http://www.yesmail.com Twitter: matty_caldwell