Mobile email - chasing context

Title Mobile email http://www.flickr.com/photos/gaffney/6168270379/ chasing context

Desktopgirl Desktop context http://stylecampaign.com/contextimages.html

Mob Cont http://stylecampaign.com/contextimages.html Mobile context

Bored http://twitter.com/#!/Brendeezy123/status/47895677581271040

Time of Day Source: Knotice Mobile Email Opens Report, Q4 2010. 155.3 million emails 7am peak mobile email usage 11pm 2 nd peak couch / bed Mobile email opens by time of day

Alarm T http://twitter.com/#!/Brendeezy123/status/47895677581271040

Alarm2 Who sleeps with their phone? Source: Pew Research Center’s Internet & American Life Project, April 29-May 30, 2010 65% of American adults have slept with their phones on or near their bed. The no. rises to over 90% among ages 18-29.

Alarm3 Alarm clock iPhone app by iHandySoft Inc. Alarm clock emails Child-proof design for blurry eyed adults: . Targets you can hit swiping at the screen half asleep (left or right handed). . Both targets as far apart as the screen will allow to avoid a mistap. . No need to zoom or scroll with a body lacking co-ordination upon waking . Works in either orientation (important when lying down as tends to flip) . “Just enough” content, high contrast for low light & easy to take in at a glance.

Screen Size Nokia BlackBerry iPhone 3 Android iPad 176px-768px Kindle Fire 1024 x 600px

Android Android OS - The first 100 devices 240 x 320px 320 x 480px 480 x 800px 480 x 854px Different resolutions on Android Android OS usage stats Jan 2011 Source: Percent Mobile & Android Developers Blog

Litmus Source – Litmus 2011 Top mobile email clients

User Stats Get to know users Litmus / Pivotal Veracity/ Return Path (email analytics) PercentMobile / admob / Bango (mobile web analytics) Ask via survey or during sign up % who click link to mobile version Track mobile opt-ins Website stats – e.g. Google Look at the demographics of each platform e.g. 73% of Android users are male vs. 57% of iPhone users.

PercentMob Try mobile web analytics with mobile version Gap desktop & mobile identical, gathering mobile web stats?

By Day Source: Pivotal Veracity, an IBM company , Jan 1 st – March 22 nd 2011 Mobile email usage by day Highest usage = Sunday Highest weekday usage = Wednesday Lowest usage = Saturday

Temp=stats Mobile usage stats from a template that’s not mobile optimized vs. optimized 1 month later

Testing Preview tools Litmus Pivotal Veracity Return Path PreviewMyEmail EmailonAcid DeviceAnywhere / perfectmobile iBBDemo /iPhoneTester / TestiPhone/ iPhoney Can’t beat a real device

Summed up Summed up Mobile context precedes design but hard to nail Helps to use target devices in same context as users If in doubt: design for “at a glance” & partial attention Get to know your users via multiple sources Android & BlackBerry stats are understated Peak mobile email usage is 7am Sunday then Wednesday peak days of the week Test on a real device

Fluid Fixed vs. Fluid Style vs. accessibility?

Fluid1

Fluid2

Fluid3

Fixed1

Fixed2

Fixed3

Fluidimg Fluid images Not fluid Fluid

Fluidtemp IMG style="width:90%; max-width:550px; max-height:237px" 176px 320px 320px 1024px Desktop Fluid template - http://stylecampaign.com/fluid/

Max Width Max-width capped at 550px Gmail under Firefox

No Max Width Hotmail under IE 6 No max-width support goes as wide as the screen

obama Obama 2012 campaign mobile desktop

Experience “ I just wanted a way for the text of the newsletter to be readable on smartphones without people having to zoom in. As far as I know, readers are happy with it! ” - Mark Hurst

webversion Full URL early BB Fluid B2B mobile version

2 Col Fluid 2 col fluid layout = narrow col of text on mobile desktop

Width 320px 400px 460px 480px 520px 520px 650px How wide for fixed width?

320driod 580px wide

320driod2 Default zoom Min zoom Max zoom Android 2.2, HTC Evo 4G (480px wide res)

Web Hotmail via a browser Hotmail viewed natively

320pac 320px template via browser

Forced wide 480px wide bg forces it wide Pre-header container forces it zoomed out

scalble 550px wide 656px wide 700px wide wide scalable

scalble2 “ Minimizing expense of using your content should be a design goal” - BB 677K worth of images

Wide scable layouts The W3C advises mobile emails be under 20K research into retail email image sizes

performace > performance Serve appropriately sized mobile images Use CSS3 for buttons, gradients ect. Use less white to preserve LED battery life – WP7 Use solid colors instead of gradients in images Go metro – typography as a design element If hiding content via @media, ask do you need it at all? Don’t be sloppy with animated Gifs Adapt FPS and resolution to connection speed Embrace coded pixel art (ok that’s just me)…

