Your SlideShare is downloading. ×
Email Strategy and Designfor a MultiscreenWorld
Alex WilliamsCreative DirectorTrendline Interactive@alexcwilliamsJustine JordanResearch & EducationLitmus@meladorri
We’re GonnaTalk. A Lot.The lay of the landMultiscreen design approachesImplications…Workflow and processKey best practices
Got screens?
A lookback at#spop11
Today, at#spop13OF OPENS ARE ON A MOBILE DEVICE5-50% on individual campaigns60%+ for niche audiences
Email Opens: April 2013Mobile:Smartphones (iPhone,Android) andtabletsDesktop:Installed email programs (Outlook, AppleMail)...
0%10%20%30%40%50%60%70%Opens in Each EnvironmentWebmail Desktop MobileThe last 28 months42%33%10%
The Most Important Audience…YOURS.
How mobile are your customers?Brand/Industry A: 55% Brand/Industry B: 18%Plan on data, not your gut
+366%since #spop11
+366%since #spop11
Small Medium LargeScreensize-apaloozaiPhone2.3” wideGalaxy Note II3.2” wideNexus 77.3” wideBB Bold2.6” wideiPad Mini5.3” w...
14The unifying characteristic?TOUCH.
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php15% two handed49% one handed36% cr...
Approaches
As with mostthings withemail, there’snot a one-size-fits-allapproach(sorry to disappoint you)
Mobile FirstConsiders themobile user asa priority|-------------------460px -------------------| |---------------------600p...
Mobile First / Friendly• One layout for all screen sizes• Single column design– 320-500px• Large text & buttons• Generous ...
Pros• Prioritizes importantdata, content, actions• Easier execution• No reliance on media query support• Good rendering in...
FluidEmail widthchanges tofit within thewindow|--------------------------------------------------------1166px-------------...
Fluid layout• Percentage-basedwidths• Adapts to fill thescreen it’s viewedon; text wrapsautomatically
Fluid layoutBEST FOR:Simple layouts, automated emails, mostly text/few imagesPros• Simple execution• No learning curve or ...
ResponsiveDesignUses mediaqueries to detectscreen size andalter contentaccordingly|-----------320px ------------||--------...
Responsive Design• More than a “line of code”• Set of conditional statement that enablesspecific styles– If the screen siz...
Pros• Restyle, resize or reorder elements• Ability to hide/show desktop or mobilespecific images/content• Customized calls...
Email is an *application*
Email is an *application*Device ≠ email client
IMPLICATIONS!!
iPhone native yesiPad native yesAndroid 2.1 native noAndroid 2.2 native yesAndroid 2.3 native yesAndroid 4.x native yesGma...
Inconsistentrenderingacross devicesand operatingsystems
iPhone: 23% of opens• Automatically scalesmessages to fit the screen• Excellent support forCSS3 and media queries• Images ...
Android: 8% of opens• Blocks images by default;supportsALT text• Two apps with opposingsupport for media queries• Primary ...
BlackBerry Z10 < 1%• Media query support• Blocks images; supportsstyledALT text• Does not scale/auto-zoom• No separate app...
Windows Phone < 1%• Mixed media querysupport• Does weird things to fonts• Blocks images; no ALT text• No one has them
What about tablets?• Desktop versionusually works just fine• Plan for tap targetsand plenty of whitespace• Mobile first/fr...
Ch-Ch-Ch-Ch-Choices• First, we must choose our design approach• Next, every module and piece of content hasto have a plan•...
Mobile Success =Tough Choices• Analyze each section of the template• Look at historical performance, removefeelings from t...
Workflow and process
First Steps of Design Planning• Identify top email clients on Desktop,Tablet andSmartphone. Focus on top 3-5 in each.• Pri...
A Responsive Design Process1. Grid2. Wireframe3. ResponsiveWireframe HTML Prototype4. Visual Design (varies depending on s...
Key best practicesBut first…
In Memorium
The Fold
SmallGrey Fonts
Glossy ImageButtons
The “Mobile Version”
Link Clusters
Busy Images
Magazine AdEmails
ClaustrophobicPre-headers
Key best practices
Bigger buttons & fonts• Increase all font sizes25%, especially headlines– Body copy: 16px+– Headlines: 22px+– Buttons: 44p...
Consider the experience• Landing pages are part ofthat experience• Driving people to stuff thatdoesn’t work on mobile isst...
FsdlkjfsldjfFlash Interstitials / pop-ups Painfully long forms
Prioritize and focus• Identify the top 3-5 activities and use those– Purchase?– Download?– Registration?– Social?
Device targeting candisplay app/OS specificcontent
Dial up the contrastBright screenskill batteries
Say no to link clusters and yes to white space
Retina Optimizing Images400x300 - 12kb - 70% Compression …width=”200" height=”150” class=”Loren”…@media only screen and (m...
THANKS!@alexcwilliamsalex@trendlineinteractive.com@meladorrijustine@litmus.com
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
×

Mobile Email Design, Strategies, Workflow and Best Practices

3,820

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

No notes for slide
  • Over 9 quarters, we’ve seen some crazy s^&amp;% 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 of "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. 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. 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 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. 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: stylecampaign.com
    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!@alexcwilliamsalex@trendlineinteractive.com@meladorrijustine@litmus.com

    ×