The document discusses bringing social and mobile design considerations to email. It outlines three ways to incorporate social elements: linking to social pages, sharing specific content, and including "dispatches" that excerpt social media updates. For mobile, it recommends designing emails with a grid system, a single column, large readable text, and grouping sections to allow the layout to scale gracefully across devices. CSS3 media queries were also presented as a way to optimize styles for different screen sizes.
The QSR Media Dispersion: Pre, Mid & Post Pandemic – By the Numbers
Eis tue 0815 sponsor infogroup
1.
2.
3. SOCIAL IN EMAIL 3 different ways to bring social into your email
4.
5. SOCIAL LINKING Simply linking to your companies social page GOOD INTERESTING / CHALLENGING BORING / EASY
6. SOCIAL SHARING sharing specific parts of your email BETTER INTERESTING / CHALLENGING BORING / EASY
7. SOCIAL SHARING sharing specific parts of your email BORING / EASY
8. SOCIAL SHARING SHARING = Liking, Sharing or Tweeting 1. Liking to Facebook 2. Posting to Facebook 3. Tweeting
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/ &layout=standard&show_faces=true&width=450&action=like
10. SOCIAL SHARING TIP “ It’s not really sharing if it takes more than 2 clicks. Sharing must be • instantaneous • pre-populated
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
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. 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. 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 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.
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.
48. HOW TO CREATE Scalable email Designs: 2. Single Column yes no
49.
50.
51. HOW TO CREATE Scalable email Designs: 3. Grouping sections What works in mobile works in email design
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. 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. 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. HOW TO CREATE Scalable email Designs: 4. Big Scale on a narrow page 34 points 520 pixels wide
56. 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.
57. HOW TO CREATE Scalable email Designs: 5. Viewport Meta Tag with Meta Tag without Meta Tag
66. WORTH EXPLORING CSS3 Media Queries What does it look like? (simplified) <style @media type=“handheld”; width=“320”>
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. Thank you Matt Caldwell Yesmail / Infogroup Interactive Sr. Creative Director Email: [email_address] Web : http://www.yesmail.com Twitter : matty_caldwell