• Like
Thriving in the Chaotic World of Email Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Thriving in the Chaotic World of Email Design

  • 376 views
Published

Session Presentation

Session Presentation

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
376
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
45
Comments
0
Likes
1

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. 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 • Saveology.com Navigating Priority Inbox & Video in Email Jeff Worcester • VP of Operations • Proximity Marketing
  • 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. 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. 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. 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. 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. 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. Step 3 Documentation The message outline – A list of all the content – In order from top to bottom
  • 9. Step 3 Documentation The wireframe – Matches the outline graphically
  • 10. Step 3 - DocumentationSetting expectations- The most important step the design process- Skip it and expect costly redesigns, extra revisions, frustration, rush
  • 11. Step 3 - DocumentationOBSERVATION: eager, young / new designers,tend to ‘jump’ into design, too quickly andoften miss the mark.
  • 12. Step 4 - DesignTip: require 2 designs. The seconddesign will almost always be better
  • 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. 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. 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. 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. Email in a Mobile World
  • 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. It’s Happening… fastACTUAL PHOTO: Margaret Caldwell, my mother, checking her email on a droid (Samsung Galaxy S)
  • 20. QUESTION:Do you know what percentageof your list opens on a mobile device? Analyze your USER AGENT STRING to find out
  • 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. 3 MOBILE OPTIONS – Link to TXT version• Easy• Boring• Requires extra click
  • 23. 3 MOBILE OPTIONS – Link to dedicated mobile version• Looks great, designed for mobile• Expensive, another custom version• Requires extra click
  • 24. 3 MOBILE OPTIONS – Design your emails to SCALE down cleanly• One version• Looks great on desktop and handheld• Largely applies to iPhone
  • 25. Mobile-Scalable Email Design: A layout that when made smaller is:• 100% readable without user resizing• 100% clickable with a finger tip
  • 26. Scalable email Designs:Approximate message widths ratio of reduction
  • 27. HOW TO CREATE Scalable email Designs:1. Big Scale on a narrow page2. Grid system3. Single column4. Grouping Sections5. Meta Tag
  • 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. HOW TO CREATEScalable email Designs: Your email, when made smaller must be finger-tip friendly 44 PIXELS The size of an average finger
  • 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. 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. Big Scale on a Narrow Page 520 pixels wide 34 points
  • 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. Grid Systems
  • 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. Why use a grid system?• Grid-aligned layouts scale down cleanly Grid-aligned layout Non Grid-aligned layout
  • 37. HOW TO CREATEScalable email Designs: 3. Single Columnyes no
  • 38. HOW TO CREATE Scalable email Designs:4. Grouping sections Distinct sections Rounded corners Contrasting colors Space between sections Background color as divider
  • 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. HOW TO CREATE Scalable Email Designs:4. Grouping sectionsWhat works in mobileworks in email design
  • 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. HOW TO CREATE Scalable email Designs: 5. Viewport Meta Tagwith Meta Tag without Meta Tag
  • 43. EXAMPLESScalable Email Designs:
  • 44. EXAMPLESScalable Email Designs:
  • 45. EXAMPLESScalable Email Designs:
  • 46. See more ideas in the Yesmail Interactive Email Design Look Book www.yesmail.com/2012lookbookMatthew CaldwellSr. Creative DirectorYesmail Interactiveemail: matt.caldwell@infogroup.comtwitter: @matty_caldwellphone: 503-419-0596
  • 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. 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. Case Study 1: Mobile App DownloadsKnow Your DataTest Segment: Visitors to our site from amobile device or mobile browser
  • 50. Case Study 1: Mobile App Downloads Subject: Exciting News! Saveology Has Gone Mobile
  • 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. 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. Case Study 1: Mobile App DownloadsContinuity Push:App Download Buttonson Local Templates
  • 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. Case Study 1: Mobile App DownloadsChallenge:Leverage Email to Increase Mobile App DownloadsResults:553% GROWTHIN MOBILE APP DOWNLOADS
  • 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. 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. 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. 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. Questions? David RefaeliDirector of Email & SMS Marketing, Saveology.com linkedin.com/in/davidrefaeli @Davref18 drefaeli@saveology.com Text: DavidR to 70000
  • 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. 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. 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. Navigating the inbox: Hotmail
  • 65. Navigating the inbox: Hotmail
  • 66. Navigating the inbox: Hotmail YIKES!
  • 67. Navigating the inbox: Hotmail Suggested action
  • 68. Navigating the inbox: Hotmail
  • 69. Navigating the inbox: Gmail
  • 70. Navigating the inbox: Gmail Marked a conversation as important
  • 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. 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. The arrival of HTML5 and Video in Email
  • 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. HTML5 <Video> in Client Support Graph courtesy of Campaign Monitor blog
  • 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="http://yourdomain.com/test.mp4" type="video/mp4" /> <source src="http://yourdomain.com/test.ogv" type="video/ogg" /> <source src="http://yourdomain.com/test.webm" type="video/webm" /><!-- Fallback if not supported --><a href="http://somefundomain.com"> <img border="0" src=" TestVideo.png " label=“VideoIsFun“ width="600"></a></video>
  • 77. HTML5 and Video in Email Support Chrome
  • 78. HTML5 and Video in Email Support Fallback image IE8
  • 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. 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. Jeff WorcesterProximity Marketing, VP of OperationsP: 330-220-6100 ext. 231jeffw@proximitymarketing.com @JeffWorcester