SlideShare a Scribd company logo
1 of 97
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
Navi1
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?
Cta3
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!

More Related Content

What's hot

Responsive website
Responsive websiteResponsive website
Responsive website
borjanshoes
 
Brunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & Beyond
Brunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & BeyondBrunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & Beyond
Brunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & Beyond
Act-On Software
 
Multi screen-moblie-whitepaper research-studies
Multi screen-moblie-whitepaper research-studiesMulti screen-moblie-whitepaper research-studies
Multi screen-moblie-whitepaper research-studies
PaPer Li
 

What's hot (19)

Justine Jordan
Justine JordanJustine Jordan
Justine Jordan
 
West
WestWest
West
 
NEDMA14: Fat Fingers and Small Screens - Justine Jordan
NEDMA14: Fat Fingers and Small Screens - Justine JordanNEDMA14: Fat Fingers and Small Screens - Justine Jordan
NEDMA14: Fat Fingers and Small Screens - Justine Jordan
 
NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Jus...
NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Jus...NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Jus...
NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Jus...
 
Responsive HTML Email
Responsive HTML EmailResponsive HTML Email
Responsive HTML Email
 
Strategies, Tactics and Design Tips for Mobile Email Success
Strategies, Tactics and Design Tips for Mobile Email SuccessStrategies, Tactics and Design Tips for Mobile Email Success
Strategies, Tactics and Design Tips for Mobile Email Success
 
Responsive website
Responsive websiteResponsive website
Responsive website
 
Email for Mobile Devices | Stream:20 Best Practice
Email for Mobile Devices | Stream:20 Best PracticeEmail for Mobile Devices | Stream:20 Best Practice
Email for Mobile Devices | Stream:20 Best Practice
 
Filter
FilterFilter
Filter
 
Cracking the code: Keys to Email Creative Success
Cracking the code:   Keys to Email Creative SuccessCracking the code:   Keys to Email Creative Success
Cracking the code: Keys to Email Creative Success
 
Performance Optimisation For Web & Mobile
Performance Optimisation For Web & MobilePerformance Optimisation For Web & Mobile
Performance Optimisation For Web & Mobile
 
Native, Web App, or Hybrid: Which Should You Choose?
Native, Web App, or Hybrid: Which Should You Choose?Native, Web App, or Hybrid: Which Should You Choose?
Native, Web App, or Hybrid: Which Should You Choose?
 
Brunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & Beyond
Brunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & BeyondBrunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & Beyond
Brunch & Learn: Email Design Best Practices for Desktop, Mobile, Tablet & Beyond
 
Sugsa mobile ux_april 2013
Sugsa mobile ux_april 2013Sugsa mobile ux_april 2013
Sugsa mobile ux_april 2013
 
Multi screen-moblie-whitepaper research-studies
Multi screen-moblie-whitepaper research-studiesMulti screen-moblie-whitepaper research-studies
Multi screen-moblie-whitepaper research-studies
 
Deep linking at App Promotion Summit
Deep linking at App Promotion SummitDeep linking at App Promotion Summit
Deep linking at App Promotion Summit
 
Responsive email design: 3 how-to steps
Responsive email design: 3 how-to stepsResponsive email design: 3 how-to steps
Responsive email design: 3 how-to steps
 
Demystifying Mobile SEO - 2014 Search Engine Strategies Atlanta Session
Demystifying Mobile SEO - 2014 Search Engine Strategies Atlanta SessionDemystifying Mobile SEO - 2014 Search Engine Strategies Atlanta Session
Demystifying Mobile SEO - 2014 Search Engine Strategies Atlanta Session
 
Mobile Search Queries Start to Surpass Desktop: Here's What You Can Do About It
Mobile Search Queries Start to Surpass Desktop: Here's What You Can Do About It Mobile Search Queries Start to Surpass Desktop: Here's What You Can Do About It
Mobile Search Queries Start to Surpass Desktop: Here's What You Can Do About It
 

Viewers also liked

