Download - Mobile email - chasing context
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