Never mind the "mobile web", we're designing for all-sorts. It's all just a blur of devices and screen sizes. This session explores the issues & solutions of attempting to design for everything.
13. 84% at home
80% during misc downtime
76% while queuing
69% while shopping
64% at work
62% while watching TV (other studies claim higher)
47% during commute in to work
(oh, and students: 100% during lectures)
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
14. a study by
ReadItLater
And yes, thanks, I know
w,
no
it’s now called Pocket
k
You
li ke
ap er
st ap
In h?
y ea
21. How hard could it be...?
http://www.sichel-embroidery.com/images/boxingbee.jpg
22. big screen
wired network
cpu
mouse
for desktop keyboard
we can power
expect: desk
chair
2 eyes
2 hands
your attention
23. unknown screen (small?)
lo-res / Hi-res
dodgy network
touch / pointer
for mobile one sausage finger
we can hw/sw keyboard
expect: batteries
less cpu
less memory
poor typography (improving)
sporadic attention
30. “It’s calculated that by
2015, 40%˚ of our planet’s
population will have
access to the internet. tly 3
3 %-
is h
r ren
˚ Cu
Of those, a large number
will be mobile first or
mobile only users.”
http://www.plexical.com/blog/2011/09/29/mobile-first-mobile-only/
http://www.internetworldstats.com/stats.htm
31.
32. He also proposed command line first
Hmm, I suggest API First is a
better way to say it
33. What do all these
device experiences have
in common?
content content
content content
content
conte conten
content
content
content
content content
http://www.hubspot.com/Portals/53/images/content_highlighted.jpg
39. BTW, notice that
no one is shouting
“Photoshop mockups first” :P
AKA “Nav menus & pretty things first”
Less reliance on one
photoshop’d full page mockup
44. RWD is nothing new...
Print designers have
been doing it
for years
45. Media Queries
“only screen
and (min-width: 768px)
and (max-width: 979px)”
http://filamentgroup.com/lab/
how_we_learned_to_leave_body_font_size_alone
46. Major and Minor Breakpoints
<link rel="stylesheet" href="768.css"
media="only screen
and (min-width: 768px)
ses
and (max-width: 979px)" but cau
/> Wo rks nlo ad s
dow
extra
@media (max-width: 960px) {
Fas ter ile)
nav { width: 80px } e f
on
} all in
en
(wh
48. and don’t forget there’s...
and (min-device-pixel-ratio: 2)
and (orientation: portrait)
and (monochrome)
etc.
49. 1 “virtual” CSS px = 2x2 pixels
= 4 x bigger images!
tip:
Pro
Tim e to
emb race
CSS3
ures
feat
inst ead!
http://zagg-blog.s3.amazonaws.com/community/blog/wp-content/uploads/2012/03/iphone-4-retina-display_22CAP_25552.png
50. Responsive Media
max-width: 100%;
use
IE
r o ld 00%;
Fo 1
th:
* wid
http://filamentgroup.com/lab/
responsive_images_experimenting_with_context_aware_image_sizing/
http://src.sencha.io
61. BTW forget hover
on touch devices
Besides, it’s not that great anyway...
“Hover confuses
proximity with intent”
- Luke W.
62. “mobile” has opened
our eyes to so many
other inputs...
camera NFC
(front & back) audio
bluetooth
infrared video
location/GPS
accelerometer
multitouch ambient light
gyroscope
compass and more...
64. Expectations and
perceived performance
Quick
< 100ms In control˚
˚ Bew
“to
are of
o fas t
”
Losing attention
> 1s Show spinner etc
Need more than a
>10s spinner to keep
attention!
http://www.useit.com/alertbox/response-times.html
91. “Our rapid adoption
of technology
is creating
‘generation gaps’
at an accelerating
rate...”
92. “...People 2, 3 or 4
years apart are having
completely different
experiences with
technology”
- Lee Rainie - Pew Research Center
93. and we’re just getting started...
@GeorgeAdamson
www.slideshare.net/george.adamson
Editor's Notes
Mobile UX, IxD & Front End Dev.\nBBC/Doctor Who, Intrinsic, AXA, Dyson (HMV, Waterstones, Comet)\n- Beware: Not much code. Loads of good tips though!\n
An agenda, for those that get upset when there isn&#x2019;t one\nAnd a hidden agenda...\n
\n
Show me your phone: Android, Blackberry, iPhone, Win Phone\nShow me your tablet... (&HP?)\nShow me your laptops...\nShow me your desktops...\n
\n
What&#x2019;s really gonna bake your noodle\nIf you like spoons and freaky children...\n
\n
\n
Back in 1960s when x was leaving University...\nPeople were standing around an air-con unit...\nThe concept of a desktop has stuck around too long\n
So why do we design for desktop?\n
We&#x2019;re obsessed with them!\nHead down - Walking around like zombies.\nNeed a camera in top just to see where we&#x2019;re going...\n
\n
... 1/2 of us while driving to work :P\n
\n
Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &#x201C;Cross-device&#x201D; (AKA cross-channel) - It does not matter which device we use\n
Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &#x201C;Cross-device&#x201D; (AKA cross-channel) - It does not matter which device we use\n
Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &#x201C;Cross-device&#x201D; (AKA cross-channel) - It does not matter which device we use\n
Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &#x201C;Cross-device&#x201D; (AKA cross-channel) - It does not matter which device we use\n
Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &#x201C;Cross-device&#x201D; (AKA cross-channel) - It does not matter which device we use\n
Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &#x201C;Cross-device&#x201D; (AKA cross-channel) - It does not matter which device we use\n
Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &#x201C;Cross-device&#x201D; (AKA cross-channel) - It does not matter which device we use\n
Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &#x201C;Cross-device&#x201D; (AKA cross-channel) - It does not matter which device we use\n
Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &#x201C;Cross-device&#x201D; (AKA cross-channel) - It does not matter which device we use\n
Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &#x201C;Cross-device&#x201D; (AKA cross-channel) - It does not matter which device we use\n
Desktop... Phones... Tablets...\nLook how early Americans get to work!\nOne service. &#x201C;Cross-device&#x201D; (AKA cross-channel) - It does not matter which device we use\n
&#x201C;Review your slides to make every one count!&#x201D;\n
\n
A &#x201C;hard bee&#x201D; :P\n
Well, not always 2 hands...\n
Not engaged - poor attention\n
perhaps because we&#x2019;re still approaching it the same old way\n
My favourite suggestions from clients...\n
\n
Perhaps what you mean is\n&#x201C;No one would do that in a desktop way on a mobile&#x201D;\n
\n
The CEO has a desktop Mac too, did you just target that?\n
By the way, The largest chunk of them are in Asia\n
Luke Wroblewski. Instead of desktop-first\nGreat for honing in on most important features\nBenefits the design on larger devices too\n
Get the underlying functionality working\nPlug anything into it\n
Another approach\n
\n
Content first is your new guiding strategy!\n
Content first is your new guiding strategy!\n
Content first is your new guiding strategy!\n
Content first is your new guiding strategy!\n
Content first is your new guiding strategy!\n
Another shock for the system\n
\n
Rearrange the content for the device\n
Phones, Tablets, Desktops and everything in between\nRearrange the content for the device\nPixels becoming irrelevant\n
http://bostonglobe.com\nNot dumbing down, just using what you&#x2019;ve got\n
We&#x2019;re just such drama queens we like to think this problem only affects us!\n
Pixels becoming irrelevant\n
Default is query-less mediaquery!\nUse the Cascade: Let your CSS built & augment itself.\nNow more fashionable to merge into one CSS file\n
Use width:100%; zoom:1;\nDefaults for little device + little bandwidth = Avoid large images.\nFilament Group made lovely solution but it&#x2019;s undermined by image pre-loading.\nSencha provide free api to resize on the fly after UserAgent sniffing.\n
\n
Not going to come near you\n
Tablets most often used in landscape, phones in portrait.\nWhere to put primary controls.\nTend to hold tablets with 2 hands. More of user&#x2019;s attention.\nCan reach tablet buttons top left & right. (Beware of top middle)\nPhones tend to be one hand. Often just thumb near bottom.\nBeware oversized phones: (4-5") You cannot swipe entire screen with one thumb.\n
Swipe to scroll.\nWithout visual cues we assume default direction without a thought.\nEmerging &#x201C;standards&#x201D;: Pull to refresh, More fingers for OS actions.\n
\n
Text edit box - beware of placeholder (can look like a default).\nMultiline placeholder has inconsistent support.\nLabels on top - Easier to scan but uses more vertical real estate.\nSearch - huge variations across devices. &#x201C;x&#x201D; to clear - also in textboxes?\nButton bar - to set scope or filter. Can act like radios or checkboxes.\nSelect/picker - Not easy on some devices. May truncate text.\nRange slider - Bad for detailed range but good for vague selection.\nStepper +/- Better when buttons further apart, either side of box.\nOn/off toggle - Equivalent of checkbox. Beware of toggles with unclear state.\nTel Number pad - Aside: Odd that no one notices calc numpad is other way up!\nButtons - Bigger on mobile!\nBeware buttons near hardware buttons.\nTablet buttons - Top left and right.\nPhone buttons - Bottom but beware of stacking!\nDon&#x2019;t assume users know difference between buttons and links. Why differentiate?\n
Sensible defaults.\nUse location to make assumptions and reduce input.\nEg: Instead of typing, tap stepper or slider or content etc.\n
Star-ing passwords!\nRevealing one character at a time is fashionable \nbut are you looking at the field or the keyboard?\nWhy not make it visible by default?.\nThen you can even do away with password confirmation.\n(As for email confirmation, don&#x2019;t get me started!)\n
\n
Buttons need to me bigger on touch devices!\nMinimum target size. Magic number according to Apple.\nThe smaller the target the greater the frequency of errors.\n
\n
Eg: Apps: Bump, Word Lens\n
\n
Even the style and speed of the spinner can affect expectations\n
Standard stuff. Easy win. Every server round trip is expensive!\nGoogle for more info, such as far-future expiry.\nFYI: Very large scripts can take longer to parse.\n
One file for multiple icons.\nFont icons scale and allow irregular shaped shadow etc (not just rectangle)\n
\n
Use css to produce composite instead of using image.\nWho cares if there&#x2019;s no shadow in IE6?!\n
\n
Make use of &#x201C;perceived&#x201D; load speed.\nBeware of 3rd party JS such as Facebook-like blocking page render.\nConsider &#x201C;Infinite Scroll&#x201D; instead of paging where practical.\nUse yepnope etc if you must load multiple scripts. (asynchronous)\nAJAX Include.\nPushState & PJAX.\n
AKA shim\n
AKA shim\n
App-cache if you&#x2019;re feeling brave!\n
\n
The excellent Giles Colborne has a good chat about this.\nInstagram - app only\n
What it hybrid? Eg: Phonegap\nTypically easier to build hybrid for all apps.\nPerhaps a good way to prove app concept.\nHybrid apps cannot be as whizzy as native apps,\nThen spend money on teams of native devs.\nBeware of Android app that looks like iPhone and vice versa\n\n
m-dot helps you target mobile but not very forward thinking!\nLikely to break link-sharing. RWD encourages same content on all devices.\nBeware of making web apps look too native appy.\n\n
Skeuomorph\niPad Contacts - It&#x2019;s a book but swipe page causes delete!\n
Very human - Far right.\nCute - In the middle.\nPolar Express, Michael Jackson, Dancing baby\n
Windows Mobile avoids uncanny valley\nand still employs &#x201C;physics&#x201D; for the interactions (momentum, acceleration etc)\n
Yes, even for Android!\n
Lorem ipsum is cack.\nDesign for real copy.\n
Let real users get their hands on it\n
Stop trying to control everything.\n
We talked about CSS3 shadows etc. \nUse them, along with CSS Transforms. They degrade well.\n
For those of us trapped in a CMS\n
\n
Constraints breed innovation.\nSuccessful projects will go beyond their original constraints\n
For more insites into this thinking...\n
a little something to bake your noodle...\n
\n
The generation gap!\nEg: School leavers having diff experience from school juniors.\nAnd we&#x2019;re just getting started...\n