This document discusses how to design emails for social sharing and mobile viewing. It recommends incorporating social media content into emails through "dispatches" that excerpt social media posts. It also recommends designing emails with scalable layouts that can adapt to mobile screens through techniques like grid systems, single columns, grouping content, and increasing font sizes. CSS media queries are also presented as a way to customize email styling for different devices. The document provides examples and best practices for creating emails that encourage social sharing and scale appropriately for mobile viewing.

1. Social & Mobile in Email Design Presented by: Matthew Caldwell Sr. Creative Director Yesmail ConfidentialNot to be shared with third parties

2. Topics Covered How to bring Social to email Linking, Sharing & Dispatches Dispatches – graphical cues for that social look Mobile email Design Changing behaviors call for Scalable Layouts Narrow pages + Big Scale Grid Systems

3. SOCIAL IN EMAIL3 different ways to bring social into your email

4. SOCIAL in Email 3 ways to in use Social networking in email: Linking Sharing Dispatches

5. SOCIAL LINKINGSimply linking to your companies social page INTERESTING / CHALLENGING GOOD BORING / EASY

6. SOCIAL SHARING sharing specific parts of your email INTERESTING / CHALLENGING BETTER BORING / EASY

7. SOCIAL SHARING sharing specific parts of your email BORING / EASY

8. SOCIAL SHARINGSHARING = Liking, Sharing or Tweeting 1. Liking to Facebook 2. Posting to Facebook 3. Tweeting

9. SOCIAL SHARINGNo Javascript in email so how to implement? 1. Liking to Facebook http://www.facebook.com/plugins/like.php?href=http://www.yourlinkhere.com/&layout=standard&show_faces=true&width=450&action=like 2. Post to Facebook http://www.facebook.com/sharer.php?u=http://www.yourlinkhere.com 3. Tweeting http://twitter.com/share?url=http://www.yourlinkhere.com&text=check this out

10. SOCIAL SHARING TIP “It’s not really sharing if it takes more than 2 clicks. Sharing must be • instantaneous • pre-populated

11. SOCIAL DISPATCHESinserting excerpts from social into email INTERESTING / CHALLENGING BEST BORING / EASY

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. SOCIAL DISPATCHESGraphical Social Cues

14. GRAPHICAL SOCIAL CUESTHE FORMULA FOR THE SOCIAL LOOKTalk bubbles

15. GRAPHICAL SOCIAL CUESTHE FORMULA FOR THE SOCIAL LOOKAvatars

16. GRAPHICAL SOCIAL CUESTHE FORMULA FOR THE SOCIAL LOOKAuthor Photos

17. GRAPHICAL SOCIAL CUESTHE FORMULA FOR THE SOCIAL LOOKSocial Network Icons

18. GRAPHICAL SOCIAL CUESTHE FORMULA FOR THE SOCIAL LOOKBig Quote Marks

19. GRAPHICAL SOCIAL CUESTHE FORMULA FOR THE SOCIAL LOOKBig Chunky Type, with 140 Chars or less

20. GRAPHICAL SOCIAL CUESTHE FORMULA FOR THE SOCIAL LOOKDelineation – strong horizontal rules

21. SOCIAL DISPATCHESexample one – HP Tech at Work

22. SOCIAL DISPATCHESexample two – HP Shopping Consumer Reviews

23. SOCIAL DISPATCHESexample three – My Coke Rewards

24. SOCIAL DISPATCHESSexample four – VooDoo Gaming

25. SOCIAL DISPATCHESexample five – HP Newsgram

26. SOCIAL DISPATCHESexample six – Sephora

27. Why include Social Dispatches? Looks fresh, timely and new Displays a “community” angle to your content When done properly can be very relevant Can be a great source of content

28. SOCIAL DISPATCHESHow to produce them You are the editor / curator Search Twitter, Facebook, Blogs, YouTube for posts that apply to your content. Ideally, information posted in the last 60 days

29. SOCIAL DISPATCHESor… Create your own Call on your audience to respond Tweet to #hashtag, Post on Facebook Reply by Email Collect the best and fill out a Social Dispatches section Users see their own inputs, create interactivity

30. SOCIAL DISPATCHESCreate your own - Overstock

31. EMAIL DESIGN: MOBILE

32. It’s Happening… fastMore and more users are opening your email on their phones 12-15% 4% 1-3% .25% JAN 2008 JAN 2009 JAN 2010 JAN 2011 OPENS ON A MOBILE DEVICE PREDICTION: By the end of 2011, one third of your list may be reading your email on their phones. SOURCE: YESMAIL 2010 “USER AGENT” TESTING

33. It’s Happening… fast 28% of all phones in the US are now a smart phone Smartphones: cellphones with operating systems resembling those of computers. SOURCE The Nielsen Company – 3rd Quarter 2010

34. It’s Happening… fast Margaret Caldwell, the authors mother, checking her email on a droid (Samsung Galaxy S)

35. QUESTION:What percentage of your list opens on a mobile device? Analyze your USER AGENT STRING to find out

36. The Good news: HTML email on smart phones is getting better 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 SOURCE The Nielsen Company – 3rd Quarter 2010

37. Mobile is here – What should I do? 3 OPTIONS FOR MOBILE OPENS: Link to your TXT version (snore) Create dedicated mobile versions (pricey) Redesign your layouts to be Scalable (best & easiest) Let’s look at the pros and cons of each…

38. 3 MOBILE OPTIONS – Link to TXT version • Easy • Boring • Requires extra click

39. 3 MOBILE OPTIONS – Link to dedicated mobile version • Looks great, designed for mobile • Expensive, another custom version • Requires extra click

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. Scalable eMail Designs: A layout reduces in size still looks the good and is usable / readable.

42. Scalable email Designs:Approximate message widths ratio of reduction

43. HOW TO CREATEScalable email Designs: Grid system Single column Grouping Sections Big Scale on a narrow page Meta Tag

44. HOW TO CREATEScalable email Designs: 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.

45. Grid Systems

47. Consistent spacing between sections

49. HOW TO CREATEScalable email Designs: 2. Single Column yes no

51. Rounded corners

52. Contrasting colors

53. Space between sections

55. Typically sections are created by horizontal rules“Grouping Sections” Background color divides Traditional sections horizontal rules

56. HOW TO CREATEScalable email Designs: 3. Grouping sections What works in mobile works in email design

57. HOW TO CREATEScalable 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

58. 4. Big Scale on a narrow page 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

59. 4. Big Scale on a narrow page HOW TO CREATEScalable 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.

60. HOW TO CREATEScalable email Designs: 4. Big Scale on a narrow page 520 pixels wide 34 points

61. HOW TO CREATEScalable 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.

62. HOW TO CREATEScalable email Designs: 5. Viewport Meta Tag with Meta Tag without Meta Tag

63. EXAMPLESScalable email Designs:

64. EXAMPLESScalable email Designs:

65. EXAMPLESScalable email Designs:

66. EXAMPLESScalable email Designs:

67. EXAMPLESScalable email Designs:

68. HOW TO CREATEScalable email Designs: Wait, I’m not a designer what should I do? Insist that your designs are on a GRID – ask ‘em “can I see the grid?” Tell your designer you want a single column layout Tell your designer to view their designs on the phone and big screen while designing, this will influence the outcome

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

72. For example: An HTML document can be rendered differently for

73. “screen” (computer)

74. “handheld” (phones)

76. 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.

77. Thank youMatt CaldwellYesmail / Infogroup InteractiveSr. Creative DirectorEmail:matt.caldwell@infogroup.comWeb: http://www.yesmail.comTwitter: matty_caldwell