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

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

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

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

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

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

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

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

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

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

11.
Litmus Source – Litmus 2011 Top mobile email clients

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

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

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

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

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

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

18.
Fluid Fixed vs. Fluid Style vs. accessibility?

19.
Fluid1

20.
Fluid2

21.
Fluid3

22.
Fixed1

23.
Fixed2

24.
Fixed3

25.
Fluidimg Fluid images Not fluid Fluid

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

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

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

29.
obama Obama 2012 campaign mobile desktop

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

31.
webversion Full URL early BB Fluid B2B mobile version

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

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

34.
320driod 580px wide

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

36.
Web Hotmail via a browser Hotmail viewed natively

37.
320pac 320px template via browser

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

39.
scalble 550px wide 656px wide 700px wide wide scalable

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

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

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

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

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

45.
@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

46.
Dw1 “ Mobile versions” with no viewport defined 980px

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

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

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

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

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

52.
optimized elevate content

53.
Subject lines subject lines as primary content

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

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

56.
Horizontalb

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

58.
Panorama2 WP7 PSD Templates

59.
Hori1 scaling 2415px wide horizontal layout View horizontal email

60.
Hori2 scaling dead space View horizontal email scaled to height

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

62.
Hori3 scaling < footer more content high footer stack

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

64.
Touch Design email for touch

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

66.
edge add padding mistap or zoom?

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

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

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

70.
Navi1

71.
Circle navi text hints

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

73.
Navi3 Over-sized

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

75.
Gap Navi Navi positioning

76.
Emphasis different content hierarchy

77.
Gap filesize Performance: 109KB vs. 38KB

78.
Cta Can’t miss buttons

79.
Cta2 CTA button?

80.
Cta3

81.
Cta4 SHOP NOW >> CTA graphic CTA URL

82.
sixpack tappable sixpack

83.
Sixpack2 finger-sized grids

84.
Tactile 3D

85.
Frame Notifications Keyword ads focused UI clutter Multitasking

86.
Simple Simplify…

87.
editorial hard work for mobile & desktop users

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

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

90.
Contrast Edit… push the contrast

91.
Contrast Webmail on Kindle = B&W Webkit

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

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

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

95.
DIS Geo-location = reactive

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

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