Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Thriving in the Chaotic World of Email Design


Published on

Session Presentation

  • Be the first to comment

Thriving in the Chaotic World of Email Design

  1. 1. Thriving in the Chaotic World of Email Design your presenters Email Design Process & Mobile-Scalable Formatting Matthew Caldwell • Sr. Creative Director • Yesmail InteractiveLeveraging Email to Promote Other Marketing ChannelsDavid Refaeli • Director of Email & SMS Marketing • Navigating Priority Inbox & Video in Email Jeff Worcester • VP of Operations • Proximity Marketing
  2. 2. Matt Caldwell – AgendaHere’s what we’ll cover1. Email Design Process Tips & tricks to get it done faster & easier2. Mobile-Scalable Email Formatting How to make ONE email layout for all – desktops, phones & tablets
  3. 3. The Design ProcessHere’s what we’ll cover• Key steps in the design process• The importance of setting expectations• Wireframing & Document outlines – from your designer• Copy & the act of copy-distilling• Revision tracking – not in email!• Design Approved – Clear endings• One email layout for all devices
  4. 4. 6 Steps in the Design Process1. Discovery – quick informal, easy2. Kickoff – Official start, fully brief your designers3. Documentation – Designers “brief you back” – Message outline – simple list of contents – Wireframe – simple lines and boxes to represent outline4. Design & Present5. Revise6. Design Approved7. Code8. Launch
  5. 5. Step 1 - Discovery• Informal, quick easy, 15- 30 minutes• Just meet with your teams• Tell them what your intentions I’ve got an idea
  6. 6. Step 2 - Kickoff• Formal Start, 1 hour• Tell your designers everything, all aspects of the challenge• Meet in person or on the phone – interaction is key• If your designer asks no questions – you’ve got a problem
  7. 7. Step 3 - Documentation• “Documentation before design”• In busy email world, often this step is skipped – big mistake• Designers need to ‘brief back’ with outline & wireframe – This is what I heard you say – This is the contents and order of the email – OUTLINE – This is what can actually fit in the email
  8. 8. Step 3 Documentation The message outline – A list of all the content – In order from top to bottom
  9. 9. Step 3 Documentation The wireframe – Matches the outline graphically
  10. 10. Step 3 - DocumentationSetting expectations- The most important step the design process- Skip it and expect costly redesigns, extra revisions, frustration, rush
  11. 11. Step 3 - DocumentationOBSERVATION: eager, young / new designers,tend to ‘jump’ into design, too quickly andoften miss the mark.
  12. 12. Step 4 - DesignTip: require 2 designs. The seconddesign will almost always be better
  13. 13. Step 5 – Design presentation Don’t “throw over the fence”! Designers: Never email the layoutDesigners must always present their designs, rationale and reasons in person or on the phone. Bottom line: the whole process will go smoother with less revs if presented
  14. 14. Step 6 – Revisions• Two types of revisions: 1. Big Picture REVISION “I like what you did but it needs to be more energetic” 2. Details REVISION “change that URL to…”• Big Picture revision = always in person/phone – Don’t try to write this out, it’ll take a lot of time & never sounds right• Detail Revisions = listed out – Always write this out in a clear list
  15. 15. Step 6 – RevisionsTIP: Keep design revisions out of the inbox• Instead use a central spread sheet or central tracking system• Will greatly reduce your email churn• Will create a nice clean log of changes REVISIONS in your INBOX
  16. 16. Step 7 – Design Approved• Design must be approved before coding• By requiring this step, last minute edits avoided• Forces the client to finalize before coding• Many skip this step = revision keep coming No more It’s Design changes? Approved! We’ll move to coding
  17. 17. Email in a Mobile World
  18. 18. It’s Happening… fast 43% 18%of all phones in the US Average number ofare now a smart phone “opens on mobile device” for all Yesmail clients Smartphones: cellphones with operating systems resembling those of computers. SOURCE The Nielsen Company – 3rd Quarter 2011 SOURCE Yesmail Enterprise 122 clients
  19. 19. It’s Happening… fastACTUAL PHOTO: Margaret Caldwell, my mother, checking her email on a droid (Samsung Galaxy S)
  20. 20. QUESTION:Do you know what percentageof your list opens on a mobile device? Analyze your USER AGENT STRING to find out
  21. 21. 3 Options for Mobile Opens1. 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…
  22. 22. 3 MOBILE OPTIONS – Link to TXT version• Easy• Boring• Requires extra click
  23. 23. 3 MOBILE OPTIONS – Link to dedicated mobile version• Looks great, designed for mobile• Expensive, another custom version• Requires extra click
  24. 24. 3 MOBILE OPTIONS – Design your emails to SCALE down cleanly• One version• Looks great on desktop and handheld• Largely applies to iPhone
  25. 25. Mobile-Scalable Email Design: A layout that when made smaller is:• 100% readable without user resizing• 100% clickable with a finger tip
  26. 26. Scalable email Designs:Approximate message widths ratio of reduction
  27. 27. HOW TO CREATE Scalable email Designs:1. Big Scale on a narrow page2. Grid system3. Single column4. Grouping Sections5. Meta Tag
  28. 28. HOW TO CREATE Scalable email Designs: 1. Big Scale on a Narrow Page First consider a less wide page: Then = 600 pixels wide Now = reduce to 450, 500, 525600 pixels wide 480-550 pixels wide
  29. 29. HOW TO CREATEScalable email Designs: Your email, when made smaller must be finger-tip friendly 44 PIXELS The size of an average finger
  30. 30. 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
  31. 31. HOW TO CREATE Scalable email Designs: Warning: You will need to go on a WORD DIET. Scalable layouts depend on character countsToo many words and the large type becomes overpowering.
  32. 32. Big Scale on a Narrow Page 520 pixels wide 34 points
  33. 33. HOW TO CREATE Scalable email Designs: 2. Grid SystemA Grid System is an alignment tool for layouts.A system of measurement in pixels that breaks down a layout into a seriesof columns, gutters and margins.
  34. 34. Grid Systems
  35. 35. Why use a grid system?• Orderly alignment• Consistent spacing between sections• Provides the ability to quickly create new sections based on that grid system
  36. 36. Why use a grid system?• Grid-aligned layouts scale down cleanly Grid-aligned layout Non Grid-aligned layout
  37. 37. HOW TO CREATEScalable email Designs: 3. Single Columnyes no
  38. 38. HOW TO CREATE Scalable email Designs:4. Grouping sections Distinct sections Rounded corners Contrasting colors Space between sections Background color as divider
  39. 39. HOW TO CREATE Scalable Email Designs:• “Grouping Sections” use the background color as the divider.• Typically sections are created by horizontal rules Traditional sections “Grouping Sections” horizontal rules Background color divides
  40. 40. HOW TO CREATE Scalable Email Designs:4. Grouping sectionsWhat works in mobileworks in email design
  41. 41. HOW TO CREATE Scalable email Designs: 5. Viewport Meta Tag <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.6, user-scalable=no" />Viewport : Changes the logical window size used whendisplaying a page on iOS.
  42. 42. HOW TO CREATE Scalable email Designs: 5. Viewport Meta Tagwith Meta Tag without Meta Tag
  43. 43. EXAMPLESScalable Email Designs:
  44. 44. EXAMPLESScalable Email Designs:
  45. 45. EXAMPLESScalable Email Designs:
  46. 46. See more ideas in the Yesmail Interactive Email Design Look Book CaldwellSr. Creative DirectorYesmail Interactiveemail: matt.caldwell@infogroup.comtwitter: @matty_caldwellphone: 503-419-0596
  47. 47. David Refaeli - Agenda• How can we leverage Email to promote other marketing channels and/or business units? – Mobile App Downloads – Facebook „Like‟ Acquisitions – Inbound Calls
  48. 48. Case Study 1: Mobile App DownloadsChallenge: Leverage Email to IncreaseMobile App Downloads & Awareness- Test Audience (mobile visitors)- Heavy Push (dedicated sends)- Continuity Push (buttons on local templates)
  49. 49. Case Study 1: Mobile App DownloadsKnow Your DataTest Segment: Visitors to our site from amobile device or mobile browser
  50. 50. Case Study 1: Mobile App Downloads Subject: Exciting News! Saveology Has Gone Mobile
  51. 51. Case Study 1: Mobile App DownloadsTest Segment:Visitors to our site from a mobile device or mobile browserResults:24% Open Rate2.66% Unique CTR21% Increase In Total Downloads (from originalamount)(40% of New Downloads from Email Links, 60%Awareness Search Downloads)
  52. 52. Case Study 1: Mobile App DownloadsHeavy Push:Dedicated Email to All Subscribers(Staggered over 5 sends)Results:16% Open Rate0.7% Unique CTR64% Increase In Total Downloads(74% of New Downloads from Email Links,26% from Awareness Search Downloads)
  53. 53. Case Study 1: Mobile App DownloadsContinuity Push:App Download Buttonson Local Templates
  54. 54. Case Study 1: Mobile App DownloadsContinuity Push:App Download Buttons on Local Deal TemplatesResults:45% Increase In Total Downloads5% Day Over Day Average Increase in Downloads
  55. 55. Case Study 1: Mobile App DownloadsChallenge:Leverage Email to Increase Mobile App DownloadsResults:553% GROWTHIN MOBILE APP DOWNLOADS
  56. 56. Case Study 2: Facebook „Likes‟ AcquisitionChallenge:Leverage Emailto Increase Facebook LikesResults:11% Open Rate1.47% Unique CTR24% Increase in Total Likes99% Click to Conv. Rate
  57. 57. Case Study 2: Facebook „Likes‟ Acquisition• Results Were Achieved Over a 2 Day Period• Incentivizing Customers – Reward Your Customers Instead of Buying Media to Acquire Them on a Different Channel – Increases Brand Loyalty – Increases Likelihood of Repeat Purchases – Gain Ability to “Touch” Customers Across Multiple Channels and Stay “Front of Mind”• Great Way to Maximize Surplus of Monthly Advertising Budgets
  58. 58. Case Study 3: Inbound CallsChallenge:Leverage Email to Drive Calls to a Separate Business UnitResults:12% Open RateCost Per Call:4 Times Lower than PPCCall to Close Rate:5% Higher thanother mediums(ppc, seo, affiliates)
  59. 59. What We‟ve Learned• Email is a highly effective tool to promote other marketing channels and/or business units – Increased Mobile App Downloads by 553% – Increased Facebook Likes by 24% – Reduced Cost Per Call by 4 Times as Compared to PPC Key Takeaway: Regardless of the acquisition channel (ppc, seo, affiliates, etc), Email is the key to retention marketing.
  60. 60. Questions? David RefaeliDirector of Email & SMS Marketing, @Davref18 Text: DavidR to 70000
  61. 61. Jeff Worcester - AgendaWhat we‟ll discuss• Navigating the inbox: Priority Inbox and Graymail – An overview of Hotmail and Gmail‟s new inbox tools and tactics – What users see – Tactics for avoiding the abyss• The arrival of HTML5 and Video in Email – Client support – How to code your email – What users will see
  62. 62. Navigating the new inboxThe new inbox is more fragmented. Both Hotmail (2011) and Gmail(late 2010) have changed the way email is viewed and managed.Other ISPs and desktop clients will likely adopt similar advancedfiltering technology to decide what gets priority in your inbox.What‟s in the inbox? Source: The Windows Blog: Hotmail declares war on graymail, 10/3/2011
  63. 63. Navigating the inbox• Hotmail is now automatically categorizing emails as they arrive in the inbox• Hotmail released a series of new tools that can shorten the conversation between marketers and their audience• Gmail has been determining the relevance of emails as they arrive in the inbox• Gmail‟s filtering algorithm is based primarily on engagement metrics
  64. 64. Navigating the inbox: Hotmail
  65. 65. Navigating the inbox: Hotmail
  66. 66. Navigating the inbox: Hotmail YIKES!
  67. 67. Navigating the inbox: Hotmail Suggested action
  68. 68. Navigating the inbox: Hotmail
  69. 69. Navigating the inbox: Gmail
  70. 70. Navigating the inbox: Gmail Marked a conversation as important
  71. 71. The Moral of the Story• Getting your share of the inbox is getting more difficult• The SPAM filter is only the first gatekeeper• Past performance DOES contribute to future relevance• Hotmail‟s model requires users to change settings usually left on default• Gmail‟s model is more of a challenge because it‟s predetermining relevance on our behalf• A series of failed attempts to engage could leave you out of Gmail‟s circle of trust forever• Other ISP‟s and email clients will likely follow soon
  72. 72. So What Can We Do?Take a common sense approach to engagement:• Personalization: the more personal, the more relevant• Keywords are critical. Knowing user interests is more important than ever.• Require a double opt in• Ask users to “Like” you on Facebook, follow you on Twitter or post on a blog• Calls to action must not only be clear, but should be more time sensitive• Get users to physically reply to a message• Target these two groups with a “how-to” message to manage their email – Get Gmail users to start a conversation or mark it as important – Instruct Hotmail users on how they can use a filter to manage their subscription
  73. 73. The arrival of HTML5 and Video in Email
  74. 74. HTML5 <Video> in Email• W3C has announced in February 2011 that July 2014 will be date that HTML5 become the official recommendation of web standard• HTML5 simplifies and standardizes video embedding protocols• In addition to browser support, email support is expanding• iOS has supported <video> in mobile devices and Apple Mail for several years• Full feature videos in email can be a game changer for marketers, publishers, content providers and email users• The best, part is HTML5 video implementation is simple
  75. 75. HTML5 <Video> in Client Support Graph courtesy of Campaign Monitor blog
  76. 76. Using HTML5 <Video> in EmailFor maximum compatibility for <video> embed in HTML5 use these formats.1. .MP42. .OGG3. .WEBMHere‟s the source code….<video width="600" poster=“TestVideo.png" controls autoplay> <source src="" type="video/mp4" /> <source src="" type="video/ogg" /> <source src="" type="video/webm" /><!-- Fallback if not supported --><a href=""> <img border="0" src=" TestVideo.png " label=“VideoIsFun“ width="600"></a></video>
  77. 77. HTML5 and Video in Email Support Chrome
  78. 78. HTML5 and Video in Email Support Fallback image IE8
  79. 79. HTML5 and Video in Email Support• Hotmail‟s support is not perfect, but it‟s better than no support – Controls are stripped out, but autoplay still works (except IE 7/8) – If autoplay is not on, only the first frame displays in Safari and right click is disabled Graph courtesy of Campaign Monitor blog
  80. 80. HTML5 and Video in Email - Summary• iOS support is universal across all devices• Hotmail support is still a little dicey and support varies on the OS being used• Most other email clients and mobile devices are displaying fallback content well• Support should be more rapid in the months ahead making video a great opportunity for marketers, publishers and content owners to reach, influence and engage their audience
  81. 81. Jeff WorcesterProximity Marketing, VP of OperationsP: 330-220-6100 ext. @JeffWorcester