• Like
  • Save
Email + Mobile Webinar
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Email + Mobile Webinar

  • 4,800 views
Published

Webinar presented on Nov. 15th with Chris Studabaker from ExactTarget.

Webinar presented on Nov. 15th with Chris Studabaker from ExactTarget.

Published in Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,800
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
17

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
  • JJ
  • JJ + CS
  • JJ
  • JJ
  • JJ
  • JJ
  • Key questions to consider when you are looking at developing a mobile strategy. Audience size – This is a business decision that is going to be unique to everyone. List size also comes into consideration – 5% of 3 million subscribers Do you include a “view on mobile device” link in emails? If so, how many people are consistently clicking this? Does it represent a large enough population?Talk about the decision framework What are the inputs for you to consider making a decision about your mobile plight?Audience, goals, content, etc.Hypothetical use cases for “if you fit xyz profile, try this...”Do I create a separate mobile version?Do I include a view on mobile link?
  • Financial companiesInternal newsletters for companies that provide BB to employees
  • Appropriate b/c audience is technical and they expect it
  • Replace w/ Evernote example: desktop & web apps – highly mobile audienceValue of the message is based in the text stories; allows a more native format for readability
  • When is each situation appropriate?
  • Snapshot of the challenges and diversity of devicesNokia Remote Device Access is a great way to experience Symbian first hand.
  • Snapshot of the challenges and diversity of devicesNokia Remote Device Access is a great way to experience Symbian first hand.
  • Snapshot of the challenges and diversity of devicesNokia Remote Device Access is a great way to experience Symbian first hand.
  • New blackberry shots from deviceanywhere?
  • 3+ columns will be hard to use
  • Add desktop examples & iPhone chrome
  • Add desktop examples
  • Now, within each environment, where did the CLICKS happen? They match pretty closely to the opens. Note that the newsletter has more DESKTOP opens, probably due to the value of the content being based in readability and text, probably harder to use on mobile, while the value of the 2 retail examples are based in images that are just as effective on mobile.
  • Now, let’s compare the CLICKS IN EACH ENVIRONMENT TO THE OPENS IN EACH ENVIRONMENT. The previous slide looked at total clicks, so it’s going to be weighted according to the audiences sizes. We want to move away from volume and get a better idea of how likely folks are to click in each environment – hence, a per environment click-to-open rate. So, while the multi-device users are a small group, they’re very likely to click. Presumably, they are seeing the message in one environment, then choosing to come back later in another.

