Your SlideShare is downloading. ×
0
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Mobile Email Design, Strategies, Workflow and Best Practices
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile Email Design, Strategies, Workflow and Best Practices

3,703

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: …

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
1 Comment
14 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,703
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
1
Likes
14
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Over 9 quarters, we’ve seen some crazy s^&% happen…
  • now it’s REALLY easy. No excuses!!!
  • now it’s REALLY easy. No excuses!!!
  • One-handed use seems to be highly correlated with users’ simultaneously performing other tasks. Many of those using one hand to hold their phone were carrying out other tasks such as carrying bags, steadying themselves when in transit, climbing stairs, opening doors, holding babies, and so on.Left handedness in the general population: 10%
  • “Mobile forces you to focus. Mobile devices require … teams to focus on only the most important data and actions. … There simply isn’t room in a 320 by 480 pixel screen for extraneous, unnecessary elements. You have to prioritize. So when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter today’s desktop-accessed websites. That’s good user experience and good for business.”
  • Fairly easy to implementFew rendering issuesVery small and very large screens can be hard to read
  • Advantages: You create a single message, which provides a seamless experience for viewers no matter which screen they use. Your responsive email will be optimized for many mobile devices, especially the iPhone. Responsive design also allows you to show or hide blocks of copy in different versions of the email. Many designers have latched onto this “show-hide” capability because it allows them to customize copy, images or calls to action for different devices. You could show three offers in a desktop version, for example, and then direct the mobile version to hide all but the primary offer. Disadvantages: Responsive design requires specialized coding expertise and isn’t compatible with all devices/ OS, such as BlackBerry, older versions of Outlook and the Gmail application on an Android mobile. Also, your mobile version might have to lose some valuable content, such as a secondary offer or editorial content. This could reduce click and conversion opportunities.
  • Advantages: You create a single message, which provides a seamless experience for viewers no matter which screen they use. Your responsive email will be optimized for many mobile devices, especially the iPhone. Responsive design also allows you to show or hide blocks of copy in different versions of the email. Many designers have latched onto this “show-hide” capability because it allows them to customize copy, images or calls to action for different devices. You could show three offers in a desktop version, for example, and then direct the mobile version to hide all but the primary offer. Disadvantages: Responsive design requires specialized coding expertise and isn’t compatible with all devices/ OS, such as BlackBerry, older versions of Outlook and the Gmail application on an Android mobile. Also, your mobile version might have to lose some valuable content, such as a secondary offer or editorial content. This could reduce click and conversion opportunities.
  • After the from/subject/preheader, you get the open.The preview pane still counts, but has a different form factor
  • Transcript

    • 1. Email Strategy and Designfor a MultiscreenWorld
    • 2. Alex WilliamsCreative DirectorTrendline Interactive@alexcwilliamsJustine JordanResearch & EducationLitmus@meladorri
    • 3. We’re GonnaTalk. A Lot.The lay of the landMultiscreen design approachesImplications…Workflow and processKey best practices
    • 4. Got screens?
    • 5. A lookback at#spop11
    • 6. Today, at#spop13OF OPENS ARE ON A MOBILE DEVICE5-50% on individual campaigns60%+ for niche audiences
    • 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. 0%10%20%30%40%50%60%70%Opens in Each EnvironmentWebmail Desktop MobileThe last 28 months42%33%10%
    • 9. The Most Important Audience…YOURS.
    • 10. How mobile are your customers?Brand/Industry A: 55% Brand/Industry B: 18%Plan on data, not your gut
    • 11. +366%since #spop11
    • 12. +366%since #spop11
    • 13. Small Medium LargeScreensize-apaloozaiPhone2.3” wideGalaxy Note II3.2” wideNexus 77.3” wideBB Bold2.6” wideiPad Mini5.3” wideExcite 138.5” wide
    • 14. 14The unifying characteristic?TOUCH.
    • 15. http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php15% two handed49% one handed36% cradled67% used right thumb on the screen33% used left thumb on the screen
    • 16. Approaches
    • 17. As with mostthings withemail, there’snot a one-size-fits-allapproach(sorry to disappoint you)
    • 18. Mobile FirstConsiders themobile user asa priority|-------------------460px -------------------| |---------------------600px ---------------------|
    • 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. 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. FluidEmail widthchanges tofit within thewindow|--------------------------------------------------------1166px---------------------------------------------------||-----------------------------525px --------------------------|
    • 22. Fluid layout• Percentage-basedwidths• Adapts to fill thescreen it’s viewedon; text wrapsautomatically
    • 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. ResponsiveDesignUses mediaqueries to detectscreen size andalter contentaccordingly|-----------320px ------------||--------------------------------------------700px------------------------------------------|
    • 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. 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. Email is an *application*
    • 28. Email is an *application*Device ≠ email client
    • 29. IMPLICATIONS!!
    • 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 supporthttp://stylecampaign.com/blog/2012/10/responsive-email-support/Yahoo! 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. Inconsistentrenderingacross devicesand operatingsystems
    • 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. 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: stylecampaign.com
    • 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. Windows Phone < 1%• Mixed media querysupport• Does weird things to fonts• Blocks images; no ALT text• No one has them
    • 36. What about tablets?• Desktop versionusually works just fine• Plan for tap targetsand plenty of whitespace• Mobile first/friendlyrules apply
    • 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. 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. Workflow and process
    • 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. A Responsive Design Process1. Grid2. Wireframe3. ResponsiveWireframe HTML Prototype4. Visual Design (varies depending on stakeholders)5. Code Final HTML
    • 42. Key best practicesBut first…
    • 43. In Memorium
    • 44. The Fold
    • 45. SmallGrey Fonts
    • 46. Glossy ImageButtons
    • 47. The “Mobile Version”
    • 48. Link Clusters
    • 49. Busy Images
    • 50. Magazine AdEmails
    • 51. ClaustrophobicPre-headers
    • 52. Key best practices
    • 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. 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. FsdlkjfsldjfFlash Interstitials / pop-ups Painfully long forms
    • 56. Prioritize and focus• Identify the top 3-5 activities and use those– Purchase?– Download?– Registration?– Social?
    • 57. Device targeting candisplay app/OS specificcontent
    • 58. Dial up the contrastBright screenskill batteries
    • 59. Say no to link clusters and yes to white space
    • 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. THANKS!@alexcwilliamsalex@trendlineinteractive.com@meladorrijustine@litmus.com

    ×