Your SlideShare is downloading. ×
0
Social & Mobile in Email Design <ul><li>Presented by: </li></ul><ul><li>Matthew Caldwell </li></ul><ul><li>Sr. Creative Di...
Topics Covered <ul><li>How to bring Social to email </li></ul><ul><ul><li>Linking, Sharing & Dispatches </li></ul></ul><ul...
SOCIAL IN EMAIL 3 different ways to bring social into your email
SOCIAL in Email <ul><li>3 ways to in use Social networking in email: </li></ul><ul><li>Linking </li></ul><ul><li>Sharing <...
SOCIAL LINKING Simply 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 SHARING SHARING  = Liking, Sharing or Tweeting  1. Liking to Facebook 2. Posting to Facebook 3. Tweeting
SOCIAL SHARING No Javascript in email so how to implement? 1. Liking to Facebook 2. Post to Facebook 3. Tweeting http://ww...
SOCIAL SHARING TIP “ It’s not really sharing if it takes more than 2 clicks. Sharing must be •  instantaneous  •  pre-popu...
SOCIAL DISPATCHES inserting 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...
SOCIAL DISPATCHES Graphical Social Cues
GRAPHICAL SOCIAL CUES THE FORMULA FOR THE SOCIAL LOOK Talk bubbles
GRAPHICAL SOCIAL CUES THE FORMULA FOR THE SOCIAL LOOK Avatars
GRAPHICAL SOCIAL CUES THE FORMULA FOR THE SOCIAL LOOK Author Photos
GRAPHICAL SOCIAL CUES THE FORMULA FOR THE SOCIAL LOOK Social Network Icons
GRAPHICAL SOCIAL CUES THE FORMULA FOR THE SOCIAL LOOK Big Quote Marks
GRAPHICAL SOCIAL CUES THE FORMULA FOR THE SOCIAL LOOK Big Chunky Type, with 140 Chars or less
GRAPHICAL SOCIAL CUES THE FORMULA FOR THE SOCIAL LOOK Delineation – strong horizontal rules
SOCIAL DISPATCHES example one – HP Tech at Work
SOCIAL DISPATCHES example two – HP Shopping Consumer Reviews
SOCIAL DISPATCHES example three – My Coke Rewards
SOCIAL DISPATCHESS example four – VooDoo Gaming
SOCIAL DISPATCHES example five – HP Newsgram
SOCIAL DISPATCHES example six – Sephora
Why include Social Dispatches? <ul><li>Looks fresh, timely and new </li></ul><ul><li>Displays a “community” angle to your ...
SOCIAL DISPATCHES How to produce them <ul><li>You are the editor / curator </li></ul><ul><li>Search Twitter, Facebook, Blo...
SOCIAL DISPATCHES or…  Create your own <ul><li>Call on your audience to respond </li></ul><ul><ul><li>Tweet to #hashtag,  ...
SOCIAL DISPATCHES Create your own - Overstock
EMAIL DESIGN: MOBILE
It’s Happening… fast More and more users are opening your email on their phones OPENS ON A MOBILE DEVICE JAN  2008  JAN  2...
It’s Happening… fast 28% of all phones in the US are now a smart phone SOURCE The Nielsen Company – 3 rd  Quarter 2010  Sm...
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 – 3 rd  Quarter 2010  HTML EMAIL O...
Mobile is here – What should I do? <ul><li>3 OPTIONS FOR MOBILE OPENS : </li></ul><ul><li>Link to your TXT version (snore)...
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 v...
3 MOBILE OPTIONS  –  Design your emails to SCALE down cleanly  •   One version •   Looks great on desktop and handheld •  ...
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: <ul><li>Grid system </li></ul><ul><li>Single column </li></ul><ul><li>Grouping Secti...
HOW TO CREATE Scalable email Designs: <ul><li>Start with a Grid System </li></ul>A Grid System is an alignment tool for la...
Grid Systems
Why use a grid system? <ul><li>Orderly alignment </li></ul><ul><li>Consistent spacing between sections </li></ul><ul><li>P...
Why use a grid system? <ul><li>Grid-aligned layouts scale down cleanly </li></ul>Grid-aligned layout  Non Grid-aligned lay...
HOW TO CREATE Scalable email Designs: 2. Single Column  yes no
HOW TO CREATE Scalable email Designs: <ul><li>3. Grouping sections </li></ul><ul><li>Distinct sections </li></ul><ul><li>R...
HOW TO CREATE Scalable email Designs: <ul><li>“ Grouping Sections” use the background color as the divider.  </li></ul><ul...
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 wid...
HOW TO CREATE Scalable email Designs: 4. Big Scale on a narrow page increase the size of your copy and buttons Minimum fon...
HOW TO CREATE Scalable email Designs: 4. Big Scale on a narrow page Warning: You will need to go on a WORD DIET. Scalable ...
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 = &quot;viewport&quot; content = &quot;width = 320&q...
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: <ul><li>Wait, I’m not a designer what should I do? </li></ul><ul><li>Insist that you...
HOW TO CREATE Scalable email Designs: <ul><li>Doesn’t that make very tall / long layouts? </li></ul><ul><li>Yes. People sc...
DEVELOPING / WORTH EXPLORING CSS3 Media Queries <ul><li>What is it? </li></ul><ul><li>Media queries was introduced in CSS3...
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...
Thank you Matt Caldwell Yesmail / Infogroup Interactive Sr. Creative Director Email:   [email_address] Web :  http://www.y...
Upcoming SlideShare
Loading in...5
×

