designing for mobile: ux for designers and developers

mobile web design and mobile web design and developmentdevelopment

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

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

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

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

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

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

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

contextual web

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

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

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

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

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

17

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

so, you’re going mobile

Photo credit: Crystl @ Flickr

20

mobile design: poka yoke

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

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.htmlhttp://www.theregister.co.uk/odds/bofh/

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

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

elements of mobile design

context message look and feel layout color type graphics

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

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

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

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

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

31Source: Brian Fling, Mobile Web Design and Development

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 source: Brian Fling, Mobile Web Design and Development. Photo credit: David Rahardja

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

graphics

aid or establish visual experience supplement the look; should be used

sparingly images displayed inline with the text iconography photos branding images

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

38

Fling’s 3Cs of mobile design & dev

1) COST2) CONTENT3) CONTEXT

39

cost

if you don’t design and code your siteresponsibly: the user could pay to view bloated code

and bad design slow page loads and impatient users who

hit the back button.

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

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

users: now, now, now

mobile users:in the ‘now’: repetitive now bored now urgent now

which one are you?

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

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

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? should we?

46

47

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

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

50Photo credit: Christian Crumlish

51

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

complexity of mobile web

should never be underestimated not insurmountable mobile web complexity exists for

reasons

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

Fling’s rules for mobile

1. forget what you think you know2. believe what you see, not what you

read3. constraints never come first4. focus on context, goals, and needs5. you can’t support everything6. create, don’t convert7. KISS

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

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

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

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 beyond fixing the most egregious errors.

The progressive enhancement perspective

Progressive enhancement focuses on the content. … Content is the reason we create websites to begin with. … That’s what makes progressive enhancement a more appropriate paradigm. It’s why Yahoo! swiftly adopted it and used it to create their Graded Browser Support strategy.

- Aaron Gustafson, “Understanding Progressive Enhancement,” A List Apart, http://www.alistapart.com/articles/understandingprogressiveenhancement/

60

layers of progressive enhancement

source: Brian Fling, Mobile Web Design and Development

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

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

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

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

javascript

only class A browsers good support for everything else, support is flakey

battery killer resource hog kills browsers, even the newest

smartphones

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

mobile 1.0 vs. mobile 2.0

proprietary walled gardens brand centered applications

standards web services user-centered web as platform

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

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

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

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

resources: articles Challenges of Interface Design, Yahoo Developers Blog,

http://yuiblog.com/blog/2007/10/02/challenges-of-interface-design-for-mobile-devices/ 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-iphone-site/ Optimizing Your Website for Mobile Devices

http://www.elementfusion.com/tutorial-optimizing-your-website-for-mobile-devices

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_-_Screen_Design,_Part_1

Part 2 http://patterns.littlespringsdesign.com/index.php/Mobile_Style_Guides_-_Screen_Design,_Part_2

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

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

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

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

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/understandingprogressiveenhancement/

Progressive enhancement wikipedia entry, http://en.wikipedia.org/wiki/Progressive_enhancement

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

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

resources: iPhone iPhone Developer’s, http://developer.apple.com/iphone/ http://www.bennadel.com/blog/1721-Default-To-The-Numeric-Email-And-URL-Keyboards-On-The-iPhone.htm 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

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

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

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" workinghttp://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

bug notesNOTE: 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 time.

85 Source: Brian Fling, MWDaD

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

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

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