Mobile email - chasing context
-
Upload
anna-yeaman -
Category
Design
-
view
112 -
download
0
description
Transcript of Mobile email - chasing context
![Page 1: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/1.jpg)
STYLECampaign
Mobile email
http://www.flickr.com/photos/gaffney/6168270379/
chasing context
![Page 2: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/2.jpg)
STYLECampaign
Desktop context
http://stylecampaign.com/contextimages.html
![Page 3: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/3.jpg)
STYLECampaign http://stylecampaign.com/contextimages.html
Mobile context
![Page 4: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/4.jpg)
STYLECampaign http://twitter.com/#!/Brendeezy123/status/47895677581271040
![Page 5: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/5.jpg)
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
![Page 6: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/6.jpg)
STYLECampaign http://twitter.com/#!/Brendeezy123/status/47895677581271040
![Page 7: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/7.jpg)
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.
![Page 8: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/8.jpg)
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.
![Page 9: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/9.jpg)
STYLECampaign
Nokia
BlackBerry
iPhone 3
Android
iPad
176px-768px
Kindle Fire 1024 x 600px
![Page 10: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/10.jpg)
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
![Page 11: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/11.jpg)
STYLECampaign Source – Litmus 2011
Top mobile email clients
![Page 12: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/12.jpg)
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.
![Page 13: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/13.jpg)
STYLECampaign Try mobile web analytics with mobile version
Gap desktop & mobile identical, gathering mobile web stats?
![Page 14: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/14.jpg)
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
![Page 15: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/15.jpg)
STYLECampaign Mobile usage stats from a template that’s not mobile optimized vs. optimized 1 month later
![Page 16: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/16.jpg)
STYLECampaign
Preview tools Litmus
Pivotal Veracity
Return Path
PreviewMyEmail
EmailonAcid
DeviceAnywhere / perfectmobile
iBBDemo /iPhoneTester / TestiPhone/ iPhoney
Can’t beat a real device
![Page 17: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/17.jpg)
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
![Page 18: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/18.jpg)
STYLECampaign
Fixed vs. FluidStyle vs. accessibility?
![Page 19: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/19.jpg)
STYLECampaign
![Page 20: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/20.jpg)
STYLECampaign
![Page 21: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/21.jpg)
STYLECampaign
![Page 22: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/22.jpg)
STYLECampaign
![Page 23: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/23.jpg)
STYLECampaign
![Page 24: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/24.jpg)
STYLECampaign
![Page 25: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/25.jpg)
STYLECampaign
Fluid imagesNot fluid
Fluid
![Page 26: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/26.jpg)
STYLECampaign
IMG style="width:90%; max-width:550px; max-
height:237px"
176px320px320px1024px
Desktop
Fluid template - http://stylecampaign.com/fluid/
![Page 27: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/27.jpg)
STYLECampaign
Max-width capped at 550px
Gmail under Firefox
![Page 28: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/28.jpg)
STYLECampaign Hotmail under IE 6
No max-width support goes as wide as the screen
![Page 29: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/29.jpg)
STYLECampaign
Obama 2012 campaign
mobile
desktop
![Page 30: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/30.jpg)
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
![Page 31: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/31.jpg)
STYLECampaign
Full URL early BB
Fluid B2B mobile version
![Page 32: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/32.jpg)
STYLECampaign 2 col fluid layout = narrow col of text on mobile
desktop
![Page 33: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/33.jpg)
STYLECampaign
320px400px460px480px520px520px650px
How wide for fixed width?
![Page 34: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/34.jpg)
STYLECampaign
580px wide
![Page 35: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/35.jpg)
STYLECampaign
Default zoom Min zoom Max zoom
Android 2.2, HTC Evo 4G (480px wide res)
![Page 36: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/36.jpg)
STYLECampaign
Hotmail via a browser Hotmail viewed natively
![Page 37: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/37.jpg)
STYLECampaign
320px template via browser
![Page 38: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/38.jpg)
STYLECampaign
480px wide
bg forces it wide
Pre-header container forces it zoomed out
![Page 39: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/39.jpg)
STYLECampaign
550px wide656px wide700px wide
wide scalable
![Page 40: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/40.jpg)
STYLECampaign “Minimizing expense of using your content should be a design goal” - BB
677K worth of images
![Page 41: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/41.jpg)
STYLECampaign
The W3C advises mobile emails be under 20K
research into retail email image sizes
![Page 42: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/42.jpg)
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)…
![Page 43: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/43.jpg)
STYLECampaign
Fixed to FluidUsing @media to bypass max-width
![Page 44: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/44.jpg)
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
![Page 45: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/45.jpg)
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
![Page 46: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/46.jpg)
STYLECampaign
“Mobile versions” with no viewport defined
980px
![Page 47: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/47.jpg)
STYLECampaign
<meta name = “viewport” content = “width = 500″>
Default – 980px viewport width = device-width width = 500
![Page 48: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/48.jpg)
STYLECampaign
400px 700px 836px
Native email on iOS – with no viewport defined
![Page 49: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/49.jpg)
STYLECampaign
Optimize for 1st screen
320x280px or 480x142px
![Page 50: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/50.jpg)
STYLECampaign
12%600x600px layout
530px visible on 1st screen
Optimize for 1st screen
![Page 51: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/51.jpg)
STYLECampaign
12%530px visible on 1st screen
Navi & branding above content
mistap waiting to happen
![Page 52: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/52.jpg)
STYLECampaign
elevate content
![Page 53: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/53.jpg)
STYLECampaign
subject lines as primary content
![Page 54: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/54.jpg)
STYLECampaign
No logo but from name always visible
Teaser content visible
Swipe path
Lazy fingers = easier to use with links on same line
![Page 55: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/55.jpg)
STYLECampaign Design for newbie and lazy fingers
W pattern too much thought
![Page 56: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/56.jpg)
STYLECampaign
![Page 57: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/57.jpg)
STYLECampaign
WP7 Panorama view
Source: UI Design and Interaction Guide for Windows Phone 7
with bg
solid bg
![Page 58: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/58.jpg)
STYLECampaign WP7 PSD Templates
![Page 59: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/59.jpg)
STYLECampaign
2415px wide horizontal layout
View horizontal email
![Page 60: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/60.jpg)
STYLECampaign
dead space
View horizontal email
scaled to height
![Page 61: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/61.jpg)
STYLECampaign
320px device width
View horizontal email
works in browser
![Page 62: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/62.jpg)
STYLECampaign
< footer more contenthigh footer stack
![Page 63: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/63.jpg)
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
![Page 64: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/64.jpg)
STYLECampaign
Design emailfor touch
![Page 65: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/65.jpg)
STYLECampaign
“The comfortable minimum size of tappable UI elements is 44 x 44 points” – p.13 iOS Human Interface Guidelines
![Page 66: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/66.jpg)
STYLECampaign
add padding mistap or zoom?
![Page 67: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/67.jpg)
STYLECampaign
Weather - gloves?
http://www.flickr.com/photos/istolethetv/5089765928/
![Page 68: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/68.jpg)
STYLECampaign
pttrns.com androidpatterns.com mobile-patterns.com
Mobile design patterns
![Page 69: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/69.jpg)
STYLECampaign www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design
UI Guidelines
iPhone Android
Windows 7
![Page 70: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/70.jpg)
STYLECampaign
![Page 71: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/71.jpg)
STYLECampaign
text hints
![Page 72: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/72.jpg)
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
![Page 73: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/73.jpg)
STYLECampaign
Over-sized
![Page 74: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/74.jpg)
STYLECampaign Navi positioning
Ignore navi 1st screen = navi Skip to content
![Page 75: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/75.jpg)
STYLECampaign Navi positioning
![Page 76: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/76.jpg)
STYLECampaign different content hierarchy
![Page 77: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/77.jpg)
STYLECampaign Performance: 109KB vs. 38KB
![Page 78: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/78.jpg)
STYLECampaign
Can’t miss buttons
![Page 79: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/79.jpg)
STYLECampaign
CTA button?
![Page 80: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/80.jpg)
STYLECampaign
![Page 81: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/81.jpg)
STYLECampaign
SHOP NOW >>
CTA graphicCTA URL
![Page 82: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/82.jpg)
STYLECampaign
tappable sixpack
![Page 83: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/83.jpg)
STYLECampaign
finger-sized grids
![Page 84: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/84.jpg)
STYLECampaign
3D
![Page 85: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/85.jpg)
STYLECampaign
Notifications
Keyword ads
focusedUI clutter
Multitasking
![Page 86: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/86.jpg)
STYLECampaign
Simplify…
![Page 87: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/87.jpg)
STYLECampaign
hard workfor mobile & desktop users
![Page 88: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/88.jpg)
STYLECampaign
BIG FONTS(OR WE’LL CHANGE IT FOR YOU!)
style=”-webkit-text-size-adjust:none”
![Page 89: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/89.jpg)
STYLECampaign broken navi’s on iPad due to auto-scaling
![Page 90: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/90.jpg)
STYLECampaign
Edit…push the contrast
![Page 91: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/91.jpg)
STYLECampaign Webmail on Kindle = B&W Webkit
![Page 92: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/92.jpg)
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
![Page 93: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/93.jpg)
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
![Page 94: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/94.jpg)
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
![Page 95: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/95.jpg)
STYLECampaign Geo-location = reactive
![Page 96: Mobile email - chasing context](https://reader038.fdocuments.in/reader038/viewer/2022102716/54c814a94a7959f55d8b4666/html5/thumbnails/96.jpg)
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