• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Email Design Approaches That Work for All Devices
 

Email Design Approaches That Work for All Devices

on

  • 7,669 views

Justine Jordan (Litmus) and Jay Jhun (Engauge) discussed how email design is evolving as subscribers view increasingly view messages on their phones and other mobile devices.

Justine Jordan (Litmus) and Jay Jhun (Engauge) discussed how email design is evolving as subscribers view increasingly view messages on their phones and other mobile devices.

Statistics

Views

Total Views
7,669
Views on SlideShare
6,242
Embed Views
1,427

Actions

Likes
28
Downloads
0
Comments
0

11 Embeds 1,427

http://www.b2bemailmarketing.com 1305
http://emailmarketing.typepad.com 57
http://paper.li 40
http://www.emailmarketing.typepad.com 7
http://feeds.feedburner.com 5
http://twitter.com 4
http://webcache.googleusercontent.com 3
http://translate.googleusercontent.com 2
http://www.twylah.com 2
http://us-w1.rockmelt.com 1
http://cindyzeis.com 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Stats and figuresNo best practices!! No silver bullet!! OMG!!How different smart phones handle HTML email (examples)Start with a plan: Design and content strategy – it’s always mattered but it REALLY matters nowOptions for mobile email (text version, dedicated, scalable, css @media) (examples)Scalable layouts – can responsive web design make the leap to email? What’s the future hold? We don’t know, but we can speculate.
  • Android is most desired OS31% plan to buy Android as their next smartphone (30% said Apple). 20% are unsure 50% who purchased a smartphone in the last six months chose an Android phone, compared with 25% who chose iOS. 15% bought RIM.http://blog.nielsen.com/nielsenwire/online_mobile/u-s-smartphone-market-whos-the-most-wanted/
  • Smartphone vendors shipped a total of 99.6 million units in 1Q11, nearly double from the 55.4 million units in the first quarter of 2010.Mobile web browsing is dominated by devices that are web-friendly
  • Now it’s time to start figuring out how/when YOUR subscribers are using mobile email. Instead of guessing if mobile should be an important focus for your business, instead of guessing which devices your audience is using for mobile communication – find out with real, hard data. Tools for doing so – web analytics, litmus, pv, returnpathpercentmobile.com
  • Key questions to consider when you are looking at developing a mobile strategy. Audience size – This is a business decision that is going to be unique to everyone. List size also comes into consideration – 5% of 3 million subscribers Do you include a “view on mobile device” link in emails? If so, how many people are consistently clicking this? Does it represent a large enough population?Talk about the decision framework What are the inputs for you to consider making a decision about your mobile plight?Audience, goals, content, etc.Hypothetical use cases for “if you fit xyz profile, try this...”Do I create a separate mobile version?Do I include a view on mobile link?
  • Snapshot of the challenges and diversity of devicesNokia Remote Device Access is a great way to experience Symbian first hand.
  • Snapshot of the challenges and diversity of devicesNokia Remote Device Access is a great way to experience Symbian first hand.
  • Snapshot of the challenges and diversity of devicesNokia Remote Device Access is a great way to experience Symbian first hand.
  • “Other” inbox does not show up on Android app

