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.

Mobile Email Design, Strategies, Workflow and Best Practices


Published on

In this presentation, Justine Jordan and Alex Williams tackle some of the toughest questions and offer real-life advice for getting multiscreen email right. Topics include:

*The implications of each major screen size and device
*Determining what devices your subscriber base is using and how and where they are converting
*The different types of design approaches, such as responsive and scalable, and which is the best fit based on your resources and expertise
*Creating a consistent user experience across email and Web/landing pages
*Examples and key best practices
*Communicating with your designer and programmer
*Testing, learning, optimization and measurement/analysis
*Future trends and predictions

Published in: Design, Technology
  • Login to see the comments

Mobile Email Design, Strategies, Workflow and Best Practices

  1. 1. Email Strategy and Designfor a MultiscreenWorld
  2. 2. Alex WilliamsCreative DirectorTrendline Interactive@alexcwilliamsJustine JordanResearch & EducationLitmus@meladorri
  3. 3. We’re GonnaTalk. A Lot.The lay of the landMultiscreen design approachesImplications…Workflow and processKey best practices
  4. 4. Got screens?
  5. 5. A lookback at#spop11
  6. 6. Today, at#spop13OF OPENS ARE ON A MOBILE DEVICE5-50% on individual campaigns60%+ for niche audiences
  7. 7. Email Opens: April 2013Mobile:Smartphones (iPhone,Android) andtabletsDesktop:Installed email programs (Outlook, AppleMail)Webmail:Email accessed through a web browser(Gmail, Hotmail,Yahoo!)Desktop34%Webmail24%Mobile42%Source: Litmus Email Analytics
  8. 8. 0%10%20%30%40%50%60%70%Opens in Each EnvironmentWebmail Desktop MobileThe last 28 months42%33%10%
  9. 9. The Most Important Audience…YOURS.
  10. 10. How mobile are your customers?Brand/Industry A: 55% Brand/Industry B: 18%Plan on data, not your gut
  11. 11. +366%since #spop11
  12. 12. +366%since #spop11
  13. 13. Small Medium LargeScreensize-apaloozaiPhone2.3” wideGalaxy Note II3.2” wideNexus 77.3” wideBB Bold2.6” wideiPad Mini5.3” wideExcite 138.5” wide
  14. 14. 14The unifying characteristic?TOUCH.
  15. 15. two handed49% one handed36% cradled67% used right thumb on the screen33% used left thumb on the screen
  16. 16. Approaches
  17. 17. As with mostthings withemail, there’snot a one-size-fits-allapproach(sorry to disappoint you)
  18. 18. Mobile FirstConsiders themobile user asa priority|-------------------460px -------------------| |---------------------600px ---------------------|
  19. 19. Mobile First / Friendly• One layout for all screen sizes• Single column design– 320-500px• Large text & buttons• Generous white space• Clear calls to action• Short, concise body copyAgnostic / Aware / Scalable
  20. 20. Pros• Prioritizes importantdata, content, actions• Easier execution• No reliance on media query support• Good rendering in apps and nativeclientsCons• Desktop can suffer• Less real estate• Can get long• Fixed width can be lessthan ideal for AndroidMobile First / FriendlyBEST FOR:Ready for change, testing the waters, or resource strapped
  21. 21. FluidEmail widthchanges tofit within thewindow|--------------------------------------------------------1166px---------------------------------------------------||-----------------------------525px --------------------------|
  22. 22. Fluid layout• Percentage-basedwidths• Adapts to fill thescreen it’s viewedon; text wrapsautomatically
  23. 23. Fluid layoutBEST FOR:Simple layouts, automated emails, mostly text/few imagesPros• Simple execution• No learning curve or reliance on mediaqueriesCons• Fewer design choices• Very narrow or very wideemails can get awkwardand hard to read
  24. 24. ResponsiveDesignUses mediaqueries to detectscreen size andalter contentaccordingly|-----------320px ------------||--------------------------------------------700px------------------------------------------|
  25. 25. Responsive Design• More than a “line of code”• Set of conditional statement that enablesspecific styles– If the screen size is x, then display y– If the screen size is x, then increase headline size to y– If screen size is x, then show image at 100%• Detects screen size, not device type
  26. 26. Pros• Restyle, resize or reorder elements• Ability to hide/show desktop or mobilespecific images/content• Customized calls to action• Seamless experience across a range ofscreen sizesCons• Coding learning curve• Forces tough choices• Increased production andQA timeResponsive DesignBEST FOR:Growing mobile audiences, travel alerts, tech companies
  27. 27. Email is an *application*
  28. 28. Email is an *application*Device ≠ email client
  29. 29. IMPLICATIONS!!
  30. 30. iPhone native yesiPad native yesAndroid 2.1 native noAndroid 2.2 native yesAndroid 2.3 native yesAndroid 4.x native yesGmail mobile apps noMailbox iOS app yes@media support! mobile apps noWindows Mobile 7 noWindows Mobile 7.5 yesWindows Mobile 8 noBlackBerry OS 6 yesBlackBerry OS 7 yesBlackBerry Z10 yesKindle Fire native yes
  31. 31. Inconsistentrenderingacross devicesand operatingsystems
  32. 32. iPhone: 23% of opens• Automatically scalesmessages to fit the screen• Excellent support forCSS3 and media queries• Images on by default• Resizes fonts under 13px
  33. 33. Android: 8% of opens• Blocks images by default;supportsALT text• Two apps with opposingsupport for media queries• Primary content focus on left-hand side• Various screen sizes and noautomatic scalingImage source:
  34. 34. BlackBerry Z10 < 1%• Media query support• Blocks images; supportsstyledALT text• Does not scale/auto-zoom• No separate app; email joinssocial, SMS and voice in the“hub”
  35. 35. Windows Phone < 1%• Mixed media querysupport• Does weird things to fonts• Blocks images; no ALT text• No one has them
  36. 36. What about tablets?• Desktop versionusually works just fine• Plan for tap targetsand plenty of whitespace• Mobile first/friendlyrules apply
  37. 37. Ch-Ch-Ch-Ch-Choices• First, we must choose our design approach• Next, every module and piece of content hasto have a plan• Lastly, we need a plan B in case we run intotrouble in execution.
  38. 38. Mobile Success =Tough Choices• Analyze each section of the template• Look at historical performance, removefeelings from the process• Trace required-content back to the source tounderstand rationale.
  39. 39. Workflow and process
  40. 40. First Steps of Design Planning• Identify top email clients on Desktop,Tablet andSmartphone. Focus on top 3-5 in each.• Prioritize - in order - 3 desired actions from eachemail.• Audit assets. Are we working with raw assets orpre-designed assets from different channel?
  41. 41. A Responsive Design Process1. Grid2. Wireframe3. ResponsiveWireframe HTML Prototype4. Visual Design (varies depending on stakeholders)5. Code Final HTML
  42. 42. Key best practicesBut first…
  43. 43. In Memorium
  44. 44. The Fold
  45. 45. SmallGrey Fonts
  46. 46. Glossy ImageButtons
  47. 47. The “Mobile Version”
  48. 48. Link Clusters
  49. 49. Busy Images
  50. 50. Magazine AdEmails
  51. 51. ClaustrophobicPre-headers
  52. 52. Key best practices
  53. 53. Bigger buttons & fonts• Increase all font sizes25%, especially headlines– Body copy: 16px+– Headlines: 22px+– Buttons: 44px by 44px– White space: 15px• If you don’t make thembigger, Apple will!
  54. 54. Consider the experience• Landing pages are part ofthat experience• Driving people to stuff thatdoesn’t work on mobile isstupid????Page/SiteTapPreview/OpenPreheaderSubject LineFrom Name
  55. 55. FsdlkjfsldjfFlash Interstitials / pop-ups Painfully long forms
  56. 56. Prioritize and focus• Identify the top 3-5 activities and use those– Purchase?– Download?– Registration?– Social?
  57. 57. Device targeting candisplay app/OS specificcontent
  58. 58. Dial up the contrastBright screenskill batteries
  59. 59. Say no to link clusters and yes to white space
  60. 60. Retina Optimizing Images400x300 - 12kb - 70% Compression …width=”200" height=”150” class=”Loren”…@media only screen and (max-width: 599px)img[class=”Loren"] {width: 100%;height: auto !important;}
  61. 61. THANKS!