Eis tue 0815 sponsor infogroup

435

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
435
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Eis tue 0815 sponsor infogroup"

  1. 1. Social & Mobile in Email Design <ul><li>Presented by: </li></ul><ul><li>Matthew Caldwell </li></ul><ul><li>Sr. Creative Director </li></ul><ul><li>Yesmail </li></ul>Confidential Not to be shared with third parties
  2. 2. Topics Covered <ul><li>How to bring Social to email </li></ul><ul><ul><li>Linking, Sharing & Dispatches </li></ul></ul><ul><ul><li>Dispatches – graphical cues for that social look </li></ul></ul><ul><li>Mobile email Design </li></ul><ul><ul><li>Changing behaviors call for Scalable Layouts </li></ul></ul><ul><ul><li>Narrow pages + Big Scale </li></ul></ul><ul><ul><li>Grid Systems </li></ul></ul>
  3. 3. SOCIAL IN EMAIL 3 different ways to bring social into your email
  4. 4. SOCIAL in Email <ul><li>3 ways to in use Social networking in email: </li></ul><ul><li>Linking </li></ul><ul><li>Sharing </li></ul><ul><li>Dispatches </li></ul>
  5. 5. SOCIAL LINKING Simply linking to your companies social page GOOD INTERESTING / CHALLENGING BORING / EASY
  6. 6. SOCIAL SHARING sharing specific parts of your email BETTER INTERESTING / CHALLENGING BORING / EASY
  7. 7. SOCIAL SHARING sharing specific parts of your email BORING / EASY
  8. 8. SOCIAL SHARING SHARING = Liking, Sharing or Tweeting 1. Liking to Facebook 2. Posting to Facebook 3. Tweeting
  9. 9. SOCIAL SHARING No 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/ &amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like
  10. 10. SOCIAL SHARING TIP “ It’s not really sharing if it takes more than 2 clicks. Sharing must be • instantaneous • pre-populated
  11. 11. SOCIAL DISPATCHES inserting excerpts from social into email BEST INTERESTING / CHALLENGING BORING / EASY
  12. 12. 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
  13. 13. SOCIAL DISPATCHES Graphical Social Cues
  14. 14. GRAPHICAL SOCIAL CUES THE FORMULA FOR THE SOCIAL LOOK Talk bubbles
  15. 15. GRAPHICAL SOCIAL CUES THE FORMULA FOR THE SOCIAL LOOK Avatars
  16. 16. GRAPHICAL SOCIAL CUES THE FORMULA FOR THE SOCIAL LOOK Author Photos
  17. 17. GRAPHICAL SOCIAL CUES THE FORMULA FOR THE SOCIAL LOOK Social Network Icons
  18. 18. GRAPHICAL SOCIAL CUES THE FORMULA FOR THE SOCIAL LOOK Big Quote Marks
  19. 19. GRAPHICAL SOCIAL CUES THE FORMULA FOR THE SOCIAL LOOK Big Chunky Type, with 140 Chars or less
  20. 20. GRAPHICAL SOCIAL CUES THE FORMULA FOR THE SOCIAL LOOK Delineation – strong horizontal rules
  21. 21. SOCIAL DISPATCHES example one – HP Tech at Work
  22. 22. SOCIAL DISPATCHES example two – HP Shopping Consumer Reviews
  23. 23. SOCIAL DISPATCHES example three – My Coke Rewards
  24. 24. SOCIAL DISPATCHESS example four – VooDoo Gaming
  25. 25. SOCIAL DISPATCHES example five – HP Newsgram
  26. 26. SOCIAL DISPATCHES example six – Sephora
  27. 27. Why include Social Dispatches? <ul><li>Looks fresh, timely and new </li></ul><ul><li>Displays a “community” angle to your content </li></ul><ul><li>When done properly can be very relevant </li></ul><ul><li>Can be a great source of content </li></ul>
  28. 28. SOCIAL DISPATCHES How to produce them <ul><li>You are the editor / curator </li></ul><ul><li>Search Twitter, Facebook, Blogs, YouTube for posts that apply to your content. </li></ul><ul><li>Ideally, information posted in the last 60 days </li></ul>
  29. 29. SOCIAL DISPATCHES or… Create your own <ul><li>Call on your audience to respond </li></ul><ul><ul><li>Tweet to #hashtag, </li></ul></ul><ul><ul><li>Post on Facebook </li></ul></ul><ul><ul><li>Reply by Email </li></ul></ul><ul><li>Collect the best and fill out a Social Dispatches section </li></ul><ul><li>Users see their own inputs, create interactivity </li></ul>
  30. 30. SOCIAL DISPATCHES Create your own - Overstock
  31. 31. EMAIL DESIGN: MOBILE
  32. 32. It’s Happening… fast More 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.
  33. 33. It’s Happening… fast 28% of all phones in the US are now a smart phone SOURCE The Nielsen Company – 3 rd Quarter 2010 Smartphones: cellphones with operating systems resembling those of computers.
  34. 34. It’s Happening… fast Margaret Caldwell, the authors mother, checking her email on a droid (Samsung Galaxy S)
  35. 35. QUESTION: What percentage of your list opens on a mobile device? Analyze your USER AGENT STRING to find out
  36. 36. The Good news: HTML email on smart phones is getting better SOURCE The Nielsen Company – 3 rd Quarter 2010 HTML EMAIL ON PHONE? YES - iPhone – the gold standard, resizes to fit YES - Android – but does not resize, requires side scrolling YES - Window mobile – but images off by default, no resizing YES – Palm – yes, some odd formatting, does not scale NO - Blackberry – still poor, even with new OS6 NO - Symbian – your html copy will display, looks poor
  37. 37. Mobile is here – What should I do? <ul><li>3 OPTIONS FOR MOBILE OPENS : </li></ul><ul><li>Link to your TXT version (snore) </li></ul><ul><li>Create dedicated mobile versions (pricey) </li></ul><ul><li>Redesign your layouts to be Scalable (best & easiest) </li></ul>Let’s look at the pros and cons of each…
  38. 38. 3 MOBILE OPTIONS – Link to TXT version • Easy • Boring •   Requires extra click
  39. 39. 3 MOBILE OPTIONS – Link to dedicated mobile version • Looks great, designed for mobile • Expensive, another custom version •   Requires extra click
  40. 40. 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.
  41. 41. Scalable eMail Designs: A layout reduces in size still looks the good and is usable / readable.
  42. 42. Scalable email Designs: Approximate message widths ratio of reduction
  43. 43. HOW TO CREATE Scalable email Designs: <ul><li>Grid system </li></ul><ul><li>Single column </li></ul><ul><li>Grouping Sections </li></ul><ul><li>Big Scale on a narrow page </li></ul><ul><li>Meta Tag </li></ul>
  44. 44. HOW TO CREATE Scalable email Designs: <ul><li>Start with a Grid System </li></ul>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.
  45. 45. Grid Systems
  46. 46. Why use a grid system? <ul><li>Orderly alignment </li></ul><ul><li>Consistent spacing between sections </li></ul><ul><li>Provides the ability to quickly create new sections based on that grid system </li></ul>
  47. 47. Why use a grid system? <ul><li>Grid-aligned layouts scale down cleanly </li></ul>Grid-aligned layout Non Grid-aligned layout
  48. 48. HOW TO CREATE Scalable email Designs: 2. Single Column yes no
  49. 49. HOW TO CREATE Scalable email Designs: <ul><li>3. Grouping sections </li></ul><ul><li>Distinct sections </li></ul><ul><li>Rounded corners </li></ul><ul><li>Contrasting colors </li></ul><ul><li>Space between sections </li></ul><ul><li>Background color as divider </li></ul>
  50. 50. HOW TO CREATE Scalable email Designs: <ul><li>“ Grouping Sections” use the background color as the divider. </li></ul><ul><li>Typically sections are created by horizontal rules </li></ul>Traditional sections horizontal rules “ Grouping Sections” Background color divides
  51. 51. HOW TO CREATE Scalable email Designs: 3. Grouping sections What works in mobile works in email design
  52. 52. 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
  53. 53. 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
  54. 54. 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.
  55. 55. HOW TO CREATE Scalable email Designs: 4. Big Scale on a narrow page 34 points 520 pixels wide
  56. 56. HOW TO CREATE Scalable email Designs: 5. Viewport Meta Tag <meta name = &quot;viewport&quot; content = &quot;width = 320&quot;> Viewport : Changes the logical window size used when displaying a page on iOS.
  57. 57. HOW TO CREATE Scalable email Designs: 5. Viewport Meta Tag with Meta Tag without Meta Tag
  58. 58. EXAMPLES Scalable email Designs:
  59. 59. EXAMPLES Scalable email Designs:
  60. 60. EXAMPLES Scalable email Designs:
  61. 61. EXAMPLES Scalable email Designs:
  62. 62. EXAMPLES Scalable email Designs:
  63. 63. HOW TO CREATE Scalable email Designs: <ul><li>Wait, I’m not a designer what should I do? </li></ul><ul><li>Insist that your designs are on a GRID – ask ‘em “ can I see the grid?” </li></ul><ul><li>Tell your designer you want a single column layout </li></ul><ul><li>Tell your designer to view their designs on the phone and big screen while designing, this will influence the outcome </li></ul>
  64. 64. HOW TO CREATE Scalable email Designs: <ul><li>Doesn’t that make very tall / long layouts? </li></ul><ul><li>Yes. People scroll now, it’s 2011. </li></ul><ul><li>It’s better to present one thing at a time for clarity & focus </li></ul><ul><li>If twitter or facebook were screen captured it would be 9 feet tall on average </li></ul>
  65. 65. DEVELOPING / WORTH EXPLORING CSS3 Media Queries <ul><li>What is it? </li></ul><ul><li>Media queries was introduced in CSS3 to allow a document’s styles to change depending on what it’s viewed on. </li></ul><ul><li>For example: An HTML document can be rendered differently for </li></ul><ul><ul><li>“ screen” (computer) </li></ul></ul><ul><ul><li>“ handheld” (phones) </li></ul></ul><ul><ul><li>“ print”, “braille” and more. </li></ul></ul>
  66. 66. WORTH EXPLORING CSS3 Media Queries What does it look like? (simplified) <style @media type=“handheld”; width=“320”>
  67. 67. 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.
  68. 68. Thank you Matt Caldwell Yesmail / Infogroup Interactive Sr. Creative Director Email: [email_address] Web : http://www.yesmail.com Twitter : matty_caldwell
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×