Qué cosas importantes crees que deberias aprender
Qué cosas importantes crees que deberias aprenderQué cosas importantes crees que deberias aprender
Qué cosas importantes crees que deberias aprender
eduardobarco
 
8th genericsasia2013
8th genericsasia20138th genericsasia2013
8th genericsasia2013
Rita Barry
 
Lean Revista Mais Alto MAR2016 ENG
Lean Revista Mais Alto MAR2016 ENGLean Revista Mais Alto MAR2016 ENG
Lean Revista Mais Alto MAR2016 ENG
Pedro Salvada
 
Emergência médica na prática odontológica
Emergência médica na prática odontológicaEmergência médica na prática odontológica
Emergência médica na prática odontológica
Teófilo Rêgo
 
Parasha nº 34 b´midbar en el desierto
Parasha nº  34 b´midbar en el desiertoParasha nº  34 b´midbar en el desierto
Parasha nº 34 b´midbar en el desierto
Horeb Israelita
 

Viewers also liked (19)

Qué cosas importantes crees que deberias aprender
Qué cosas importantes crees que deberias aprenderQué cosas importantes crees que deberias aprender
Qué cosas importantes crees que deberias aprender
 
8th genericsasia2013
8th genericsasia20138th genericsasia2013
8th genericsasia2013
 
Feliz navidad para todos
Feliz navidad para todosFeliz navidad para todos
Feliz navidad para todos
 
DIAGNÓSTICO TDAH
DIAGNÓSTICO TDAHDIAGNÓSTICO TDAH
DIAGNÓSTICO TDAH
 
Tintín en el congo
Tintín en el congoTintín en el congo
Tintín en el congo
 
Producto intermedio 6 pddm esquel
Producto intermedio 6 pddm esquelProducto intermedio 6 pddm esquel
Producto intermedio 6 pddm esquel
 
Hitec Brochure QPS English_LR
Hitec Brochure QPS English_LRHitec Brochure QPS English_LR
Hitec Brochure QPS English_LR
 
Nuevas herramientas para los sectores difusos. Los proyectos domésticos de re...
Nuevas herramientas para los sectores difusos. Los proyectos domésticos de re...Nuevas herramientas para los sectores difusos. Los proyectos domésticos de re...
Nuevas herramientas para los sectores difusos. Los proyectos domésticos de re...
 
Sinch: Finding your space in the global telecom API market at TADSummit by Da...
Sinch: Finding your space in the global telecom API market at TADSummit by Da...Sinch: Finding your space in the global telecom API market at TADSummit by Da...
Sinch: Finding your space in the global telecom API market at TADSummit by Da...
 
Tpn3 word
Tpn3 wordTpn3 word
Tpn3 word
 
Lean Revista Mais Alto MAR2016 ENG
Lean Revista Mais Alto MAR2016 ENGLean Revista Mais Alto MAR2016 ENG
Lean Revista Mais Alto MAR2016 ENG
 
Emergência médica na prática odontológica
Emergência médica na prática odontológicaEmergência médica na prática odontológica
Emergência médica na prática odontológica
 
Parasha nº 34 b´midbar en el desierto
Parasha nº  34 b´midbar en el desiertoParasha nº  34 b´midbar en el desierto
Parasha nº 34 b´midbar en el desierto
 
Plan de seguridad y salud
Plan de seguridad y saludPlan de seguridad y salud
Plan de seguridad y salud
 
La formación profesional en la especializacion inteligente de las regiones
La formación profesional en la especializacion inteligente de las regionesLa formación profesional en la especializacion inteligente de las regiones
La formación profesional en la especializacion inteligente de las regiones
 
Mi practica I "Vocación"
Mi practica I "Vocación"Mi practica I "Vocación"
Mi practica I "Vocación"
 
Elektronische Zustellung
Elektronische ZustellungElektronische Zustellung
Elektronische Zustellung
 
RECODIFICACION COSMICA
RECODIFICACION COSMICARECODIFICACION COSMICA
RECODIFICACION COSMICA
 
A future history of content management
A future history of content managementA future history of content management
A future history of content management
 