Fixed to fluid Fixed to Fluid Using @media to bypass max-width

Savvy1 mobile = 100% desktop = 640px Redesign = 3x lift in click-to-open rate 12% of those who opened email on mobile clicked / 6% of those who opened on non-mobile clicked

@media @media = layout fixed to fluid container two column to one column 600px - 300px fixed change font properties line-height hide images or containers swap images change alignment rework navigation

Dw1 “ Mobile versions” with no viewport defined 980px

Dw2 <meta name = “viewport” content = “width = 500″> Default – 980px viewport width = device-width width = 500

Dw3 400px 700px 836px Native email on iOS – with no viewport defined

Above Fold Optimize for 1 st screen 320x280px or 480x142px

First screen 12% 600x600px layout 530px visible on 1 st screen Optimize for 1 st screen

Elevate content 12% 530px visible on 1 st screen Navi & branding above content mistap waiting to happen

optimized elevate content

Subject lines subject lines as primary content

Horizontal No logo but from name always visible Teaser content visible Swipe path Lazy fingers = easier to use with links on same line

deviceAny Design for newbie and lazy fingers W pattern too much thought

Horizontalb

Panorama WP7 Panorama view Source: UI Design and Interaction Guide for Windows Phone 7 with bg solid bg

Panorama2 WP7 PSD Templates

Hori1 scaling 2415px wide horizontal layout View horizontal email

Hori2 scaling dead space View horizontal email scaled to height

Hori4 scaling 320px device width  View horizontal email works in browser

Hori3 scaling < footer more content high footer stack

Summed up Summed up Define viewport to avoid zoomed out creative on web Fluid layouts thumb their noses at new devices 320px width for Android / webmail via browser If too skinny go to 480px-520px Do what you can to increase performance Use @media to transition from fixed to fluid Optimize the first screen Reduce footer text with horizontal layouts Design for newbie & lazy fingers

Touch Design email for touch

Fingers “ The comfortable minimum size of tappable UI elements is 44 x 44 points” – p.13 iOS Human Interface Guidelines

edge add padding mistap or zoom?

Gloves Weather - gloves? http://www.flickr.com/photos/istolethetv/5089765928/

Patterns pttrns.com androidpatterns.com mobile-patterns.com Mobile design patterns

UI www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design UI Guidelines iPhone Android Windows 7

Circle navi text hints

Navi2 6 tabs with small text and little horizontal spacing 4 tabs, > spacing but text is still hard to read 5 finger-sized links which are easy to read Gap redesigns navigation for touch

Navi3 Over-sized

Navi4 Navi positioning Ignore navi 1 st screen = navi Skip to content

Gap Navi Navi positioning

Emphasis different content hierarchy

Gap filesize Performance: 109KB vs. 38KB

Cta Can’t miss buttons

Cta2 CTA button?

Cta4 SHOP NOW >> CTA graphic CTA URL

sixpack tappable sixpack

Sixpack2 finger-sized grids

Tactile 3D

Frame Notifications Keyword ads focused UI clutter Multitasking

Simple Simplify…

editorial hard work for mobile & desktop users

Font BIG FONTS (OR WE’LL CHANGE IT FOR YOU!) style=”-webkit-text-size-adjust:none”

Scaled up broken navi’s on iPad due to auto-scaling

Contrast Edit… push the contrast

Contrast Webmail on Kindle = B&W Webkit

Summed up Summed up Check out UI guidelines and mobile patterns Rethink your layout for ergonomics Navi is a bottleneck but there are solutions Increase the size of your CTA’s Big fonts – Apple recommends 17-22px Finger-sized product grids in place of buttons 3D = tactile and tappable Do a grayscale test

What’s next? What’s next? “ In two years or so we are planning for a shift, where we will segment not by device anymore but by behavioral context . Is it at home, is it on the go…” Paul Gelb of Razorfish at Mobile Insider Summit

DIS DIS time location device browser connection APIs / RSS format, resolution, fps, compression sessions 3D content server-side “Photoshop” open StyleCampaign’ Dynamic Image Server (DIS) image, animated gif, video

DIS Geo-location = reactive

DIS2 Lord of the rings video 3D character live video textured onto polygon dynamic text Logo overlays video frame File format, FPS, compression & resolution vary depending on the connection speed or device. Source: StyleCampaign’ DIS video live video mashup

Thanks Anna Yeaman Co-founder www.stylecampaign.com [email_address] @stylecampaign Thanks!

http://stylecampaign.com	3368
http://www.emaildesignreview.com	639
http://www.pop64.de	131
http://feeds.feedburner.com	96
http://crmgeekteam.wordpress.com	63
http://news.damndigitalstudio.com	36
http://feeds2.feedburner.com	6
http://translate.googleusercontent.com	2
http://www.newsblur.com	2
http://webcache.googleusercontent.com	2

Mobile email - chasing context

by Anna Yeaman

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 4,345

Statistics