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.

1. designing
for mobile˚
˚AKA designing
for everything!
@GeorgeAdamson

2. • What is mobile?
• Ooh that’s a bit tricky
• Airy fairy solutions
• Tech solutions
• Touch interactions
• Touch inputs
• Performance
• Strategy

3. what is mobile?

4. is that a mobile?

5. mobile.
“it’s not the tech, it’s
the context”
at !
wh t?
ntex
co

6. “There is
no mobile”

7. Now everything
is “mobile”...
what we call
the “mobile web”
is a blip

8. That’s all very
utopian and fluffy
but what does it
mean?!
http://www.elainefitzgerald.com/utopia/MPj04009470000[1].jpg

9. You are
here
someone at PinchZoom drew this but I’ve no idea who!!
1 computer 1000s of computers
1000s of users 1 user

10. “Mobile traffic
has/might-jolly-soon˚
overtake desktop traffic”
- George Adamson, early 21st Century
˚ depending on
where you read
your stats!

11. http://pryncepality.com/2011/09/27/cell-phone-service-now-available-in-nyc-subway-stations/
http://gigaom.com/2011/09/26/couch-commerce-kicks-off-on-thanksgiving-night/
http://ak7.picdn.net/shutterstock/videos/846284/preview/stock-footage-young-business-woman-in-office-texting-on-cell-phone.jpg

12. where do we
use our devices?

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

15. http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/

16. http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/

17. http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/

18. tablets
phones
on our
on our
on our
computers
http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/

19. cross cross
device channel
http://findicons.com
http://www.portboulogne.com

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

24. “mobile” looks diffy

25. solutions

26. “Let’s dumb down
for mobile”

27. “No one would do
that on a mobile”

28. “Provide a link to
full desktop site”

29. “Let’s just
target iPhone”

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

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

34. http://www.hubspot.com/Portals/53/images/content_highlighted.jpg

36. Content
API
Mobile

37. Content first first first
API first first
Mobile first

38. Content first first first
API first first
S imples t first
Mobile
device

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

40. tech solutions

41. Responsive Web
Design RWD

42. 128x160
240x320
320x480
1024x768
1280x800
1440x900
640x960
1600x1200
2048x1536
http://www.metaltoad.com/blog/
simple-device-diagram-responsive-design-planning

43. More at http://mediaqueri.es

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

47. favour design breakpoints
over device breakpoints

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

51. Flex/Flow/Fluid
Layout (Grids)
http://960.gs
http://foundation.zurb.com
http://twitter.github.com/bootstrap
http://stuffandnonsense.co.uk/projects/320andup

52. Touch interaction

53. Tap
Phone
Tablet

54. Swipe
Tablet Phone

55. touch input

56. All credit to LukeW. This slide like totally stolen from his presentation

57. Reduce input
wherever possible
Exploit tap or touch
instead of typing

58. What is our
obsession over
****ing passwords?

59. Rethink buttons...
Interact directly with
content instead?
“Buttons are a hack” - Josh Clark

60. 44px

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

63. performance

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

65. concatenate
minify
(uglify)
gzip
YSlow

66. sprite your icons
consider font-glyphs
http://css-tricks.com/examples/IconFont/
Semantic glyphs -
http://www.codestyle.org/css/at-font-face/
StandardUnicodeIconsWebFonts.shtml

67. data-uri
your small images

68. Use those CSS3 features!
text + css + icon + grad + shadow

69. Use your HTML skills
Write great markup
for your content

70. Late render
Late load
http://filamentgroup.com/lab/ajax_includes_modular_content/
Avoid full page loads
https://github.com/defunkt/jquery-PJAX

71. Don’t fight it polyfill it.
modernizr js (+yepnope)
respond js
etc...
http://caniuse.com
http://html5please.com
https://github.com/Modernizr/Modernizr/wiki/
HTML5-Cross-Browser-Polyfills

72. “Progressive Enhancement”
Workflow
https://github.com/filamentgroup/
Southstreet
EnhanceJS - eCSSential - QuickConcat - AjaxInclude - AppendAround
etc

73. far-future expiry
cache-manifest
http://www.alistapart.com/articles/
application-cache-is-a-douchebag

74. strategy

75. Mobile app or
mobile web?
http://www.cxpartners.co.uk/cxblog/
mobile-app-or-mobile-web/

76. Mobile App:
Native or Hybrid?
PhoneGap - AppMobi - Mobify -
SenchaTouch - jQueryMobile - Zepto - etc etc

77. Mobile Web:
m. or RWD?
Beware - “Appy” web design creates
unachievable expectations of app-experience

78. Beware of metaphor eye candy

79. “Big Dog” http://www.youtube.com/watch?v=W1czBcnX1Ww
http://spectrum.ieee.org/automaton/robotics/humanoids/
040210-who-is-afraid-of-the-uncanny-valley

81. Check out
UX guidelines for
iOS
Android
Windows Mobile

82. Get real content into
early designs
Lor
ips em
um

83. Invite feedback early

84. Our mental models of
development are wrong
We assume we can
control too much

85. Unlearn:
- Pixel perfect
- Device-specific data
- Elaborate workarounds

86. CMS collateral damage
- “Template first” design
- Ads & Nav before content
- No thought for context

87. Still think a CMS cannot
do content first?

88. “Often a smaller budget
will result in a
better solution”
- James Robertson

89. Future Friendly
http://futurefriend.ly/thinking.html

90. I’ll leave you with
something to ponder...

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