Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and Code

1,653 views
1,400 views

Published on

Diving headfirst into strategy, design, and coding for mobile email

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,653
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
56
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and Code

  1. 1. The Mobile Inbox 201: Design & Code Diving headfirst into strategy, design, and coding for mobile email
  2. 2. Tracy Novotny Technical Producer ExactTarget
  3. 3. Tana Babcock Sr. Design Consultant ExactTarget
  4. 4. Agenda •  Mobile Landscape •  Designing for Small Screens and Touch Interfaces •  Coding for Mobile-Optimized Solutions •  Sustainable Responsive Workflow
  5. 5. Tana Babcock Responsive Design Techniques, Tricks & Tips
  6. 6. Mobile adoption Webmail Desktop Mobile 70% 60% 42% 50% 33% 40% 30% 20% 10% 0% Data  Source:  Litmus  emailclientmarketshare.com   10% Opens in Each Environment Data  Source:  Litmus  emailclientmarketshare.com  
  7. 7. Email Client Landscape As of October 2013 1.  2.  3.  4.  5.  6.  7.  8.  9.  10.  Apple iPhone Outlook Apple iPad Google Android Apple Mail Outlook.com Yahoo! Mail Gmail Windows Live Mail Windows Mail Recent changes: 24% 17% 12% 11% 8% 6% 6% 3% 3% 2% iOS 7 launched Sept 18th Outlook 2013 released in Q1 Mini released Q4 2012 Gmail app updates Q3 NEW in Q2 Redesigned Q3 Gmail tabs – impacts sorting Emailclientmarketshare.com
  8. 8. Designing for Small Screens •  Content First: Top down Hierarchy •  Single column layout •  Contrast of value and color for content distinction •  Large text size ensures readability •  Don’t cram - Legibility over length using concise messaging
  9. 9. Designing for Touch Interfaces •  44px Minimum Button (Full-width even better!) •  Left or Center Aligned Text •  Adequate Spacing for Touch Accuracy
  10. 10. Buttons for Touch Interfaces •  44px Minimum Button (Full-width even better!) •  Left or CenteDETAIL: Screen Resolution allows for more detail to be seen and more enticing visuals •  Watch your Language! Avoid using “click here” when users are actually “tapping” •  Aligned Text •  Adequate Spacing for Touch Accuracy
  11. 11. CSS Buttons RECOMMENDATION: Use CSS to style buttons for complete scalability & clarity
  12. 12. “A picture is worth a thousand words. An interface is worth a thousand pictures.” - Ben Schneiderman
  13. 13. At Home in the Mobile UI What mobile subscribers are used to interacting with Google Maps Facebook YouTube Google+ WeChat
  14. 14. Clean Content Breaks Familiar, easy on the eyes and easy to skim
  15. 15. Clean Content Breaks Familiar, easy on the eyes and easy to skim RECOMMENDATION: Use containers, rules, divider graphics and spacing to define content breaks
  16. 16. Icons = Instant Communication Communication at the speed of instant recognition RECOMMENDATION: Establish an icon set for your mobile content and USE THEM OFTEN
  17. 17. Mobile UI Font Sizes Average font size in the UI is about 17px Stand out from the surrounding UI with BIGGER fonts 20px 17px 15px 13px
  18. 18. Mobile UI Font Sizes 28px RECOMMENDATION: Headlines ≥ 28px Body Text ≥ 17px 17px 24px
  19. 19. Mo’ pixels, Mo’ problems…
  20. 20. Images and HD Mobile Displays HD = More Beautiful Pixels! More Beautiful Pixels! = Larger Files Larger Files = Slower Downloads Slower Downloads = Loss of Engagement
  21. 21. Mobile Pixel Density Most popular Pixel Density is 200% (“Retina Display”) RECOMMENDATION: Design for 200% Pixel Density Derived from annualized monthly Google queries (from AdWords traffic estimator). - screensiz.es
  22. 22. Compression and File Size 320 x 395 JPG Quality: 70 31KB 640 x 789 (200%) JPG Quality: 70 640 x 789 (200%) JPG Quality: 30 70KB 33KB
  23. 23. RECOMMENDATION: Create mobile photos at 200% and output at 30% JPEG Quality
  24. 24. Resolution Hierarchy Some images need clarity more than others 45 x 45 JPG: 70 90 x 90 (200%) JPG: 30 90 x 90 (200%) JPG: 70 90 x 90 (200%) GIF 90 x 90 (200%) PNG 3KB 3KB 5KB 5KB 4KB
  25. 25. Resolution Hierarchy Some images need clarity more than others RECOMMENDATION: Design logos and graphics for 200% save as GIF or PNG 90 x 90 (200%) GIF 90 x 90 (200%) PNG 5KB 4KB
  26. 26. HD Images & Creative Workflow Smart Objects are your friends
  27. 27. Image Editing & Compression Utilities Adobe Photoshop Express @ photoshop.com pixlr.com/editor compressnow.com cutandslice.me
  28. 28. “There's a new email client every day, whether, desktop, mobile or tablet. You can do your best to make the experience hold up across devices, but you can't make it perfect across devices” - Alex Williams on 11 Things that Need to Die in Mobile Email
  29. 29. Case in Point: Android Gmail App 9% Android of email opens according to Litmus 70% About in the Gmail App according to Brightwave user survey
  30. 30. Creative Control Where You Can
  31. 31. Creative Control Where You Can RECOMMENDATION: Make style decisions not mockup decisions
  32. 32. Two Steps to the Mobile Inbox 1 hort-term Aware S Simple improvement without specialization. Design-only tactics   2 2 Long-term Responsive Deliver a customized mobile experience. Special design + code
  33. 33. Tracy Novotny Responsive Email Coding Techniques Sustainable Responsive Workflow
  34. 34. Overview of @media query styles CSS is activated at 480px and smaller Add body[yahoo] in front of every style class !important added to override in-line styles Add yahoo= fix to the <body> tag @media styles are applied to the HTML with class=
  35. 35. 7 Responsive Email Techniques •  Wrapping content with fluid widths •  100% width buttons •  Stacking left column on right •  Stacking right column on left •  Stacking navigation •  Create columns from vertical content •  Showing/Hiding content on mobile
  36. 36. Wrapping content with fluid widths
  37. 37. Wrapping content with fluid widths
  38. 38. Wrapping content with fluid widths
  39. 39. 100% width buttons
  40. 40. 100% width buttons
  41. 41. 100% width buttons
  42. 42. Stacking left column on right
  43. 43. Stacking left column on right
  44. 44. Stacking left column on right
  45. 45. Stacking right column on left
  46. 46. Stacking right column on left
  47. 47. Stacking right column on left
  48. 48. Stacking navigation
  49. 49. Stacking navigation
  50. 50. Stacking navigation
  51. 51. Create columns from vertical content
  52. 52. Create columns from vertical content
  53. 53. Create columns from vertical content
  54. 54. Showing/Hiding content on mobile
  55. 55. Showing/Hiding content on mobile
  56. 56. Showing/Hiding content on mobile
  57. 57. Coding recommendations Do not set too many fixed widths, the more fixed widths the more styles you’ll need to add to make the email responsive. Don t be afraid to try unconventional email coding techniques for mobile content Design and build to give your audience the best experience possible
  58. 58. Sustainable responsive workflow •  Responsive emails take on average 1.5 – 2X longer to build over static campaigns •  Develop a modular template to reduce build time •  Design and development should work together to build a reusable wireframe/framework •  Pre-build modules
  59. 59. Wireframe and live prototype
  60. 60. Framework examples
  61. 61. Framework examples
  62. 62. Check us out on Pinterest

×