During 2010, I was tapped to create the first mobile web experience for five different sister organizations, part of a larger conglomerate. After doing so, I shared what I'd learned about UX research and UX design for mobile devices.

1. mobile web design and developmentmobile web design and development
hell is other browsershell is other browsers
(with apologies to Jean Paul Sartre)(with apologies to Jean Paul Sartre)
Hat tip to Brian Fling whose work is the
basis for much of this presentation

2. 2

3. 3
Total and complete gratitude, heartfelt thanks, big props to: Jayde
Ann Ly to whom I bow and say: “I am not worthy! I am not worthy!”
Also, props to Erica Byrd for her generosity with her time and
feedback. Also: Damir Tresno, Sam Christy, Jon Kranz, Sarat
Nagabhirava, Phillip Billups, Dan Allen, and everyone in TOLops
for putting up with my Snoopy happy dancing upon first seeing our
mobile site.

4. 4

5. 5
what are we here for?

find out what the fuss is about?

how can we take advantage of mobile web
opportunities?

how to create mobile user experiences?

to learn how to code for mobile web apps?

make sense of a new medium?

6. 6
what is the mobile web?

According to Brian Fling, it’s a collection of
web sites designed for viewing with mobile
devices

Accessed via the Web, just like desktops and
laptops

By the end of this 2010, ½ the world’s
population may regularly access the mobile
web

7. 7
everybody’s doing it

"Mobile is the fastest and cheapest way to
reach the largest number of people. There
are billions of people…who still don't have
access to the Internet. And we think mobile
presents the biggest opportunity to get them
on the Internet.“

­Chris Sacca, head of special initiatives at Google

8. 8
mobile is

small viewport

flaky connectivity

highly variable context

limited text input

limited interactivity

UI takes up the entire viewport

difficult to multitask

easy to get lost

9. 9
mobile is different from other media

personalized

always on

always carried

built in payment channel

point of thought

a mass medium that encompasses
previous mass media: print, music, film,
voice, television, internet

10. 10
contextual web
 design and development for the mobile web is
about the context within which the user
experiences the mobile web.

11. 11
context
 the setting for an event, idea, enunciation, or
action.
 matters to understanding events, ideas,
words, and action.
 the way someone interacts with the web:
where she is, who she’s with, what she’s
trying to do, etc.

12. 12
designing and developing for
context

develop and design for many contexts

create solutions based on user goals

account for constraints of the technology

consider physical context as well as culture,
ideational, motivational context

13. 13

14. 14
we already know about
triangulation
user experience design

alignment of user goals
with business objectives

ensuring user goals inform
feature specs and the
interaction experience

most important part of
product development

15. 15
what is mobile design?

creation of user experiences for the mobile
context

doesn’t start with photoshop

start with paper prototypes/wireframes and
reproduce context

16. 16

17. 17

18. 18
the question: go mobile or not

not every site makes sense for mobile

know what you’re buying and what you’re
spending

ask hard questions: does the content
belong on a mobile site? will people use it?

19. 19
so, you’re going mobile
Photo credit: Crystl @ Flickr

20. 20
mobile design: poka yoke

21. 21
poka yoke

limit user error – also known among
sysadmins as PEBKAC errors

poka yoke (usually pronounced Pokey
Yokey) is a Japanese principle for fail-safing
or mistake-proofing a product

examples?

22. 22
ThinkGeek.com’s Gift for Sys Admins
http://www.thinkgeek.com/interests/sysadmin/6692/action/21024d3/
For more info, see BOFH’s at:
Simon Travaglia’s BOFH Archives (1990 – 2001)
http://bofh.ntk.net/Bastard_Indexes.html
http://www.theregister.co.uk/odds/bofh/

23. 23
design for best possible
experience

tent pole design is about reaching the widest
audience by offering something for everyone

risks of tent pole design too high

instead: design for the best possible
experience

24. 24
information architecture

either/or choices

tradeoffs: no right or wrong answer;
depends on context

pare navigation to five categories

minimize levels of navigation

up to 10 links (accesskeys)

reorder the site by priority of category for
the mobile context

25. 25
elements of mobile design

context

message

look and feel

layout

color

type

graphics

26. 26
context

who are your users: what do you know about them?

what can you predict about behavior based on their needs and
goals?

