Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile email - chasing context

7,861 views

Published on

Here's some of what it covers:

Mobile context
Mobile testing tools
Fixed vs. fluid layouts
Scalable layouts
Horizontal layouts
Designing for touch
Real-time content

Published in: Design, Technology
  • Earn Up To $316/day! Easy Writing Jobs from the comfort of home! ▲▲▲ http://t.cn/AieXS62G
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi there! Get Your Professional Job-Winning Resume Here - Check our website! http://bit.ly/resumpro
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Mobile email - chasing context

  1. 1. Title Mobile email http://www.flickr.com/photos/gaffney/6168270379/ chasing context
  2. 2. Desktopgirl Desktop context http://stylecampaign.com/contextimages.html
  3. 3. Mob Cont http://stylecampaign.com/contextimages.html Mobile context
  4. 4. Bored http://twitter.com/#!/Brendeezy123/status/47895677581271040
  5. 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. 6. Alarm T http://twitter.com/#!/Brendeezy123/status/47895677581271040
  7. 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. 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. 9. Screen Size Nokia BlackBerry iPhone 3 Android iPad 176px-768px Kindle Fire 1024 x 600px
  10. 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. 11. Litmus Source – Litmus 2011 Top mobile email clients
  12. 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. 13. PercentMob Try mobile web analytics with mobile version Gap desktop & mobile identical, gathering mobile web stats?
  14. 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. 15. Temp=stats Mobile usage stats from a template that’s not mobile optimized vs. optimized 1 month later
  16. 16. Testing Preview tools Litmus Pivotal Veracity Return Path PreviewMyEmail EmailonAcid DeviceAnywhere / perfectmobile iBBDemo /iPhoneTester / TestiPhone/ iPhoney Can’t beat a real device
  17. 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. 18. Fluid Fixed vs. Fluid Style vs. accessibility?
  19. 19. Fluid1
  20. 20. Fluid2
  21. 21. Fluid3
  22. 22. Fixed1
  23. 23. Fixed2
  24. 24. Fixed3
  25. 25. Fluidimg Fluid images Not fluid Fluid
  26. 26. Fluidtemp IMG style="width:90%; max-width:550px; max-height:237px" 176px 320px 320px 1024px Desktop Fluid template - http://stylecampaign.com/fluid/
  27. 27. Max Width Max-width capped at 550px Gmail under Firefox
  28. 28. No Max Width Hotmail under IE 6 No max-width support goes as wide as the screen
  29. 29. obama Obama 2012 campaign mobile desktop
  30. 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. 31. webversion Full URL early BB Fluid B2B mobile version
  32. 32. 2 Col Fluid 2 col fluid layout = narrow col of text on mobile desktop
  33. 33. Width 320px 400px 460px 480px 520px 520px 650px How wide for fixed width?
  34. 34. 320driod 580px wide
  35. 35. 320driod2 Default zoom Min zoom Max zoom Android 2.2, HTC Evo 4G (480px wide res)
  36. 36. Web Hotmail via a browser Hotmail viewed natively
  37. 37. 320pac 320px template via browser
  38. 38. Forced wide 480px wide bg forces it wide Pre-header container forces it zoomed out
  39. 39. scalble 550px wide 656px wide 700px wide wide scalable
  40. 40. scalble2 “ Minimizing expense of using your content should be a design goal” - BB 677K worth of images
  41. 41. Wide scable layouts The W3C advises mobile emails be under 20K research into retail email image sizes
  42. 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. 43. Fixed to fluid Fixed to Fluid Using @media to bypass max-width
  44. 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. 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. 46. Dw1 “ Mobile versions” with no viewport defined 980px
  47. 47. Dw2 <meta name = “viewport” content = “width = 500″> Default – 980px viewport width = device-width width = 500
  48. 48. Dw3 400px 700px 836px Native email on iOS – with no viewport defined
  49. 49. Above Fold Optimize for 1 st screen 320x280px or 480x142px
  50. 50. First screen 12% 600x600px layout 530px visible on 1 st screen Optimize for 1 st screen
  51. 51. Elevate content 12% 530px visible on 1 st screen Navi & branding above content mistap waiting to happen
  52. 52. optimized elevate content
  53. 53. Subject lines subject lines as primary content
  54. 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. 55. deviceAny Design for newbie and lazy fingers W pattern too much thought
  56. 56. Horizontalb
  57. 57. Panorama WP7 Panorama view Source: UI Design and Interaction Guide for Windows Phone 7 with bg solid bg
  58. 58. Panorama2 WP7 PSD Templates
  59. 59. Hori1 scaling 2415px wide horizontal layout View horizontal email
  60. 60. Hori2 scaling dead space View horizontal email scaled to height
  61. 61. Hori4 scaling 320px device width  View horizontal email works in browser
  62. 62. Hori3 scaling < footer more content high footer stack
  63. 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. 64. Touch Design email for touch
  65. 65. Fingers “ The comfortable minimum size of tappable UI elements is 44 x 44 points” – p.13 iOS Human Interface Guidelines
  66. 66. edge add padding mistap or zoom?
  67. 67. Gloves Weather - gloves? http://www.flickr.com/photos/istolethetv/5089765928/
  68. 68. Patterns pttrns.com androidpatterns.com mobile-patterns.com Mobile design patterns
  69. 69. UI www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design UI Guidelines iPhone Android Windows 7
  70. 70. Navi1
  71. 71. Circle navi text hints
  72. 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. 73. Navi3 Over-sized
  74. 74. Navi4 Navi positioning Ignore navi 1 st screen = navi Skip to content
  75. 75. Gap Navi Navi positioning
  76. 76. Emphasis different content hierarchy
  77. 77. Gap filesize Performance: 109KB vs. 38KB
  78. 78. Cta Can’t miss buttons
  79. 79. Cta2 CTA button?
  80. 80. Cta3
  81. 81. Cta4 SHOP NOW >> CTA graphic CTA URL
  82. 82. sixpack tappable sixpack
  83. 83. Sixpack2 finger-sized grids
  84. 84. Tactile 3D
  85. 85. Frame Notifications Keyword ads focused UI clutter Multitasking
  86. 86. Simple Simplify…
  87. 87. editorial hard work for mobile & desktop users
  88. 88. Font BIG FONTS (OR WE’LL CHANGE IT FOR YOU!) style=”-webkit-text-size-adjust:none”
  89. 89. Scaled up broken navi’s on iPad due to auto-scaling
  90. 90. Contrast Edit… push the contrast
  91. 91. Contrast Webmail on Kindle = B&W Webkit
  92. 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. 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. 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. 95. DIS Geo-location = reactive
  96. 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. 97. Thanks Anna Yeaman Co-founder www.stylecampaign.com [email_address] @stylecampaign Thanks!

×