Post on 26-Jun-2015
transcript
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