context of use: what’s happening around or near the user?

when are they using mobile devices? at home? at work? with
lots of time? with little?

where are your users: public/private; home/work;
stationary/mobile; solitary/with friends, day/night?

why are they using mobile? What’s the value to them?
Productivity, entertainment, information?

how do they use the device? portrait/landscape;
holding/carrying/pocket?

27. 27
message

what is the overall mental message you want
for the customer?

created through both text and imagery –
textual and visual design (Michael
Cummings: users conscious of text first, then
the visual design)

if you look at the design from distance, how
do you feel, react, respond?

does the design inspire action/passion,
boredom/interest, confusion/clarity?

28. 28
 Use fling’s slides from 155  to illustrate
different meanings, feelings, emotions, etc
generated by different designs. Maybe take
screenshots.

29. 29
look and feel

what kind of appearance: clean, vibrant,
energetic, laidback, cool, western, modern,
clam, rustic, earthy, sleek…

as mobile designers, we’re still learning how
to convey look and feel through mobile
experience

patterntap.com

design4mobile.com

30. 30
layout

how do you want user to visually process the
page: top  bottom? left  right?

Fling: the structural and visual components
of layout often get merged together creating
confusion and making design difficult to
produce

use barebones wireframes to separate layout
from visual design so as not to confuse the
two

31. 31

32. 32
color

color helps convey look and feel, brand, and
can enhance or hinder usability, as well as
enjoyment and engagement

however, color is the most difficult most
difficult aspect of mobile web development

limited color depth can create banding or
unwanted posterization of images

33. 33 source: Brian Fling, Mobile Web Design and Development. Photo credit: David Rahardja

34. 34
typography

type is rendered in subpixels

a subpixel is a division of each pixel into a
RB or G unit at a microscopic level

this allows for greater level of anti-aliasing for
each font glyph or character

font support is better than it used to be, but
still have limited number of mobile mobile-
safe fonts

35. 35
graphics

aid or establish visual experience

supplement the look; should be used
sparingly

images displayed inline with the text

iconography

photos

branding images

36. 36
screen sizes

mobile phones come in all shapes and sizes

hell is other browsers – even though all these
choices are great for consumers (maybe)

difficult to create the best possible
experience since there are so many devices

user can control portrait or landscape

37. 37

38. 38
Fling’s 3Cs of mobile design &
dev
1) COST
2) CONTENT
3) CONTEXT

39. 39
cost
if you don’t design and code your site
responsibly:

the user could pay to view bloated code and bad
design

slow page loads and impatient users who hit the
back button.

40. 40
content

considerations such as navigation, image
size, page weight, and javascript

similarly, the bones of the content - the
XHTML markup and CSS - need to be
parsimonious, well-formed

41. 41
context
1) what does your web site add to the user’s
mobility.
2) how does the site add value to their
physical context?
3) what is the context within which people use
your site?
bus? train? subway? boat? airport?
motorcycle trip? RV trip? apartment
hunting? house hunting. job search?
school? vacationing? traveling?

42. 42
users: now, now, now
mobile users:in the ‘now’:

repetitive now

bored now

urgent now
which one are you?

43. 43
repetitive now

these users do the same thing over and over

design: keep clickness low

dev: use accesskeys and tabindex

q: how can our sites meet the context
and needs of these uers? can we?
should we?

44. 44
bored now

these users have a few minutes to spare

potentially lucrative audience: time to kill,
money to spend – or willing to spend
because they are bored

design: enhance site stickiness

q: how can our sites meet the context
and needs of these users? can we?
should we?

45. 45
urgent now

problem or crisis

directions, where to eat, clean restroom,
flight times, traffic conditions, weather

design: keep clickness low; findable, easy to
read

dev: use accesskeys and tabindex

q: how can our sites meet the context
and needs of these uers? can we?

46. 46

47. 47

48. 48
Photo credit: from an article about Illinois
bill to ban cell phone use while walking.
http://www.switched.com/2008/07/31/illino
s-considering-anti-walking-and-texting-bil

49. 49
Photo credit: from Hot Hardware, an article about a survey that found
mobile use while driving isn’t unsafe: http://hothardware.com/News/N
Survey-Finds-Texting-And-Driving-To-Be-SafeWait-What/

50. 50
Photo credit: Christian Crumlish

