• Save
Ad:Tech NYC - Mobile-Friendly Email Design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Ad:Tech NYC - Mobile-Friendly Email Design

on

  • 1,586 views

Mobile email design slides from Justine Jordan's portion of "Email Marketing: Reaching Customers on the Mobile Front" presented on Nov. 9th, 2011 at Ad:Tech NYC.

Mobile email design slides from Justine Jordan's portion of "Email Marketing: Reaching Customers on the Mobile Front" presented on Nov. 9th, 2011 at Ad:Tech NYC.

Statistics

Views

Total Views
1,586
Views on SlideShare
1,585
Embed Views
1

Actions

Likes
2
Downloads
0
Comments
0

1 Embed 1

http://cindyzeis.com 1

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
  • If you have a nicely optimized website, why bother with the extra click to the sub-optimal “mobile version”? Instead link directly to the mobile site from the preheader, or link to a page on the mobile site. Unless you have a signficant audience of older BlackBerry users, this text-heavy “mobile version” isn’t doing you any favors.

Ad:Tech NYC - Mobile-Friendly Email Design Presentation Transcript

  • 1. EMAIL MARKETING Reaching Customers on the Mobile Front Designing Mobile-Friendly Emails Justine Jordan Marketing Director, Litmus @meladorri | @litmusapp
  • 2. Designing Mobile-Friendly Emails
    • Is all about…
    • Knowing your audience.
    • Optimizing content & design for context.
    • Creating usable and beautiful experiences in both mobile & desktop environments.
  • 3. Knowing Your Audience http://litmus.com/blog/email-client-market-share-infograph
  • 4. Mobile Opens by Platform
    • Majority of mobile opens in Android, iOS (iPad + iPhone)
    http://litmus.com/blog/email-client-market-share-infograph
  • 5. DOs and DON’Ts
  • 6. DO: Consider Context
    • People check email…
    • In bed
    • At the gym
    • In the bathroom
    • While intoxicated
    • During exercise
    • To kill time
  • 7. DO: Bigger is Better
    • Body copy < 13px will be resized
    • Recommended minimums
      • Body copy: 14px
      • Headlines: 22px
    • CSS fix: “-webkit-text-size-adjust: none;”
    Beware minimum font sizes; automatic resizing
  • 8. DO: Bigger is Better Beware minimum font sizes; automatic resizing
  • 9. DO: Touch Targets The finger is the new mouse Design for tappable touch targets; not text links 44 x 44px minimum
  • 10. DO: Touch Targets Text Buttons Image “Buttons”
  • 11. DO: Streamline
    • Get skinny: 320-550px wide
    • Short, direct copy
    • Eliminate or hide low priority content
      • Links
      • Copy
      • Images
    • Clear and direct calls to action
      • Make it obvious
    Single column layout; simplified content
  • 12. DO: Streamline
  • 13. DON’T: Create friction
  • 14. DON’T: “ View on Mobile ” Link Why the extra click? email web site mobile version
  • 15. ADVANCED: Use Media Queries
  • 16. ADVANCED: Use Media Queries
  • 17. ADVANCED: Use Media Queries campaignmonitor.com/blog stylecampaign.com/blog
  • 18. INSPIRATION: Apps + sites Site: Yes Email: No
  • 19. More examples… DO DON’T
  • 20. More examples…
  • 21. Your Takeaways
    • Know your audience. Discovery is an accomplishment!
    • Quick wins:
      • Bigger text
      • Touch targets (big buttons)
      • Streamline content
      • Ditch the plain text “mobile friendly” version (or test it)
      • Explore media queries