Email + Mobile Webinar

EMAIL + MOBILE [2011 EDITION] +

Introductions… Justine Jordan Marketing Director, Litmus @meladorri + @litmusapp Chris Studabaker Global Practice Manager, Design Solutions @cstudabaker + @ExactTargetAsk questions, discuss and interact on Twitterusing #LitmusChat

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

So, what is “mobile email”?Email + mobile.It’s about developing email for smallscreens, touch interfaces, multi-device users and considering mobileuser needs.

from to

KNOW YOURAUDIENCE[You should know more than anyone else]

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

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

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

CONSIDERCONTEXT[An extension of knowing your audience]

Context comes firstPeople check email… • In bed • At the gym • In the bathroom • While intoxicated • During exercise • To kill time

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.

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

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

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.

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

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

One column primary content, and easy to press buttons. Visual style workswell on mobile without special setup.

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

~420 pixelsSkinny single column and large, readable text create a style that translatesseamlessly across environments.

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

~740 pixels ~320 pixelsEmail width scales rather than text size, ensuring readability in anyenvironment.

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

Simple layout, selectively removing content & spacing adjustments create a@media query case study.

Specific desktop & mobile styles create a simple, readable and sustainabletemplate.

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)

DESIGNING FOR ALLENVIRONMENTS[Since you can’t predict where users open]

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

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.

Display and Support ChallengesWindows Mobile 7 blocks images, butimages off WinMo Preview WinMo offers preview text and many on WinMo imagesopportunities to download images.

Blackberry 6 supports HTML email well, but doesn’t zoom or display imagesby default.

The finger is the new mouseDesign for tappable touch targets; not text links 44 x 44px minimum

Create touch targetsButtons can be traditional text buttons or image-based touch targets that linkback to content. Text Buttons Image “Buttons”

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;”

Bigger fonts are betterToo-small navigation will be negatively affected by text scaling on iPhoneand iPad.

Bigger fonts are better600px scaled to 320px on an iPhone is roughly 50% smaller - planaccordingly!

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

Streamline, be awareSingle column layout, simple copy, touch targets, clear calls to action andminimal fluff = mobile aware.

Don’t create frictionDon’t give users a reason NOT to click by making text or other calls-to-action impossible to tap.

Get inspired by sites + appsLayouts that contain more than three columns will be difficult to use. Site: Yes Email: No

Don’t forget about context!When sending email regarding mobile apps, consider that users may bereading email on mobile, too. DO DON’T

Consider “mobile first”Simple copy + big headlines = an email that is mobile aware will also bemore usable in a desktop environment

Consider “mobile first”Featured products also serve as large, tappable buttons in a mobileenvironment.

DOES ENVIRONMENTAFFECT ACTION?[Do subscribers click while they’re mobile?]

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.

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.

I LOVE IT.TELL ME MORE![More information and valuable resources]

Resourcesstylecampaign.com/blogcampaignmonitor.com/bloglitmus.com/blogexacttarget.com/sffmobileawesomeness.comcssiphone.comandroidpatterns.commobilepatterns.commediaqueri.es

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

http://us-w1.rockmelt.com	4
http://a0.twimg.com	4
http://pinterest.com	3
http://ams.activemailservice.com	3
http://www.twylah.com	2
https://bb.csmd.edu	1
https://si0.twimg.com	1

Email + Mobile Webinar

by Litmus on Nov 15, 2011

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 18

Statistics

Email + Mobile Webinar Presentation Transcript