51. 51

52. 52
from Pangaea to Balkanization

"The Pangaea of the Web is gone."
- Leland Rechis, UX Designer, Google

there is no one mobile standard

must optimize for a variety of devices,
browsers, languages, carriers, countries,
cultures, and contexts of mobile use

53. 53
complexity of mobile web

should never be underestimated

not insurmountable

mobile web complexity exists for reasons

54. 54
designer / developer need to:

look at design and code with a view toward
many different contexts

if you’ve been thinking about how people
with disabilities use the web, you’ve got good
practice for mobile design and dev

must visualize, in your head, as you lay down
the code, how a design will be rendered on
many mobile devices

55. 55
Fling’s rules for mobile
1. forget what you think you know
2. believe what you see, not what you read
3. constraints never come first
4. focus on context, goals, and needs
5. you can’t support everything
6. create, don’t convert
7. KISS

56. 56 start with great idea
user needs & goals
add value to context(s)
add value  business strategy
create device plan
design around user needs/context
prototype & test in context
build out site - development
test test test. test more.
optmize assets
adapt to other devices
the layers of mobile UX design

57. 57
mobile web standards

if you know how to write standards-compliant
code, then you know how to write mobile
standards-compliant code

when it comes to mobile the centerpiece of
standards – ‘one web’ – is a great idea, but
needs to be rethought in light of
technological limitations and context

58. 58
XHTML

XHMTL-MP: modularization or subset of XHTML
Basic and HTML

markup language for the WAP (Wireless Access) 2.0
protocol

jargon: WAP is the stack in which mobile web lives

default language supported by the industry -although
iPhone prefers XHTML

XHTML Basic & XHTML-MP almost the same

XHTML-MP is the only language you need to write
unless a mobile service provider requires the use of
WML (Wireless Markup Language)

59. 59
what is progressive
enhancement?
“The graceful degradation perspective
Graceful degradation focuses on building the
website for the most advanced/capable
browsers. …
Under this paradigm, older browsers are
expected to have a poor, but passable
experience. Small fixes may be made to
accommodate a particular browser. Because
they are not the focus, little attention is paid

60. 60
layers of progressive enhancement
source: Brian Fling, Mobile Web Design and Development

61. 61
progressive enhancement for mobile

semantic markup: code for meaning, not
design

device plan for targeted and supported
browsers before laying down code

add in design - progressively

visualize how you will code for both low-end
and high-end browsers

test, test, test

test more

62. 62
XHTML and iPhone

iPhone and Webkit support XHTML1.0 strict and
transitional doctypes

XHTML recommended language for writing iphone
apps

iphone will render XHTML MP and XHTML Basic,
but it won’t like it.

given the option to render the desktop version or a
mobile version of a site, iPhone will render desktop
mode when served XHTML-MP or XHTML Basic

may have changed in past 6 months

63. 63
HTML 5

HTML 5 provides new opportunities for
mobile web development such as offline
storage, document editing, media playback,
and canvas (eventually  )

offline data generates a lot of excitement

with HTML 5 we will have the ability to create
client side data storage systems which allow
us to create web appliations that work offline

64. 64
wireless CSS -MP

CSS-MP supports most (not all) CSS 2.1
attributes

advanced styling techniques won’t work
across multiple mobile browsers

keep CSS as simple as possible

avoid inline styles as we already do

use document-level styles instead of
stylesheets

avoid the cascade

65. 65
javascript

only class A browsers good support for
everything else, support is flakey

battery killer

resource hog

kills browsers, even the newest smartphones

66. 66
device plan

select which browsers are targeted and
which are supported - although not with full
functionality or optimal design

browser grading: class A, B, C, D, F (yahoo!
initiative)

acidtests.org

67. 67
mobile 1.0 vs. mobile 2.0

proprietary

walled gardens

brand centered

applications

standards

web services

user-centered

web as platform

68. 68
‘come to me’ web

the mobile user is seeking information but not long,
involved sit-down experiences with lots of
information to read

they want answers now

they want information they can use immediately:
times and dates, store hours, how tos, promotions,
contact info, help for product, device or situation,
store hours

want to access their own information

69. 69
emerging patterns

mobile apps and web sites are establishing
patterns of expectations among users