Transcript

  • 1. EMAIL + MOBILE [2011 EDITION] +
  • 2. Introductions… Justine Jordan Marketing Director, Litmus @meladorri + @litmusapp Chris Studabaker Global Practice Manager, Design Solutions @cstudabaker + @ExactTargetAsk questions, discuss and interact on Twitterusing #LitmusChat
  • 3. 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
  • 4. So, what is “mobile email”?Email + mobile.It’s about developing email for smallscreens, touch interfaces, multi-device users and considering mobileuser needs.
  • 5. from to
  • 6. KNOW YOURAUDIENCE[You should know more than anyone else]
  • 7. Knowing Your Audience• 15% of opens are on a mobile device Mobile 15%• 2-20% on individual campaigns• 30%+ for niche Desktop audiences Webmail 53% 32%http://litmus.com/blog/email-client-market-share-infograph
  • 8. Mobile Opens by Platform Other 1%Majority of mobile opensin Android, iOS (iPad +iPhone) iPad 19% Android iPhone 17% 63%http://litmus.com/blog/email-client-market-share-infograph
  • 9. Making the mobile email choice • The analytics make a case • User agent detection • Web analytics • Clicks on mobile link • Existing mobile site/app • Existing SMS program • Transactional emails for “on the go” situations • In-store coupons • Mobile purchases • Travel updates • Urgent communications
  • 10. CONSIDERCONTEXT[An extension of knowing your audience]
  • 11. Context comes firstPeople check email… • In bed • At the gym • In the bathroom • While intoxicated • During exercise • To kill time
  • 12. Environment vs. devicesThe distinctions between viewing environments – i.e.mobile and desktop – drive behavior more than distinctionsbetween email clients.Focus on viewing environmentrather than specific devices oremail clients.
  • 13. Optimizing design: 6 approaches SIMPLE 1. Do nothing 2. Mobile text version 3. Mobile aware 4. Skinny template 5. Fluid layout COMPLEX 6. Responsive design
  • 14. 1. Do nothingNot optimizing for mobile may be a validstrategy when it doesn’t make sense foryour audience, brand, or business.For instance: • Your mobile audience is very small • Resources aren’t available to implement • Quicker wins exist
  • 15. 2. Mobile text version Creating a “view on mobile” version that is linked from the HTML email makes sense when you have a large BlackBerry audience. • Plain text • Single column • Simple rich text • Minimal color • Few small imagesSingle column, plain or rich text, very basic imagery.
  • 16. When to ditch mobile text…Don’t waste clicks on a less-than-optimal text version when a mobile emailoptimized website exists. mobile version web site
  • 17. 3. Mobile awareCreating email designs that consider themobile experience but aren’t speciallyconstructed for it. Best when you want toincrease mobile usability without making radicalchanges or specializing.• Single column primary content• Big images• Big text• Big buttons
  • 18. One column primary content, and easy to press buttons. Visual style workswell on mobile without special setup.
  • 19. 4. Skinny templateDesigned to have a smaller width thanstandard practices, thus becoming easier toread and navigate on mobile.• Best when you’re starting out, or want to balance desktop & mobile usability.• Single Column• 320px – 520px
  • 20. ~420 pixelsSkinny single column and large, readable text create a style that translatesseamlessly across environments.
  • 21. 5. Fluid layoutEmail width that adapts to screens both largeand small. Best used in situations where thestructure is basic, readability is key, andscaling would destroy usability.• Use percentages for widths• Most effective for simple layouts• Heavy reliance on text content
  • 22. ~740 pixels ~320 pixelsEmail width scales rather than text size, ensuring readability in anyenvironment.
  • 23. 6. Responsive designUsing CSS3 @media queries to detect screensize, and display specific content or elements indifferent types of viewing environments. The mostadvanced way to deliver a specialized mobileemail experience.• Detects large vs. small screen size• Rolls back to standard version when @media isn’t supported• Hide or remove content on small screens
  • 24. Simple layout, selectively removing content & spacing adjustments create a@media query case study.
  • 25. Specific desktop & mobile styles create a simple, readable and sustainabletemplate.
  • 26. Which should you use?1. Do nothingWhen there are better things to do2. Create a mobile text versionWhen you have a large BlackBerry audience: data, highly regulatedindustries or companies that use BB exclusively.3. Demonstrate awareness with big buttons & big textWhen testing, avoiding radical change, balancing dual environments4. Try a skinny templateWhen the data comes back and says you’re ready for the next step5. Implement a fluid layoutFor transactional emails, auto-news, and when when basic structureand readability is key6. Go responsive with media queriesWhen you’re trying to impress, or you have a specialized use case(such as an urgent and “on the go” scenarios)
  • 27. DESIGNING FOR ALLENVIRONMENTS[Since you can’t predict where users open]
  • 28. Display and Support ChallengesThere are no mobile email standards!OS Preview HTML* Images* Alt text Scale Enlarge text fontsAndroid 2.2 ✗ ✗ ✗ ‡Blackberry ✗ ◐ ◐ ✗ ✗iOS 4.x -- ‡Symbian ✗ ✗ ✗ ✗ ‡Windows Phone 7 ✗ ✗ ✗*HTML or images enabled by default Blackberry HTML email may be enabled, but is not on by default in 4.5/5. The ability to downloadimages automatically is an option. Blackberry 6 has webkit support and displays HTML email bydefault, but a prompt appears to download external images‡ inconsistent wrapping and scaling of text
  • 29. Display and Support ChallengesPlan for an “images off” environment in most mobile operating systems. on Android alt text Symbian images off Symbian imagesAndroid supports alt text.
  • 30. Display and Support ChallengesWindows Mobile 7 blocks images, butimages off WinMo Preview WinMo offers preview text and many on WinMo imagesopportunities to download images.
  • 31. Blackberry 6 supports HTML email well, but doesn’t zoom or display imagesby default.
  • 32. The finger is the new mouseDesign for tappable touch targets; not text links 44 x 44px minimum
  • 33. Create touch targetsButtons can be traditional text buttons or image-based touch targets that linkback to content. Text Buttons Image “Buttons”
  • 34. Bigger fonts are betterBeware minimum font sizes; automatic resizing• Body copy < 13px will be resized• Recommended minimums • Body copy: 14px • Headlines: 22px• CSS fix: “-webkit-text-size-adjust: none;”
  • 35. Bigger fonts are betterToo-small navigation will be negatively affected by text scaling on iPhoneand iPad.
  • 36. Bigger fonts are better600px scaled to 320px on an iPhone is roughly 50% smaller - planaccordingly!
  • 37. Streamline, be awareSingle column layout = simplified content• Short, direct copy• Eliminate or hide low priority content • Links • Copy • Images• Clear and direct calls to action • Make it obvious
  • 38. Streamline, be awareSingle column layout, simple copy, touch targets, clear calls to action andminimal fluff = mobile aware.
  • 39. Don’t create frictionDon’t give users a reason NOT to click by making text or other calls-to-action impossible to tap.
  • 40. Get inspired by sites + appsLayouts that contain more than three columns will be difficult to use. Site: Yes Email: No
  • 41. Don’t forget about context!When sending email regarding mobile apps, consider that users may bereading email on mobile, too. DO DON’T
  • 42. Consider “mobile first”Simple copy + big headlines = an email that is mobile aware will also bemore usable in a desktop environment
  • 43. Consider “mobile first”Featured products also serve as large, tappable buttons in a mobileenvironment.
  • 44. DOES ENVIRONMENTAFFECT ACTION?[Do subscribers click while they’re mobile?]
  • 45. How does mobile affect clicks? % of total clicks by environment for 3 samples 90 80 80 70 67 62 60 50 Desktop Only 40 34 Mobile Only 28 30 17 Multi Device 20 10 3 5 4 0 Newsletter Retail 1 Retail 2Learning: clicks mostly match to open environments.
  • 46. How does mobile affect clicks? Environment CTO rate for 3 environments 45 38.9 40 35 33.6 30 25 Desktop Only 20 16.6 17.6 16.1 Mobile Only 15 9.4 7.4 7.4 6.9 Multi Device 10 5 0 Newsletter Retail 1 Retail 2Likelihood to click doesn’t vary radically across environments, but readabilityplays a role. Multi device users have chosen to engage.
  • 47. I LOVE IT.TELL ME MORE![More information and valuable resources]
  • 48. Resourcesstylecampaign.com/blogcampaignmonitor.com/bloglitmus.com/blogexacttarget.com/sffmobileawesomeness.comcssiphone.comandroidpatterns.commobilepatterns.commediaqueri.es
  • 49. QA&
  • 50. Thanks! Justine Jordan Marketing Director, Litmus @meladorri + @litmusapp Chris Studabaker Global Practice Manager, Design Solutions @cstudabaker + @ExactTarget Presentation available at www.slideshare.net/litmusappRecording will be posted at www.litmus.com/blog/email-mobile-webinar-2011