Email Design Approaches That Work for All Devices Email Design Approaches That Work for All Devices Presentation Transcript

  • Successful Email Design Approaches That Work For All Devices
    Justine Jordan | Litmus | @meladorriJay Jhun | Engauge | @emailrocks
    #SPOP11
  • Successful Email Design Approaches That Work For All Devices
  • Introductions…
    Justine Jordan Marketing Director, Litmus
    justine@litmus.com | @meladorri
    Jay JhunEmail Services Director, Engauge
    jjhun@engauge.com | @emailrocks
    Presentation available at www.slideshare.net/litmusapp
  • Email is moving beyond the desktop
    Subscribers are viewing emails in a diverse ecosystem of webmail, desktop, mobile and social contexts.
    Today we’ll talk about:
    Current status and predictions for the future
    Options for mobile email
    Best practices in mobile email design
    Agenda
  • 9.29%
    OF OPENS ARE ON A MOBILE DEVICE
    2-15% on individual campaigns
    30%+ for niche audiences
    Source: Litmus Email Analytics, March 2011
  • Mobile Opens by OS
    iPhone accounts for 85.95%of iOSopens; iPad for 14.05%
    Source: Litmus Email Analytics, March 2011
  • Top Ten Email Clients by Opens
    Source: Litmus Email Analytics, March 2011
  • Your mileage may vary…
    Source: Email Analytics for Litmus Newsletter, February 2011
  • Consumer preferences are changing
    Next desired operating system
    Source: The Nielsen Company, survey of U.S. mobile consumers
  • Smartphone OS Share Predictions
    Source: IDC Worldwide Quarterly Mobile Phone Tracker, March 29, 2011
    Nielsen Stats
    Android: 37%
    iOS: 27%
    Blackberry at 22%
  • Do you have a mobile audience?
    Web analytics, user agent detection, surveys and preference centers can help you decide.
  • The analytics make a case
    User agent detection
    Web analytics
    Clicks on mobile link
    Existing mobile site/app
    Existing SMS program
    Transactional emails for “on the go” situations
    In-store coupons
    Mobile purchases
    Travel updates
    Urgent communications
    Making the mobile email choice
  • Display and Support Challenges
    There are no mobile email standards!
    *HTML or images enabled by default
    ◐ Blackberry HTML email may be enabled, but is not on by default in 4.5/5. The ability to download images automatically is an option. Blackberry 6 has webkit support and displays HTML email by default, but a prompt appears to download external images
    ‡ inconsistent wrapping and scaling of text
  • Display and Support Challenges
    Android alt text
    Symbian images off
    Symbian images on
  • Display and Support Challenges
    WinMo Preview
    WinMo images off
    WinMo images on
  • Link to a “mobile-friendly” text version
    Usually a modified plain text version
    Often the first step in a testing phase
    Requires an extra click
    No longer truly mobile friendly
    Link to mobile-specific version
    Requires extra resources (more design/production time)
    Requires an extra click
    CSS @media queries and scalable layouts
    No extra click
    Suitable for newer phones with HTML capability
    May require more advanced coding know-how
    Mobile Email Options
  • Link to “mobile friendly” text version
    Why the extra click??
    email
    web site
    mobile version
  • Link to “mobile friendly” text version
    Mobile “friendly”??
  • Consider context & subscriber experience
    email
    mobile version
    landing
  • Consider context & subscriber experience
  • More than just your plain text version
    Get to the point
    Larger fonts
    Basic HTML is OK
    Consider CAN-SPAM
    If you must…
  • Beware text resizing
  • Beware text resizing
    After (Android)
    Before (Android)
    Plan for font sizes to auto-adjust (13px minimum on iOS)
    Use CSS “-webkit-text-size-adjust: none” for iPhone and Android, possibly BlackBerry 6
  • Link to mobile-optimized version
  • Link to mobile-optimized version
  • Scalable design
    Desktop
    iPhone
  • Mobile optimized using CSS @media
  • Facebook Messages: Another “Device”?
    Use caution with divider lines
    FBM may cut off footers,
    unsubscribe information
  • Facebook Messages
    FBM viewed on the iPhone app have functioning links and better HTML support.
    “Other” inbox does not appear in Android or WinMo app
  • Monitor for @facebook.comaddresses
    Messages are grouped together by from name (i.e. info@acme.com)
    No subject lines
    Commercial email goes in the “other” folder
    Text Version Tips
    Drop navigation bar and submessages
    Place the most important message first
    Line length < 60 characters to avoid undesirable line breaks
    Use capitalization, line breaks, dashed lines and other devices to visually separate different messages.
    Facebook Messages
  • “Best Practices” in Mobile Email
    “Methods and techniques that have consistently shown results superior than those achieved with other means, and which are used as benchmarks to strive for. There is, however, no practice that is best for everyone or in every situation, and no best practice remains best for very longas people keep on finding better ways of doing things.”
    - BusinessDictionary.com
    “The idea is that with proper processes, checks, and testing, a desired outcome can be delivered more effectively with fewer problems and unforeseen complications.”
    - Wikipedia
  • “Best Practices” in Mobile Email
    Single column design
    Large(r) fonts
    Pressable buttons & “thumb navigation”
    Short, direct content
    Clear + direct calls to action
    Eliminate or hide low priority content
    Remember subscriber experience & context is key
    Design for mobile first!
  • Elevate the Content People Care About
    Think Top Down
    Brand Appropriately
    Use UI Elements Consistently
    Make Targets Fingertip-Size
    Read the User Experience Guidelines
    http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design
  • 44px ~ 0.3”
    iOS as Inspiration
  • iOS as Inspiration
  • Outlook, Gmail, iPhone and WinMo pulls in the preheader or first few lines of text in the email as a “snippet” or AutoPreview
    Maximize subject line (35 characters), preview text (90 characters)
    Leverage this feature to extend your message:
    • Time-sensitive deadlines
    • Important announcements
    • Another way to reinforce your call-to-action
    • Secondary subject line
    Add Preview Text!
  • Are mobile users more engaged?
    “Killing time is a killer app for mobile use.”
    -Nielsen Norman Group Email Newsletter Usability, 4th Edition
    Read (>7 seconds)
    Skim Read (2-7 seconds)
    Glance/Delete (<2 seconds)
    Source: Litmus Email Analytics, March 2011
  • Don’t panic! Mobile is changing fast, but it’s easier than you think
    Discovery is an accomplishment!
    Look for the mobile use case, use resources wisely
    HTML is well supported, but images are often blocked
    Ditch the plain text “mobile friendly” version
    Adapt to a single column design with touch-friendly elements
    Optimize text versions for Facebook messages
    Get inspired by your mobile OS, apps, site
    Readability, experience and context is key
    Let analytics and data be your optimization guide
    Top Ten Takeaways
  • Get in touch!
    Justine Jordan Marketing Director, Litmus
    justine@litmus.com | @meladorri
    Jay JhunEmail Services Director, Engauge
    jjhun@engauge.com | @emailrocks
    Presentation available at www.slideshare.net/litmusapp