Similar to Mobile email - chasing context

3 Strategies For Awesome Mobile-Optimized Emails
3 Strategies For Awesome Mobile-Optimized Emails3 Strategies For Awesome Mobile-Optimized Emails
3 Strategies For Awesome Mobile-Optimized Emails
Kissmetrics on SlideShare
 

Similar to Mobile email - chasing context (20)

The Mobile Experience Through Email
The Mobile Experience Through EmailThe Mobile Experience Through Email
The Mobile Experience Through Email
 
Responsive email design guide
Responsive email design guideResponsive email design guide
Responsive email design guide
 
3 Strategies For Awesome Mobile-Optimized Emails
3 Strategies For Awesome Mobile-Optimized Emails3 Strategies For Awesome Mobile-Optimized Emails
3 Strategies For Awesome Mobile-Optimized Emails
 
Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and Code
Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and CodeDreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and Code
Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and Code
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
 
Postdesktop Usability
Postdesktop UsabilityPostdesktop Usability
Postdesktop Usability
 
Web In Extreme Environment: Beyond Cross Browsing
Web In Extreme Environment: Beyond Cross BrowsingWeb In Extreme Environment: Beyond Cross Browsing
Web In Extreme Environment: Beyond Cross Browsing
 
#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesSpeed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device Websites
 
Speed and simplicity
Speed and simplicitySpeed and simplicity
Speed and simplicity
 
Presentation1
Presentation1Presentation1
Presentation1
 
Presentation1
Presentation1Presentation1
Presentation1
 
Presentation1
Presentation1Presentation1
Presentation1
 
Email Strategy and Design for a Multiscreen World
Email Strategy and Design for a Multiscreen WorldEmail Strategy and Design for a Multiscreen World
Email Strategy and Design for a Multiscreen World
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
 
Email for mobile webinar
Email for mobile webinarEmail for mobile webinar
Email for mobile webinar
 
Email for mobile webinar slideshare
Email for mobile webinar slideshareEmail for mobile webinar slideshare
Email for mobile webinar slideshare
 
#1NLab14: Reshaping Behavior
#1NLab14: Reshaping Behavior#1NLab14: Reshaping Behavior
#1NLab14: Reshaping Behavior
 
UI and UX for Mobile Developers
UI and UX for Mobile DevelopersUI and UX for Mobile Developers
UI and UX for Mobile Developers
 

Recently uploaded

如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdfECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
Sarbjit Bahga
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
Amil baba
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
thubko
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
Amil baba
 
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
ykucop
 
Evaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxEvaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptx
joshuaclack73
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
yzeoq
 
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
Amil baba
 
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 

Recently uploaded (20)

如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
 
Cascading Style Sheet(CSS) PDF Notes by Apna College
Cascading Style Sheet(CSS) PDF Notes by Apna CollegeCascading Style Sheet(CSS) PDF Notes by Apna College
Cascading Style Sheet(CSS) PDF Notes by Apna College
 
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
 
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdfECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
ECHOES OF GENIUS - A Tribute to Nari Gandhi's Architectural Legacy. .pdf
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
 
Design Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistDesign Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM Specialist
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
 
iF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeiF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythree
 
Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678
 
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
 
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
在线购买田纳西大学毕业证(utk毕业证)硕士学历证书留信网认证原版一模一样
 
Morgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity DesignMorgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity Design
 
Evaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxEvaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptx
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic design
 
And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)
 
Latest Trends in Home and Building Design
Latest Trends in Home and Building DesignLatest Trends in Home and Building Design
Latest Trends in Home and Building Design
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
 
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
 
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
 

Mobile email - chasing context

