STYLECampaign

Mobile email

http://www.flickr.com/photos/gaffney/6168270379/

chasing context

STYLECampaign

Desktop context

http://stylecampaign.com/contextimages.html

STYLECampaign http://stylecampaign.com/contextimages.html

Mobile context

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

STYLECampaign Source: Knotice Mobile Email Opens Report, Q4 2010. 155.3 million emails

7am peak mobile email usage

11pm 2nd peak couch / bed

Mobile email opens by time of day

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

STYLECampaign

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.

STYLECampaign 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.

STYLECampaign

Nokia

BlackBerry

iPhone 3

Android

iPad

176px-768px

Kindle Fire 1024 x 600px

STYLECampaign

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

STYLECampaign Source – Litmus 2011

Top mobile email clients

STYLECampaign

Get to know usersLitmus / 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.

STYLECampaign Try mobile web analytics with mobile version

Gap desktop & mobile identical, gathering mobile web stats?

STYLECampaign Source: Pivotal Veracity, an IBM company , Jan 1st – March 22nd 2011

Mobile email usage by day

Highest usage = Sunday Highest weekday usage = Wednesday Lowest usage = Saturday

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

STYLECampaign

Preview tools Litmus

Pivotal Veracity

Return Path

PreviewMyEmail

EmailonAcid

DeviceAnywhere / perfectmobile

iBBDemo /iPhoneTester / TestiPhone/ iPhoney

Can’t beat a real device

STYLECampaign

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

STYLECampaign

Fixed vs. FluidStyle vs. accessibility?

STYLECampaign

STYLECampaign

STYLECampaign

STYLECampaign

STYLECampaign

STYLECampaign

STYLECampaign

Fluid imagesNot fluid

Fluid

STYLECampaign

IMG style="width:90%; max-width:550px; max-

height:237px"

176px320px320px1024px

Desktop

Fluid template - http://stylecampaign.com/fluid/

STYLECampaign

Max-width capped at 550px

Gmail under Firefox

STYLECampaign Hotmail under IE 6

No max-width support goes as wide as the screen

STYLECampaign

Obama 2012 campaign

mobile

desktop

STYLECampaign

“ 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

STYLECampaign

Full URL early BB

Fluid B2B mobile version

STYLECampaign 2 col fluid layout = narrow col of text on mobile

desktop

STYLECampaign

320px400px460px480px520px520px650px

How wide for fixed width?

STYLECampaign

580px wide

STYLECampaign

Default zoom Min zoom Max zoom

Android 2.2, HTC Evo 4G (480px wide res)

STYLECampaign

Hotmail via a browser Hotmail viewed natively

STYLECampaign

320px template via browser

STYLECampaign

480px wide

bg forces it wide

Pre-header container forces it zoomed out

STYLECampaign

550px wide656px wide700px wide

wide scalable

STYLECampaign “Minimizing expense of using your content should be a design goal” - BB

677K worth of images

STYLECampaign

The W3C advises mobile emails be under 20K

research into retail email image sizes

STYLECampaign

> 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)…

STYLECampaign

Fixed to FluidUsing @media to bypass max-width

STYLECampaign

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

STYLECampaign

@media = layoutfixed 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

STYLECampaign

“Mobile versions” with no viewport defined

980px

STYLECampaign

<meta name = “viewport” content = “width = 500″>

Default – 980px viewport width = device-width width = 500

STYLECampaign

400px 700px 836px

Native email on iOS – with no viewport defined

STYLECampaign

Optimize for 1st screen

320x280px or 480x142px

STYLECampaign

12%600x600px layout

530px visible on 1st screen

Optimize for 1st screen

STYLECampaign

12%530px visible on 1st screen

Navi & branding above content

mistap waiting to happen

STYLECampaign

elevate content

STYLECampaign

subject lines as primary content

STYLECampaign

No logo but from name always visible

Teaser content visible

Swipe path

Lazy fingers = easier to use with links on same line

STYLECampaign Design for newbie and lazy fingers

W pattern too much thought

STYLECampaign

STYLECampaign

WP7 Panorama view

Source: UI Design and Interaction Guide for Windows Phone 7

with bg

solid bg

STYLECampaign WP7 PSD Templates

STYLECampaign

2415px wide horizontal layout

View horizontal email

STYLECampaign

dead space

View horizontal email

scaled to height

STYLECampaign

320px device width

View horizontal email

works in browser

STYLECampaign

< footer more contenthigh footer stack

STYLECampaign

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

STYLECampaign

Design emailfor touch

STYLECampaign

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

STYLECampaign

add padding mistap or zoom?

STYLECampaign

Weather - gloves?

http://www.flickr.com/photos/istolethetv/5089765928/

STYLECampaign

pttrns.com androidpatterns.com mobile-patterns.com

Mobile design patterns

STYLECampaign www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design

UI Guidelines

iPhone Android

Windows 7

STYLECampaign

STYLECampaign

text hints

STYLECampaign

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

STYLECampaign

Over-sized

STYLECampaign Navi positioning

Ignore navi 1st screen = navi Skip to content

STYLECampaign Navi positioning

STYLECampaign different content hierarchy

STYLECampaign Performance: 109KB vs. 38KB

STYLECampaign

Can’t miss buttons

STYLECampaign

CTA button?

STYLECampaign

STYLECampaign

SHOP NOW >>

CTA graphicCTA URL

STYLECampaign

tappable sixpack

STYLECampaign

finger-sized grids

STYLECampaign

3D

STYLECampaign

Notifications

Keyword ads

focusedUI clutter

Multitasking

STYLECampaign

Simplify…

STYLECampaign

hard workfor mobile & desktop users

STYLECampaign

BIG FONTS(OR WE’LL CHANGE IT FOR YOU!)

style=”-webkit-text-size-adjust:none”

STYLECampaign broken navi’s on iPad due to auto-scaling

STYLECampaign

Edit…push the contrast

STYLECampaign Webmail on Kindle = B&W Webkit

STYLECampaign

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

STYLECampaign

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

STYLECampaign

DIStime location device browser connection

APIs / RSS

format, resolution, fps, compression

sessions

3D content

server-side “Photoshop”

openStyleCampaign’ Dynamic Image Server (DIS)

image, animated gif, video

STYLECampaign Geo-location = reactive

STYLECampaign

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

STYLECampaign

Anna Yeaman

Co-founder

www.stylecampaign.com

anna@stylecampaign.com

@stylecampaign

Thanks!