Webinar: Mobile Email Design & Intro to Mobile Optimized Templates


Published on

Consumer mobility is ever changing. As an email marketer, you’re responsible for making design decisions that affect your subscribers’ ability to use and experience your emails. This webinar deck will help you get started, by sharing the top 5 things you need to remember for designing for mobile devices. It also includes an overview of our new mobile optimized templates, developed to help guide you through your mobile design journey.

Published in: Marketing
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • So what do we know about today’s inbox? What are we learning?
  • And the way to do this is… frameworks….
  • The static elements of a template may be thought of as a shell, and different arrangements of content coded inside that shell.
  • 25% Clicks
  • A phased responsive approach was tested against a mobile-friendly format, and a full responsive format. When including metric lift and production time, the responsive-aware was rolled out.
  • You can hold and touch an email this way – if you just look at a full screenshot of it, it’s not the way your customers are going to consume it.
  • Second mobile DesSubscriber to the Email Design Blog
  • Webinar: Mobile Email Design & Intro to Mobile Optimized Templates

    1. 1. Mobile Design Basics & Introduction to Mobile Optimized Templates March 13th, 2014
    2. 2. Speakers Amanda Monroe Design Consultant amonroe@exacttarget.com @amandacloevius
    3. 3. Speakers Kim Stratton Product Marketing Manager, kstratton@exacttarget.com @KimLStratton
    4. 4. rsModerator Patty Rayl Senior Global Instructional Designer prayl@exacttarget.com @pattyrayl
    5. 5. Your active participation is encouraged. Here are some tools for you to use.
    6. 6. Safe Harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statement concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new product and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our web hosting, breach of our security measures, the outcome of any litigations, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, or relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non- alesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filing's section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered in time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward looking statements. Safe Harbor
    7. 7. Raise Your Hand…. Are you currently designing emails with the Mobile subscriber in mind?
    8. 8. *Kleiner Perkins Caufield and Byers Today’s inbox is: Frequented The average person checks their phone 150 times a day*
    9. 9. ***Return Path: Data from 3 million users May-June 2013 Today’s inbox is: Cluttered We receive 416 commercial messages a month (13/day)
    10. 10. Today’s inbox is: Interactive Emails are revealed in stages From Name Subject Line Preheader Pre-scroll Scrolling view Click through to siteInbox
    11. 11. Mobile Desktop Of those who opened on mobile, 13% clicked through. Of those who opened on desktop, 25% clicked through ExactTarget primary research Today’s inbox is: Shallow Mobile openers click less than desktop openers. Mobile is a barrier to clicking ExactTarget primary research: one customer, 1m+ dataset
    12. 12. For one retailer, 72% opened the email once.
    13. 13. For one retailer, 81% clicked the email once.
    14. 14. Working with Templates A modular approach to mobile email design
    15. 15. Before we start: Terms to Know 1. Template: the blank shell that the email is built on 2. Modular Content: Chunks of content that can be stored separately and recombined in various iterations. 3. Content Areas: Empty area within template where text, links and images can be inserted. 4. Stored Content: Independently stored section of content with text, images and styling that will be placed inside of a Content Area. 5. Framework: all of the elements that holistically fit together to create your templates and emails
    16. 16. Mobile-optimized email aims improve three areas: 1. Production Efficiencies If emails are built on a modular framework, it can cut production time down 3. Performance Metrics A more legible email means content is magnified – if the content is relevant, metric lift will follow. 2. Brand Impact Build subscriber trust by respecting the viewing environments of users; give them a legible, usable, beautiful experience. Mobile viewing is the largest disruption in email design today.
    17. 17. ExactTarget Templates Blocks of modular content turn into content areas, allowing basic editing of text and images in ExactTarget’s WYSIWYG content editor. Content areas may be created and stored separately from a template, then dragged-and-dropped into the appropriate area of an email when needed.
    18. 18. A Framework uses Modular Content Template + Stored Content = Final Email
    19. 19. A Framework is a Modular Approach A framework is a standardized approach to designing and building email that creates both consistency and flexibility for your designers, developers & subscribers.
    20. 20. ExactTarget Templates Template Shell + Content Areas = Potential Templates
    21. 21. A Modular Approach Allows for Dynamic Content If gender = male, display Article 1 If gender = female, display Article 2
    22. 22. Getting Started: Plan for Content Create a Wireframe • Dissociate content from visuals, focusing primarily on function • Establish a content hierarchy • Ensure content structure matches hierarchy before applying graphics • Make iterating on the layout easier
    23. 23. Getting Started: Define Variability Defining a fixed number of variations for content blocks allows for the delivery of tailored experiences while controlling the impact on content creation time. Content Inputs • Headline • Copy • Button • Image Possible Content Formats
    24. 24. Keys to Success: Style Guide An email style guide establishes email standards for your brand for frequently used email elements. • Present a cohesive brand • Improve customer engagement • Realize efficiencies in the email creation process
    25. 25. Mobile Optimized Templates Create your emails for mobile users
    26. 26. Desktop ExactTarget primary research What are Mobile Optimized Templates?
    27. 27. Desktop ExactTarget primary research Benefits of Mobile Optimized Templates • Ensure your emails render properly on a mobile device • Increase ROI and engage with mobile customers • Free
    28. 28. Desktop ExactTarget primary research New Mobile Optimized Templates • 13 Mobile Templates • Available in all email editions • New preview mode
    29. 29. Mobile Optimized Templates
    30. 30. Desktop ExactTarget primary research +25% Clicks Post-redesign Responsive Redesign
    31. 31. Multi-Variant Testing +10% Mobile clicks Both responsive solutions Mobile-Aware (mobile-friendly, design- only changes) Responsive (fully responsive, 2 sets of graphics) Responsive-Aware Responsive header/footer, mobile-aware body Winning solution
    32. 32. Email Design Tactics Content strategy, legibility, touch, and context.
    33. 33. Write Concisely and with Hierarchy in Mind • Key subject line info should be in the first 35 characters. • Preheaders can be around 80 characters, with the most important content first. • Use a top-down content hierarchy. • CTA language should be descriptive, value-oriented, and action-oriented.
    34. 34. Mobile-First Content Strategy 1. Pull click overlays for a variety of sends from the same template 2. Prioritize content into top three clicks 3. Cut content that doesn’t get clicks
    35. 35. Design Legibly • Use 1-column for primary content • Legibility is more important than length • Top down hierarchy • Use contrasting color to ensure readability across brightness levels
    36. 36. Design Legibly • Think BIG: • Full-width graphics • HTML text sizes should be 15px+ for body copy and 22px+ for headlines • Go even larger when text is part of an image, to accommodate image scaling • Place CTAs on the left side (ideal) or center
    37. 37. Design Legibly with Images • Images are more content-rich than text: use images to communicate your message
    38. 38. Design for Touch Make buttons “Tapworthy” • Size: keep buttons at least a 44px square for easy tapping • Position: Keep links/buttons to the center or left for ease of use – or full width! • Space: separate links to avoid touching two links
    39. 39. The context of apps: Know what your users are doing when they’re not in your email. Top 4 apps: 1. Google Maps 2. Facebook 3. YouTube 4. Google+ (source: Mashable) Email is part of a mobile ecosystem
    40. 40. The context of apps: Borrow usability elements from these commonly used apps • Button treatments • Visual cues • Content layout patterns Email is part of a mobile ecosystem
    41. 41. Email is part of a mobile ecosystem. The context of the email inbox: The inbox frames your email
    42. 42. Always view your emails in their natural habitat: the inbox vs
    43. 43. Mobile Email Design Basics: Lessons 1. Mobile email viewing is the new normal 2. Think of your emails as a framework of modular pieces 3. Write your content in a mobile-first way 4. Design legibly for small screens 5. Design buttons for touch 6. Understand the context of mobile viewing
    44. 44. New Email Design Toolkit! Proven tips and advice from our email experts on: 1. Email Design Basics 2. Email Coding Fundamentals 3. Data for Designers
    45. 45. Questions? Please type them in the chat panel
    46. 46. Interested in Additional Mobile Webinars? March 19th – 2:00 pm EST 2014 Mobile Behavior Report Combining mobile tracking and consumer date to build a powerful mobile strategy http://www.exacttarget.com/resource-center/webinars March 27th Advanced Responsive Design Design tips, code and data for better email design Register:
    47. 47. Resources Training available in 3sixty • January Release Training • Getting Started with Email (Template lesson) Design Blog • http://www.exacttarget.com/blog/category/e mail/design-email/ Emails • Link to recorded training • Toolkits