menu choices are often presented as vertical
lists with accesskeys to provide shortcuts to
for use with keypad

working with these emerging standards make
sense

70. 70

71. 71
what i learned: i already knew (but
i still have a TON to learn….)

it’s OK to focus on limited devices & browsers

find a need and meet that need

simplicity is best for complexity of context

design for context and adapt for multiple contexts

you already know what you need to know to write XHTML

standards, standards, standards

validate, validate, validate

optimize for bandwidth

test, test, test

test again

iterate, iterate, iterate

72. 72
resources: books, guides,
tutorials

Mobile Web Design and Development: Practical concepts and techniques
for creating mobile sites and web apps by Brian Fling. O’reilly:,
http://oreilly.com/catalog/9780596155452

Mobile Web Design by Cameron Moll. http://mobilewebbook.com/

Designing the Mobile User Experience: Global Authoring Practices for the
Mobile Web by Passani.. Online: http://www.passani.it/gap/

Building Mobile Web Sites: Design Patterns, Recipes and Ideas by
Richard Yates. http://www.amazon.com/Building-Mobile-Web-Sites-
Patterns/dp/1419654985

.mobi Developer’s Guide. Brian Fling. http://dev.mobi

XHTML mobile profile tutorial,
http://www.developershome.com/wap/xhtmlmp/

73. 73
resources: articles

Challenges of Interface Design, Yahoo Developers Blog,
http://yuiblog.com/blog/2007/10/02/challenges-of-interface-design-for-mobile-d

The .mobi controversy:
http://www.google.com/search?q=should+i+use+a+.mobi+domain

Designing for the Mobile Web.
http://articles.sitepoint.com/article/designing-for-mobile-web

What I learned while building an iPhone site,
http://code.flickr.com/blog/2008/10/27/lessons-learned-while-building-an-iphon

Optimizing Your Website for Mobile Devices
http://www.elementfusion.com/tutorial-optimizing-your-website-for-mobile-devic

74. 74
resources: articles

Designing for Touch Screens,
http://patterns.littlespringsdesign.com/index.php/TouchWeb Styleguide
and design recommendations for Mobile Screens
Part 1
http://patterns.littlespringsdesign.com/index.php/Mobile_Style_Guides_-_Scree
Part 2
http://patterns.littlespringsdesign.com/index.php/Mobile_Style_Guides_-_Scree

How mobile browsers handle scripting
http://patterns.littlespringsdesign.com/index.php/Script_Events

Designing and Developing a Mobile Web Site,
http://dev.opera.com/articles/view/designing-and-developing-mobile-web-site/

75. 75
resources: sites

Learn the Mobile Web, http://learnthemobileweb.com/

Mobile Web Design Workshop (Fling),
htttp://mobiledesign.org/workshop/

Mobile Awesomoness Resource Page,

http://www.mobileawesomeness.com/mobile-web-resources/

.mobi Ready http://mr.dev.mobi

76. 76
resources: standards

W3C Mobile Standards start page
http://www.w3.org/2004/02/Mobile.html

W3C Mobile Web Best Practices http://www.w3.org/TR/mobile-bp/

cHTML http://en.wikipedia.org/wiki/CHTML/

WML http://en.wikipedia.org/wiki/Wireless_Markup_Language

77. 77
resources: validators

Mobile-friendly XHTML Validator (W3C) http://validator.w3.org/mobile/

.mobi Mobile-readiness checker http://ready.mobi

mobileOK Checker http://validadores.tawdis.net/mobileok

WuRML (shadowplay.net)
http://wurml.shadowplay.net:80/sect.php?sectid=5">

78. 78
resources: progressive
enhancement
 pe wiki by Jim Wilkenson,
http://en.wikipedia.org/wiki/Progressive_enhancement
 Steve Champeon’s seminal article, Progressive Enhancement
and the Future of Web Design, Webmonkey
http://www.webmonkey.com/03/21/index3a.html
 Graded Browser Support,
http://developer.yahoo.com/yui/articles/gbs/gbs.html
 Understanding Progressive Enhancement, Aaron Gustafson, A
List Apart,
http://www.alistapart.com/articles/understandingprogressiveenh
ancement/
 Progressive enhancement wikipedia entry,
http://en.wikipedia.org/wiki/Progressive_enhancement

79. 79
resources: inspiration & design

