Eis tue 0815 sponsor infogroup

  • 297 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
297
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
11
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 46. Why use a grid system?
    • Orderly alignment
    • 47. Consistent spacing between sections
    • 48. 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
  • 49. HOW TO CREATEScalable email Designs:
    2. Single Column
    yes
    no
  • 50. HOW TO CREATEScalable email Designs:
    3. Grouping sections
    • Distinct sections
    • 51. Rounded corners
    • 52. Contrasting colors
    • 53. Space between sections
    • 54. Background color as divider
  • HOW TO CREATEScalable email Designs:
    • “Grouping Sections” use the background color as the divider.
    • 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
  • 69. HOW TO CREATEScalable email Designs:
    Doesn’t that make very tall / long layouts?
    • Yes. People scroll now, it’s 2011.
    • 70. It’s better to present one thing at a time for clarity & focus
    • 71. If twitter or facebook were screen captured it would be 9 feet tall on average
  • DEVELOPING / WORTH EXPLORINGCSS3 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.
    • 72. For example: An HTML document can be rendered differently for
    • 73. “screen” (computer)
    • 74. “handheld” (phones)
    • 75. “print”, “braille” and more.
  • WORTH EXPLORINGCSS3 Media Queries
    What does it look like? (simplified)
    <style @media type=“handheld”; width=“320”>
  • 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