View stunning SlideShares in full-screen with the new iOS app!Introducing SlideShare for AndroidExplore all your favorite topics in the SlideShare appGet the SlideShare app to Save for Later — even offline
View stunning SlideShares in full-screen with the new Android app!View stunning SlideShares in full-screen with the new iOS app!
Consider contextPeople check email… • In bed • At the gym • In the bathroom • While intoxicated • At their desk • To kill time
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
WHAT SHOULDI DO ABOUT IT?[My emails could use some optimizationhelp!]
Doing nothing is OK.Not 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
The “aware” approachBeing mobile aware involves email designs thatconsider the mobile experience but aren’tspecially constructed for it.• Single column primary content• Big images• Big text• Big buttons• Skinny layout
One column primary content, and easy to press buttons. Visual style workswell on mobile without special setup.
Responsive email designUsing CSS3 @media queries to detect screensize, displaying specific content or elements indifferent types of viewing environments.• Detects large vs. small screen size• Rolls back to standard version when @media isn’t supported• Hide or remove content on small screens• Not for the faint of heart: CSS ninja skills required
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• Font sizes at 600px scaled to 320px are roughly 50% smaller!• 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.
StreamlineSingle column layout; simplified content• Short, direct copy: “Twitterize”• Eliminate or hide low priority content • Links • Copy • Images• Clear and direct calls to action • Make it obvious
Got apps?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.
Lots of links create frictionDon’t give users a reason NOT to click by making text or other calls-to-action impossible to tap.
The “mobile” versionDon’t waste clicks on a less-than-optimal text version when a mobile emailoptimized website exists. mobile version web site
Mobile versioningYou can’t predict where users will open! Distinctions between environments – Android mobile and desktop iPhone Version Version – drive behavior more than distinctions between email clients. Focus on viewing environment rather than specific devices or email clients.
First impressions still count• What is recognizable, trustworthy and relevant?• Does the subscriber have a relationship with a person, or the brand?• Use language they are familiar with
SUPPORT FORMOBILE EMAIL[How do mobile devices affect display?]
Display and support challengesThere are no mobile email standards!OS Preview HTML* Images* Alt text Scale Enlarge text fontsAndroid 2.3 ✗ -- ✗Android Gmail ✗ ✗ ✗iOS 5 -- ‡Symbian ✗ ✗ ✗ ✗ ‡Windows Phone 7 ✗ ✗ ✗ ‡Blackberry 6 ✗ ✗ ✗*HTML or images enabled by default‡ inconsistent wrapping and scaling of text Blackberry HTML email is not on by default in 4.5/5. The ability to download images automatically isan option. Blackberry 6 has webkit support and displays HTML email by default, but a promptappears to download external images
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.