Mobile Awesomoness Gallery, http://www.mobileawesomeness.com/

Search Patterns, www.searchpatterns.org

Yahoo YUI Grids: http://developer.yahoo.com/yui/grids/builder/

Mobiforge Templates,
http://mobiforge.com/starting/story/xhtml-mobile-website-templates

80. 80
resources: device detection & screen
res

Detect mobile browsers, http://detectmobilebrowsers.mobi/

Cell phone screen resolutions,
http://cartoonized.net/cellphone-screen-resolution.php

Mobile User Agent (ID) Strings,
http://www.zytrax.com/tech/web/mobile_ids.html

81. 81
resources: iPhone

iPhone Developer’s, http://developer.apple.com/iphone/

http://www.bennadel.com/blog/1721-Default-To-The-Numeric-Email-And-URL-

YUI Blog on iPhone Cacheability,
http://yuiblog.com/blog/2008/02/06/iphone-cacheability/

What I learned while building an iPhone site:
http://code.flickr.com/blog/2008/10/27/lessons-learned-while-building-
an-iphone-site/

iUI – An iPhone UI Framework http://code.google.com/p/iui/

Google’s iUI development for Safari on iPhone (Introduction)

82. 82
resources: emulators &
simulators

.mobi resources, http://emulator.mtld.mobi/

Opera Mini Demo, http://www.opera.com/mini/demo/

Nokia Simulator,
http://developer.openwave.com/dvl/member/downloadManager.htm?
softwareId=23

Blackberry Simulator,
http://www.blackberry.com/developers/downloads/simulators/index.sht
ml

Android Emulator,
http://developer.android.com/guide/developing/tools/emulator.html

Openwave
http://developer.openwave.com/dvl/tools_and_sdk/phone_simulator/

Phone Simulator (Openwave)
http://developer.openwave.com/dvl/member/downloadManager.htm?
softwareId=23

83. 83
resources: emulators &
simulators
shout out to Jayde at Boats.com!

Emulator download:
http://developer.android.com/guide/developing/tools/emulator.html

How to install and get the "wifi" working
http://www.buildcontext.com/blog/2008/11/21/android-sdk-browser-
test-emulator-pc-google/

Blackberry Simulators
http://na.blackberry.com/eng/developers/resources/simulators.jsp

84. 84
bug notes
NOTE: as of 2/21/2010 - RIM has moved to webkit http://www.css3.info/css3-
coming-soon-to-a-blackberry-near-you/
http://www.cloudfour.com/blackberry-browser-bug/
won't render images if less than 4px
Blackberry scales background images down if they are wider than the blackberry
viewport. This will jack up sprite images. WORKAROUND: make sprite tall and
narrow
When Blackberry scales an image up or down it uses dithering instead of anti-
aliasing.
In landscape mode, the Blackberry scales images AND html elements up using
dithering instead of anti-aliasing
http://www.onehat.com/blog/2009/06/blackberry-browser-bug-with-background-
images/
iphone chokes if you don’t feed it the @charset statement at the top of the
stylesheet
there’s more, there’s always more. but I’m out of time, because there’s never more

85. 85 Source: Brian Fling, MWDaD

86. 86
device detection options

simple device detection: publish one mobile
site designed for the lowest supported browser,
routing all mobile browsers to that site.

advanced device detection: dynamically serve
the best possible mobile site to the requesting
device

mobile stylesheets: write XHTML for the
targeted mobile context; use the media type
attribute to render a stylesheet to mobile devices

no device detection: rely on an alternate
domain or subdirectory forcing the user to manually
navigate to the site

87. 87
W3C adaptation model

adaptation: process of dynamically
optimizing content to the capabilities of the
requesting device.
a process of detecting user agent mobile
profile.

the server delivers markup and images
based on the browser, screen size, and
device capabilities

88. 88
Fling: the big BUT

as with ‘one web’ it’s optimal.

BUT, we can’t always make the optimal choices. We
often have to satisfice instead.

detect user agent mobile profile & server delivers
markup and images based on the browser, screen
size, and device capabilities

problem: plethora of browsers/devices. 500
difference devices sold each year; 50 different
mobile browsers

mobile service provider linked sites must support all
provisioned devices and browsers

dealing with each mobile service provider can be a
full-time job