Editor's Notes

  1. Shift in user context from the desktop to the mobile environment. Try to find out when and where users are most likely to access our content.
  2. Desktop environment - sat in front of a large screen, mouse, keyboard, fewer distractions and a reliable connection. Though we’ve oversimplified the desktop context. Varies from workplace to workplace. Software surveillance and internet filters to deter browsing, slow/old PCs, noise, light, co-workers, working from home more flexible. Even so its more predictable than the mobile context.
  3. Mobile users just as likely to be in a noisy bar, drunk, checking email whilst chatting. Input is via fingers and thumbs, often one-handed. Mobile access not always on-the-go, more varied. J ust recently I was delayed in an airport lounge for 2hrs, spent most of that time reading blog posts on my ipod.
  4. Sometimes were just bored … Making assumptions about the amount of time someone has to spare or the content they’re searching for based on device, is tricky. Content also needs to be determined by other factors like location. Once you leave the home, environmental distractions demand more of our attention. It doesn’t rain in my apartment, and I can’t get run over (or run someone over) doesn’t require the same level of vigilance. There can be greater consequences to being absorbed in our phones outside. How the heck do we begin to narrow it down if mobile is everywhere?
  5. Peak usage is at 7am.
  6. Checking mobile email in bed.
  7. 65% of American adults sleep with their phones.
  8. Alarm clock emails - blurry eyes, lack of physical co-ordination, phone flips orientation when lying on your side and time constraints. The two touch targets in app as far apart as the screen will allow, to avoid mistaps when half asleep.
  9.   H uge variety of screen sizes, platforms and browsers all with varying capabilities, from plain text up to HTML5.   Prioritize the devices your core users are on.
  10. Android is nuts…
  11. 73% mobile email being read on an iPhone. Image blocking on Android &amp; BB = numbers will be understated.
  12. Mobile usage tools.
  13. Percentmobile screenshot and Gap mobile version, with identical content to the desktop. Collecting more in-depth stats using mobile web analytics?
  14. Sunday = highest mobile email usage. What’s with Sat?
  15. If your template sucks you’re mobile usage no&apos;s will be low.
  16. Preview tools…   S hifted a lot of my own testing to real devices. Speed and ease with which users interact with creative is an important design consideration. DeviceAnywhere = awkward keyboard and mouse maneuvers to mimic gestures + u sing devices in everyday life, helps identify usage patterns and design nuances.
  17. summary…
  18. Fixed versus fluid
  19. Fluid emails adapt their layout to different device widths.
  20. As the browser widens and narrows, the layout adjusts, filling the available horizontal space.
  21. Container width in %.
  22. Fixed…
  23. If you set the width to be 400 wide it’s always 400…
  24. Container width is defined in pixels.
  25. Fixed-width image in a fluid layout can cause problems.  
  26. Fluid layout + fluid img are awesome, build once and forgot about them for 2yrs… If you send a large image to the iPhone, mobile browser will have to resize it down. Serve an appropriately sized image to each device, shifting the burden from the mobile browser server-side. Can use responsive images, dynamic images, context-aware img, real-time content all same whatever you call it …
  27. Minimum / maximum width. This templates max-width is 550px.
  28. Wide screen monitor the lines of text can become hard to read and the image expands well beyond its actual size. No max-width support in Outlook07 and IE6, which means there’s no way to cap how wide the layout will go.
  29. Fluid layouts still being used without max-width
  30. Lend themselves to rich text layouts
  31. No reason not to use a fluid layout with a separate mobile version, users will be on a small screen.
  32. One column fluid layouts, lines of text can become too narrow.
  33. How wide?
  34. Android users…  
  35. Android doesn’t scale content to fit the screen like iPhone + Min/max zooms are limited.
  36. Email viewed via the browser, only see a portion of the creative.
  37. 320px fits perfectly, though one downside is the white space on desktop.   If 320px is too skinny try a layout between 480px-520px.
  38. iPhone scales to the widest container.
  39. Keep traditional desktop widths, but increase size of the content, so still legible when scaled down.
  40. Wider the layout, the bigger everything will need to be. Can strain eyes on the desktop. Sending large desktop assets to mobile users is not cool.
  41. 50 retail emails, 258K average weight of the images.
  42. Mac email 3 slides back is great example. 700px wide, image-based only 30K. All text in a handful of solid colors.
  43. Bypass max-width using media queries
  44. Media queries allow you to serve up different CSS depending on the screen properties of a device, such as width or orientation. Fixed to a fluid layout on the iPhone: if the width is below 480px then switch the container from x no. of pixels wide to 100%. In this email (1 of 3 in a welcome series) hiding the hero image, logo , recovery footer, increasing font sizes, contrast and line-height. In email 2 replacing desktop images with mobile images. See and play with the three emails yourself here: http://stylecampaign.com/blog/?p=119 When you do hide or sometimes swap desktop assets using media queries, they’re still downloaded by the mobile browser, just not visible. Consider performance.
  45. Media queries allow us to edit the layout, not the content. We can’t edit HTML after send just CSS. Support is spotty…just saying.
  46. Any template viewed on the web less than 980px wide, will appear zoomed out. To correct this you need to define the viewport.
  47. How mobile version looks by default, with the viewport set to equal device-width (use with fluid layouts) and viewport set to the width of your template.
  48. It’s not necessary to define the viewport for email that’s viewed natively, only if you have a separate mobile version. Though I sometimes include it anyway, in case someone shares my newsletter on say Twitter and its then viewed on a mobile on the web…
  49. 280px magic no., though might be 285px 
  50. First screen on iPhone chart.
  51. Hard to balance the navigation, branding and content when you’ve only got 280px to spare.
  52. Elevate the content users care about. Long subject lines take up space on the first screen.
  53. Subject line as primary content.
  54. My horizontal layout. From names always visible when you scroll back and forth, acts as a stand-in logo. All the content sits above the fold on the desktop. All the URLs on the same line. See: http://stylecampaign.com/blog/?p=109
  55. Earlier version urls in a w pattern. Annoying to move my finger up and down, as we scroll so fast. New to touch screens, nervous to swipe over links. Design for newbie and lazy fingers.
  56. Each section is 320px wide, all elements are in the right position and size for touch.
  57. A core part of WP7 is the horizontal scrolling, Panorama view.
  58. two-way scrolling
  59. Horizontal layouts on mobile…
  60. If scaled to the width of the iPhone, small strip along the top and dead space underneath. Scales to the height instead.
  61. Can’t define the viewport to help you out.
  62. Because it scales to the height rather than the width, use few lines of footer text. Otherwise will appear zoomed out.
  63. Takeaways
  64. HIG minimum target area of 44 x 44 points.   WP7 34x34 pixels with at least 8 pixels between touchable controls.
  65. They recommend that you go larger if the touch target is close to the edge of the screen as you risk accidentally hitting other controls. Ideally leave some padding above the toolbar, as it’s an area susceptible to mistaps. Another common problem are stacks of links with little vertical spacing. Users are forced to either mistap or zoom. Your footers, tables of content and pre-headers will likely all need to be reworked paying particular attention to the mobile version link if you&apos;re still using one.
  66. Make your touch targets as big as you can get away with.
  67. Resources
  68. Each platforms UI guidelines. WP7 has a very different look and feel from iOS. In their guidelines – “Try and be flat, not glossy. Do not apply lens flares”.
  69. When reworking email navigation for touch, can use the iPhone tab bar as a guide. 49px high, with a five-button limit (Blackberry also advises 5 max). Positioned at the bottom of the screen, where your thumb rests. Primary controls go left, making them easy to reach with your thumb if you’re right-handed. Less popular links, go right, as it’s awkward to bend your thumb back.
  70. Right justifying unsubscribe link, out of harms way + “text hints” with icons no reduce confusion.
  71. Gap increased the font size and spacing while reducing the no. of tabs.
  72. Slightly overwhelms on the desktop (though kudos to them for trying something new and it may be working well for them).
  73. Navi is a bottleneck. Scale it up like Gap, ignore it like Neiman Marcus, hide it or reformat it into a list view using @media. Want to avoid ending up with a big stack of navigation on first screen. Techstars added a “Skip to content” jump tag right up top.
  74. Switching from a traditional navi into a list view that’s positioned below the content rather than above. Designing for touch, doesn’t just mean making things bigger, but reevaluating the placement of each element. 
  75. Compare email on the left with Gaps mobile site on the right. Same creative / different treatment. Navi positioned differently. Store locator increased prominence on the mobile site.   Mobile users may benefit from a different content hierarchy or occasionally different content altogether.
  76. Image used in the email is 109k compared to 38k on the mobile site to account for lower bandwidths.
  77. All these buttons are 44px high, positioned were the thumb rests and expand across the width of the page.   Doesn’t matter if your holding the phone in your left or right hand. right-handed users switch their phone to the left when eating lunch then switch back again when they’re done.
  78.   Compare mobile call-to-actions with tiny touch targets in these emails.
  79. 600-800 pixel wide template, you’ll need to make jumbo sized buttons in order for them to be 44px high when scaled down. The ones above only ended up around 25px high…
  80. Expand URL so it covers a larger area than the graphic implies.
  81. No hover state difficult to know whether an element is linked. 44pixel high buttons take up a lot of room that could be devoted to content. Product grids, convert really well to finger-sized targets. Best examples use drop shadows to create a 3D effect.
  82. Mobile apps use grids as navigation to make the most of the limited space.
  83. HIG, “buttons, pickers and sliders should have contours and gradients that invite touches.” + replicate the look of high-quality materials. Such as Wood, leather or metal…. Swirl, Gilt Taste and Joss &amp; Main all adding corner effects.
  84. Rue La La - 22% sales are coming from mobile. “Our ipad sales are through the roof… with 50 percent of mobile sales going through the tablet”. While there may be fewer environmental distractions, desktop email is packed with interface clutter and we are often multitasking. iPad isolates email creative, can focus whilst relaxing on the sofa.
  85. Even though mobile email is more likely to be in bed than on the go, simplified layouts are a safer bet. Designing for tired users with little time to spare.
  86. Smaller screen sizes mean you can view fewer products at a time, compared with the desktop which can accommodate more detailed imagery. Dense, editorial layouts don’t translate well. Desktop users have always spent just seconds scanning emails, so editing down copy and reducing the cognitive load benefits either environment.
  87. WP7 no smaller than 15 points. Apple 17 - 22 pixel font. I’ve found 14px to be the absolute minimum. If using a small font, the iPhone automatically scales it up to 13px. Add this line of code.
  88. Make your fonts bigger.
  89. Poor contrast is heightened on tiny screens.
  90. Worth doing a grayscale check.
  91. Touchy section summed up… also check out this post: http://stylecampaign.com/blog/?p=113
  92. So what ’ s next? Screen size is just one indicator, there ’ s other information we can gather on open. Help us get a handle on context and deliver a better user experience. Yahoo project, “ Clean slate ” - “Imagining what the search experience on a tablet is all about. If your doing a search for SF giants were assuming that your in front of the TV watching the game right now. So you probably want the innings that you ’ ve missed, some stats, how ’ s your fantasy rotisserie doing. These aren ’ t links but modules with content in them that are meant to augment your viewing experience.”
  93. Diagram shows how we adapt content server-side (via DIS). Every time a user opens an email, content is assembled not only based on device but where they are, the time of day and whichever API were integrated with. (weather feed, Twitter or goggle maps ect can be hooked up to anything even a 3D engine). Sessions - most of what   has been   done to date I ’ d term as reactive e.g. someone changes location and email content updates.
  94. Like our geo located Xmas game... Sessions = interactive. One of the things they allow us to do, is track how many times each individual user has opened an email and respond in real-time. Game logic + server-side Photoshop, starts to get interesting…
  95. Boils down to creative control at the time of open. Determined by a broad list of variables, beyond screen size. Ability to generate real-time content based on location, device capabilities, time of day and even user engagement should become standard. Irrelevant whether its via dynamic images or some other solution. By itself, just knowing a users screen size doesn ’ t give us enough to work with. --- http://stylecampaign.com/blog/?p=101 video showing real-time streaming content into email…
  96. Cheers everyone!