View
255
Download
6
Category
Preview:
Citation preview
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,
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
Recommended