designing mobile experiences
DESCRIPTION
TRANSCRIPT
![Page 1: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/1.jpg)
with Brian Fling
DESIGNING MOBILE EXPERIENCES
![Page 2: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/2.jpg)
![Page 3: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/3.jpg)
![Page 4: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/4.jpg)
Available
NOWhttp://mobiledesign.org
![Page 5: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/5.jpg)
HOUSEKEEPINGmobiledesign.org
mobiledesign.org/workshop
flingmedia.com
slideshare.net/fling
linkedin.com/in/fling
@fling
![Page 6: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/6.jpg)
The Layers of the Mobile
Experience
![Page 7: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/7.jpg)
IDEA The first thing we need is an idea that inspires us.
![Page 8: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/8.jpg)
NEEDS & GOALS
IDEA The first thing we need is an idea that inspires us.
Identify a basic need with our desired user.
![Page 9: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/9.jpg)
CONTEXT
NEEDS & GOALS
IDEA The first thing we need is an idea that inspires us.
Identify a basic need with our desired user.
The circumstances where information adds value.
![Page 10: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/10.jpg)
STRATEGY
CONTEXT
NEEDS & GOALS
IDEA The first thing we need is an idea that inspires us.
Identify a basic need with our desired user.
The circumstances where information adds value.
How we can add value to the business.
![Page 11: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/11.jpg)
DEVICE PLAN
STRATEGY
CONTEXT
NEEDS & GOALS
IDEA The first thing we need is an idea that inspires us.
Identify a basic need with our desired user.
The circumstances where information adds value.
How we can add value to the business.
Choose the devices that best serves our audience.
![Page 12: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/12.jpg)
DESIGN
DEVICE PLAN
STRATEGY
CONTEXT
NEEDS & GOALS
IDEA The first thing we need is an idea that inspires us.
Identify a basic need with our desired user.
The circumstances where information adds value.
How we can add value to the business.
Choose the devices that best serves our audience.
Create a user experience based around needs.
![Page 13: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/13.jpg)
PROTOTYPE
DESIGN
DEVICE PLAN
STRATEGY
CONTEXT
NEEDS & GOALS
IDEA The first thing we need is an idea that inspires us.
Identify a basic need with our desired user.
The circumstances where information adds value.
How we can add value to the business.
Choose the devices that best serves our audience.
Create a user experience based around needs.
Test the experience within the context.
![Page 14: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/14.jpg)
DEVELOPMENT
PROTOTYPE
DESIGN
DEVICE PLAN
STRATEGY
CONTEXT
NEEDS & GOALS
IDEA The first thing we need is an idea that inspires us.
Identify a basic need with our desired user.
The circumstances where information adds value.
How we can add value to the business.
Choose the devices that best serves our audience.
Create a user experience based around needs.
Put all the pieces together.
Test the experience within the context.
![Page 15: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/15.jpg)
TESTING
DEVELOPMENT
PROTOTYPE
DESIGN
DEVICE PLAN
STRATEGY
CONTEXT
NEEDS & GOALS
IDEA The first thing we need is an idea that inspires us.
Identify a basic need with our desired user.
The circumstances where information adds value.
How we can add value to the business.
Choose the devices that best serves our audience.
Create a user experience based around needs.
Put all the pieces together.
And test, and test, and test some more.
Test the experience within the context.
![Page 16: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/16.jpg)
OPTIMIZATION
TESTING
DEVELOPMENT
PROTOTYPE
DESIGN
DEVICE PLAN
STRATEGY
CONTEXT
NEEDS & GOALS
IDEA The first thing we need is an idea that inspires us.
Identify a basic need with our desired user.
The circumstances where information adds value.
How we can add value to the business.
Choose the devices that best serves our audience.
Create a user experience based around needs.
Put all the pieces together.
And test, and test, and test some more.
Reduce all assets to its lowest possible size.
Test the experience within the context.
![Page 17: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/17.jpg)
PORTING
OPTIMIZATION
TESTING
DEVELOPMENT
PROTOTYPE
DESIGN
DEVICE PLAN
STRATEGY
CONTEXT
NEEDS & GOALS
IDEA The first thing we need is an idea that inspires us.
Identify a basic need with our desired user.
The circumstances where information adds value.
How we can add value to the business.
Choose the devices that best serves our audience.
Create a user experience based around needs.
Put all the pieces together.
And test, and test, and test some more.
Reduce all assets to its lowest possible size.
Adapt for other devices that fit our strategy.
Test the experience within the context.
![Page 18: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/18.jpg)
DiscussionWhat do you want to learn today?
• Is it to create visual experiences?
• Is it to take advantage of the mobile opportunity?
• Is it to figure out how to make sense of this new medium?
• Is it something more?
• All of the above?
![Page 19: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/19.jpg)
What is Mobile Design?
![Page 20: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/20.jpg)
JARGON ALERT
Mobile DesignThe creation of user experiences for the mobile context.
![Page 21: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/21.jpg)
It doesn’t start with Photoshop
![Page 22: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/22.jpg)
Why Mobile?
![Page 23: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/23.jpg)
![Page 24: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/24.jpg)
What’s Next?
![Page 25: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/25.jpg)
Generation Y97% own a computer94% own a mobile phone76% use Instant Messaging69% use Facebook56% own an iPod
![Page 26: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/26.jpg)
Generation ZBorn in the modern digital
age. Technology is infused at birth.
![Page 27: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/27.jpg)
Generation ZBorn in the modern digital
age. Technology is infused at birth.
The iPhone is to them
![Page 28: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/28.jpg)
Generation ZBorn in the modern digital
age. Technology is infused at birth.
The iPhone is to themas the Macintosh was to us.
![Page 29: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/29.jpg)
The Mobile Generation
2009 2010 2011 2012 2013 2014 2015
Everyone Else
source: us census bureau
![Page 30: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/30.jpg)
In less five years, the mobile generation could have more
buying power than all other demographics
![Page 31: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/31.jpg)
DiscussionWhy are you here?
• What is it about mobile that appeals to you the most?
• What do you see as being the obstacles?(your understanding? your company? the technology? etc.)
• What are the biggest opportunities?
![Page 32: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/32.jpg)
New Rules
![Page 33: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/33.jpg)
Rule #1Forget What You Think You Know
![Page 34: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/34.jpg)
![Page 35: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/35.jpg)
![Page 36: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/36.jpg)
![Page 37: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/37.jpg)
Palm2%
Blackberry3%
Windows Mobile5%
Symbian6%
Java ME7%
Android7%
iPhone69%
![Page 38: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/38.jpg)
Rule #2Believe What You See, Not What You Read
![Page 39: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/39.jpg)
![Page 40: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/40.jpg)
Experiment
![Page 41: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/41.jpg)
![Page 42: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/42.jpg)
Share your findings
![Page 43: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/43.jpg)
![Page 44: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/44.jpg)
![Page 45: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/45.jpg)
Rule #3Constraints Never Come First
![Page 46: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/46.jpg)
![Page 47: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/47.jpg)
vs.
![Page 48: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/48.jpg)
Rule #4Focus on Context, Goals and Needs
![Page 49: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/49.jpg)
![Page 50: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/50.jpg)
Rule #5You Can’t Support Everything
![Page 51: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/51.jpg)
![Page 52: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/52.jpg)
Palm2%
Blackberry3%
Windows Mobile5%
Symbian6%
Java ME7%
Android7%
iPhone69%
![Page 53: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/53.jpg)
Rule #6Don’t Convert, Create
![Page 54: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/54.jpg)
![Page 55: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/55.jpg)
![Page 56: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/56.jpg)
![Page 57: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/57.jpg)
Rule #7Keep It Simple
![Page 58: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/58.jpg)
![Page 59: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/59.jpg)
![Page 60: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/60.jpg)
Needs &
Goals
![Page 61: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/61.jpg)
JARGON ALERT
NeedsThe circumstances in which something is necessary, or that require some course of action.
![Page 62: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/62.jpg)
Abraham Harold Maslow (April 1, 1908 – June 8, 1970) was an American psychologist. He is noted for his concept-ualization of a "hierarchy of human needs", and is considered the founder of humanistic psychology.
![Page 63: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/63.jpg)
![Page 64: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/64.jpg)
JARGON ALERT
GoalsThe object of a person's ambition or e!ort; an aim or desired result
![Page 65: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/65.jpg)
![Page 66: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/66.jpg)
User Goals
Busin
ess
Goa
lsTechnical G
oals
SweetSpot
![Page 67: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/67.jpg)
JARGON ALERT
Neurolinguistic ProgrammingA model of interpersonal communication chiefly concerned with the relationship between successful patterns of behavior and the subjective experiences underlying them.
![Page 68: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/68.jpg)
Learning TypeAuditory 20% of all peopleconnect with others verbally
is all they need to feel
connected and productive with others
![Page 69: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/69.jpg)
Learning TypeVisual 35% of all peopleBeing able to see concepts
illustrated as diagrams or
charts and graphs is helpful
for this majority learning type.
![Page 70: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/70.jpg)
Learning TypeKinesthetic 45% of all people incorporate muscle memory
and hand-eye movement to
process and retain new information
![Page 71: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/71.jpg)
ExerciseNeeds & Goals
• Let’s examine BBC
• What human needs does the BBC serve?
• What are the goals of the BBC’s audience?
• Does the BBC utilize neurolinguistic programming models? If so, how?
• How do we document our findings?
![Page 72: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/72.jpg)
Context
![Page 73: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/73.jpg)
JARGON ALERT
ContextThe circumstances that form the setting for an event, statement, or idea, and in terms of which it can be fully understood and assessed.
![Page 74: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/74.jpg)
![Page 75: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/75.jpg)
![Page 76: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/76.jpg)
![Page 77: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/77.jpg)
ContextBIG C
Context with a capital C is how the user will derive value from something they are currently doing.In other words, the understanding of circumstance. It is the mental model they will establish to form understanding.
![Page 78: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/78.jpg)
![Page 79: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/79.jpg)
![Page 80: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/80.jpg)
![Page 81: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/81.jpg)
![Page 82: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/82.jpg)
![Page 83: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/83.jpg)
contextlittle c
The mode, medium, or environment in which we perform a task or the circumstances of understanding.• our present location• our device of access• our state of mind
![Page 84: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/84.jpg)
Physical Context
My present location. My physical context will dictate how I access information and therefore how I derive value from it.
![Page 85: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/85.jpg)
![Page 86: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/86.jpg)
Media Context
My device of access.The media context isn’t just about the immediacy of the information we receiveHow to engage people in real time.
![Page 87: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/87.jpg)
![Page 88: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/88.jpg)
Modal Context
Our present state of mind.• Where should I eat?• Should I buy it now or
later?• Is this safe or not?
![Page 89: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/89.jpg)
![Page 90: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/90.jpg)
Events
TV
Billboard
Radio
Live
Website
Auditory
Kinesthetic
Visu
al
Word of Mouth
Print Ad
Mobile Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMSMMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Send to Friend
WAP Site
Notify
Buy
WAP SiteWAP Site
Send to Friend
Join
Buy
NotifyNotify
Send to Friend
Post WAP Site
MMS
Send to Friend
Notify
Send to Friend
Join
Discuss
Send to Friend
Notify
Download
DownloadNotify
Vote
Join
Vote
Notify
Buy
Send to Friend
Notify
![Page 91: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/91.jpg)
Events
TV
Billboard
Radio
Live
Website
Auditory
Kinesthetic
Visu
al
Word of Mouth
Print Ad
Mobile Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMSMMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Send to Friend
WAP Site
Notify
Buy
WAP SiteWAP Site
Send to Friend
Join
Buy
NotifyNotify
Send to Friend
Post WAP Site
MMS
Send to Friend
Notify
Send to Friend
Join
Discuss
Send to Friend
Notify
Download
DownloadNotify
Vote
Join
Vote
Notify
Buy
Send to Friend
Notify
![Page 92: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/92.jpg)
Events
TV
Billboard
Radio
Live
Website
Auditory
Kinesthetic
Visu
al
Word of Mouth
Print Ad
Mobile Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMSMMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Send to Friend
WAP Site
Notify
Buy
WAP SiteWAP Site
Send to Friend
Join
Buy
NotifyNotify
Send to Friend
Post WAP Site
MMS
Send to Friend
Notify
Send to Friend
Join
Discuss
Send to Friend
Notify
Download
DownloadNotify
Vote
Join
Vote
Notify
Buy
Send to Friend
Notify
![Page 93: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/93.jpg)
Events
TV
Billboard
Radio
Live
Website
Auditory
Kinesthetic
Visu
al
Word of Mouth
Print Ad
Mobile Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMSMMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Send to Friend
WAP Site
Notify
Buy
WAP SiteWAP Site
Send to Friend
Join
Buy
NotifyNotify
Send to Friend
Post WAP Site
MMS
Send to Friend
Notify
Send to Friend
Join
Discuss
Send to Friend
Notify
Download
DownloadNotify
Vote
Join
Vote
Notify
Buy
Send to Friend
Notify
![Page 94: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/94.jpg)
ExerciseDefine the Context
• Again lets use the BBC as our example
• What are the physical contexts?
• What are the media contexts?
• What are the modal contexts?
• What is the BIG Context?
• What are some of the possible business strategies simply by addressing context?
![Page 95: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/95.jpg)
Types of Apps
![Page 96: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/96.jpg)
Types of AppsApplication Medium
![Page 97: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/97.jpg)
SMS
Experiences where the goal is to alert users of new information.
![Page 98: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/98.jpg)
![Page 99: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/99.jpg)
WEBSITE
Experiences that provide the user with simple informational data.
![Page 100: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/100.jpg)
![Page 101: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/101.jpg)
WIDGETS
Experiences that are based on an existing multi-platform framework.
![Page 102: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/102.jpg)
![Page 103: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/103.jpg)
WEB APPS
When you want to employ a cross-platform application strategy.
![Page 104: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/104.jpg)
![Page 105: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/105.jpg)
NATIVE APPS
Experiences that take advantage of the native features of the device.
![Page 106: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/106.jpg)
![Page 107: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/107.jpg)
GAMES
Experiences that entertain.
![Page 108: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/108.jpg)
![Page 109: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/109.jpg)
Device Support Complexity User
Experience Language Offline Support
Device Features Initial Cost Long Term
Cost
SMS All Simple Limited N/A No None Low High
Mobile Websites All Simple Limited HTML No None Low Low
Mobile Web Widgets
Some Medium Great HTML Limited Limited Low Low
Mobile Web Application
Some Medium Great HTML, CSS, JS Limited Limited Mid Low
Native Application All Complex Excellent Various Yes Yes High Mid
Games All Complex Excellent Various Yes Yes Very High High
MEDIUM MATRIX
![Page 110: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/110.jpg)
Types of AppsApplication Context
![Page 111: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/111.jpg)
UTILITY
A simple at-a-glance tool.
![Page 112: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/112.jpg)
![Page 113: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/113.jpg)
LOCALE
An application based on the physical context.
![Page 114: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/114.jpg)
![Page 115: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/115.jpg)
INFORMATIVE
An application meant to inform.
![Page 116: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/116.jpg)
![Page 117: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/117.jpg)
PRODUCTIVITY
Meant to increase our available time.
![Page 118: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/118.jpg)
![Page 119: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/119.jpg)
IMMER-SIVE
An application meant to distract or entertain.
![Page 120: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/120.jpg)
![Page 121: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/121.jpg)
User Experience Type Task Type Task Duration Combine with
Utility At-a-Glance Information Recall Very Short Immersive
Locale Location-based Contextual Information Quick Immersive
Informative Content-based Seek Information Quick Locale
Productivity Task-based Content Management Long Utility
Immersive Full Screen Entertainment Long Utility, Locale
CONTEXT MATRIX
![Page 122: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/122.jpg)
Mobile IA
![Page 123: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/123.jpg)
![Page 124: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/124.jpg)
KEEP IT SIMPLE
![Page 125: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/125.jpg)
![Page 126: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/126.jpg)
![Page 127: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/127.jpg)
![Page 128: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/128.jpg)
![Page 129: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/129.jpg)
SITEMAPS
![Page 130: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/130.jpg)
![Page 131: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/131.jpg)
![Page 132: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/132.jpg)
CLICKSTREAMS
![Page 133: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/133.jpg)
!"#$"
!
"#$%&'
!
(%)*
(%)*
"#$%&'
!
"#$%&'
(%)*
!
(%)*
%&'&()
!
(%)*
"#$%&'
(%)*
!
(%)*
+),
+), -&
-&
+), -&
-&
-&
./$%&'
./$%&'
+),
+),
-&
+),-&
0123)
![Page 134: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/134.jpg)
![Page 135: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/135.jpg)
![Page 136: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/136.jpg)
![Page 137: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/137.jpg)
WIREFRAMES
![Page 138: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/138.jpg)
![Page 139: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/139.jpg)
PROTOTYPING
![Page 140: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/140.jpg)
![Page 141: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/141.jpg)
![Page 142: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/142.jpg)
![Page 143: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/143.jpg)
DIFFERENT IA FOR
DIFFERENT DEVICES?
![Page 144: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/144.jpg)
ExerciseDesigning a Mobile Information Architecture
• Lets build a mobile wireframe for the BBC
• Sketch out an IA for both touch and traditional devices.
• What are the primary navigation items?
• How can you can you “tease” content?
• How are they di!erent? How are they the same?
![Page 145: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/145.jpg)
THE DESIGN MYTH
![Page 146: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/146.jpg)
Back
Navigation
Title New
Content
![Page 147: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/147.jpg)
Mobile Design
![Page 148: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/148.jpg)
The Tent PoleThe business goal of a tent-pole production is to support or prop up the losses from other productions. However, to create a tent-pole production, the creators involved must make an artistic work that they know will appeal to the largest possible audience, providing something for everyone.
![Page 149: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/149.jpg)
vs.
![Page 150: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/150.jpg)
Best Possible ExperienceIn mobile development, the risks and costs of creating that tent- pole product are just too high. This lesson is so easily seen through bad or just plain uninspired mobile design.Asking creative people to create uninspiring work is a fast track to mediocrity.
![Page 151: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/151.jpg)
vs.
iPhone The Rest
![Page 152: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/152.jpg)
Elements of Mobile Design
|CONTEXT|MESSAGE|LOOK & FEEL|LAYOUT|COLOR|TYPE|GRAPHICS
![Page 153: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/153.jpg)
ContextWho are the users? What do you know about them?
What type of behavior can you assume or predict about the users?
What is happening? What are the circumstances in which the users will best absorb the content you intend to present?
When will they interact? Are they at home and have large amounts of time? Are they at work where they have short periods of time?
Will they have idle periods of time while waiting for a train, for example?
Where are the users?Are they in a public space or a private space? Are they inside or outside?
Is it day or is it night?
Why will they use your app? What value will they gain from your content or services in their present situation?
How are they using their mobile device? Is it held in their hand or in their pocket?
How are they holding it?Open or closed? Portrait or landscape?
![Page 154: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/154.jpg)
MessageWhat you are trying to say about your site or application visually?Your message is the overall mental impression you create explicitly through visual design.
How someone will react to your design?
If you take a step back, and look at a design from a distance, what is your impression?
![Page 155: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/155.jpg)
![Page 156: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/156.jpg)
![Page 157: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/157.jpg)
![Page 158: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/158.jpg)
![Page 159: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/159.jpg)
![Page 160: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/160.jpg)
Look & FeelLook & Feel is used to describe the appearanceAs in “I want a clean look and feel” or “I want a usable look and feel.”
The problem is: As a mobile designer, what does it mean?
![Page 161: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/161.jpg)
![Page 162: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/162.jpg)
![Page 163: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/163.jpg)
LayoutHow the user will visually process the pageThe structural and visual components of layout often get merged together, creating confusion and making your design more di!cult to produce.
![Page 164: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/164.jpg)
![Page 165: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/165.jpg)
![Page 166: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/166.jpg)
![Page 167: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/167.jpg)
ColorThe most common obstacle you encounter when dealing with color is mobile screens.When complex designs are displayed on di"erent mobile devices, the limited color depth on one device can cause banding, or unwanted posterization in the image.
![Page 168: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/168.jpg)
![Page 169: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/169.jpg)
![Page 170: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/170.jpg)
TypographyHow type is rendered on mobile screens: • subpixel-based screens
• A subpixel is the division of each pixel into a red, green, and blue (or RGB) unit at a micro-scopic level, enabling for a greater level of antialiasing for each font character or glyph.
![Page 171: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/171.jpg)
![Page 172: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/172.jpg)
![Page 173: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/173.jpg)
TypographyHow type is rendered on mobile screens: • pixel density or greater pixels per
inch (PPI)The pixel density is determined by dividing width of the display area in pixels, by width of the display area in inches.
![Page 174: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/174.jpg)
![Page 175: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/175.jpg)
GraphicsUse of images that are used to establish or aid a visual experience.Graphics can be used to supplement the look and feel, or as content displayed inline with the text.
• Iconography
• Photos & Images
![Page 176: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/176.jpg)
![Page 177: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/177.jpg)
![Page 178: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/178.jpg)
Different Screen SizesMobile devices come in all shapes and sizes. Choice is great for consumers, but bad for design. It can be incredibly di!cult to create that best possible experience for a plethora of di"erent screen sizes.
![Page 179: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/179.jpg)
![Page 180: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/180.jpg)
![Page 181: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/181.jpg)
The Right DeviceThe truly skilled designer doesn’t create just one product—they translate ideas into experiences. The spirit of your design should be able to be adapted to multiple devices.
The days of tent-poles are gone.
![Page 182: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/182.jpg)
ExerciseDesign Critique
• Lets pick on the BBC one last time...
• Does the current design address context? If so how?
• What message does it convey?
• What about the look & feel?
• What about layout?
• What about color & type?
• What about graphics?
![Page 183: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/183.jpg)
Web Apps vs.
Native Apps
![Page 184: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/184.jpg)
The Ubiquity Principle
![Page 185: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/185.jpg)
JARGON ALERT
Ubiquity PrincipleThe easiest it is to produce quality content and services for the largest available market will always win.
![Page 186: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/186.jpg)
Reason #1Fragmentation
![Page 187: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/187.jpg)
Getting your application on one platform is a snap, but getting it on two is a challenge, five a costly
headache, and supporting fifty virtually impossible.
![Page 188: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/188.jpg)
Reason #2The Web
![Page 189: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/189.jpg)
Anyone who’s betting against the Web right now is an idiot. Daniel Appelquist, Co-Chair W3C Mobile Web Initiative
![Page 190: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/190.jpg)
Reason #3Control
![Page 191: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/191.jpg)
Mobile application distribution cannot
and will likely never be under the control of
the developer.
![Page 192: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/192.jpg)
Reason #4Consumer Expectations
![Page 193: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/193.jpg)
Consumers expect things to just work.
![Page 194: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/194.jpg)
THE MOBILE WEB IS THE ONLY LONG-
TERM COMMERCIALLY
VIABLE CONTENT PLATFORM FOR MOBILE DEVICES
![Page 195: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/195.jpg)
When to make a native application?
![Page 196: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/196.jpg)
CHARGING MONEY
![Page 197: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/197.jpg)
![Page 198: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/198.jpg)
GAMES
![Page 199: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/199.jpg)
![Page 200: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/200.jpg)
Game
Game
Game
Game
Game
Game
Game
Game
Game
Game
Game
Game
Game
![Page 201: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/201.jpg)
67%OF ALL PAID APPS
ARE GAMES
![Page 202: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/202.jpg)
65%OF ALL FREE APPS
AREN’T GAMES
![Page 203: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/203.jpg)
LOCATION
![Page 204: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/204.jpg)
![Page 205: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/205.jpg)
![Page 206: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/206.jpg)
CAMERA
![Page 207: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/207.jpg)
![Page 208: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/208.jpg)
ACCELERO-METERS
![Page 209: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/209.jpg)
![Page 210: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/210.jpg)
FILESYSTEM
![Page 211: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/211.jpg)
![Page 212: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/212.jpg)
OFFLINE
![Page 213: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/213.jpg)
![Page 214: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/214.jpg)
![Page 215: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/215.jpg)
• Application Invocation• Application Settings• Camera• Communications Log• Gallery• Location
• Messaging• Persistent Data• Personal Information• Phone Status• User Interaction
An initiative is defining new interfaces (Javascript APIs) and a security framework to enable the access to mobile phone functionalities.
![Page 216: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/216.jpg)
So what is the deal with BONDI?
![Page 217: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/217.jpg)
![Page 218: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/218.jpg)
When to make a Mobile Web App?
![Page 219: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/219.jpg)
Mobile 2.0
![Page 220: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/220.jpg)
![Page 221: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/221.jpg)
Web 1.0Proprietary
Walled Gardens
First to market
Brand-centered
Web 2.0Standards
Web Services
Web as a Platform
User-centered
![Page 222: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/222.jpg)
![Page 223: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/223.jpg)
What I Learned at Mobile 2.0#1 Mobile 2.0 = The web
The mobile web browser is the next killer app
Mobile Web Applications are the future
Javascript is the next frontier
Rich Interactions kill battery life
The Mobile User Experience Sucks
Mobile Widgets are the next big thing
The Carrier is the new “C” word
Mobile Needs to Check Its Ego
We are creators not consumers
![Page 224: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/224.jpg)
JARGON ALERT
Mobile 2.0The convergence of mobile services and web services. The promise of Mobile 2.0 is to add portability, ubiquitous connectivity and location-based services to enhance information and services found on the web.
![Page 225: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/225.jpg)
Widgets VoIP
Video
TransactionsSocial Media
ShoppingSearch
QR Codes
Point of Sale
Mobile AdvertisingMicroblogging
Messaging Media Sharing
Audio
Platforms
Enterprise
App StoresImaging
Location-based
![Page 226: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/226.jpg)
sensoring
biometrics
transactions
lifestreaming
recommendation
image recognition
augmented reality
mobile connected games
location-based social media
retail proximity media consumption
Hot Trends
![Page 227: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/227.jpg)
Mobile 1.0Proprietary
Walled Gardens
First to market
Brand-centered
Mobile 2.0Standards
Web Services
Web as a Platform
User-centered
![Page 228: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/228.jpg)
Brick Era
Candy Bar Era
Feature Phone Era
Smart Phone Era
Touch Era1990 2000 201019801970
Mobile Evolution
![Page 229: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/229.jpg)
Change occurs because there is a gap between what is and what should be.— Craig McCaw
![Page 230: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/230.jpg)
the mythical“Future-Phone”
![Page 231: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/231.jpg)
![Page 232: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/232.jpg)
Mobile Web Dev
![Page 233: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/233.jpg)
Using Web Standards
![Page 234: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/234.jpg)
Multiple Mobile BrowsersDesigning and developing for multiple mobile browsers simultaneously is a challenge, but not an impossibility. It requires looking at your designs and code from many contexts.
Being able to visualize how your designs will be rendered on a variety of devices in your head, as you lay down code.
![Page 235: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/235.jpg)
Progressive Enhancement
![Page 236: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/236.jpg)
![Page 237: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/237.jpg)
![Page 238: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/238.jpg)
![Page 239: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/239.jpg)
LAYOUT
![Page 240: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/240.jpg)
Fixed vs. Fluid
![Page 241: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/241.jpg)
![Page 242: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/242.jpg)
Multiple vs. Single Column Layouts
![Page 243: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/243.jpg)
![Page 244: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/244.jpg)
DEVICE PLANS
![Page 245: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/245.jpg)
Class A Browsers• Excellent XHTML 1.0 support • Good HTML5 support; specifically,
the canvas element and o#ine storage
• Excellent CSS support, including most of CSS Level 2.1 (scores 90 percent or higher on the ACID2 test) and the majority of CSS Level 3 (scores 75 percent or higher on the ACID3 test)
• Support for web standards layouts, including absolute positioning, floats, and complex CSS-based layouts
• Support for image replacement techniques
![Page 246: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/246.jpg)
Class A Browsers• Excellent JavaScript support • Ability to toggle the display property • Support for DOM events, including
Ajax • Considered comparable to a
“desktop-grade” browser
![Page 247: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/247.jpg)
![Page 248: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/248.jpg)
Class B Browsers• Excellent XHTML 1.0 support • Good CSS Level 2.1 support (75% or
higher on the ACID2 test) • Padding, border, and margin
properties are correctly applied • Can reliably apply colors to links,
text, and background • Supports image replacement
techniques • Can support complex tables—not
necessarily nested tables• Setting a font size of 10 pixels or
more produces readable text • Has limited JavaScript support, min.
toggle the display property
![Page 249: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/249.jpg)
Class C Browsers• Good XHTML 1.0 support • Limited CSS Level 2.1 support (scores
50 percent or higher on the ACID2 test)
• Limited or no JavaScript support
![Page 250: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/250.jpg)
Class D Browsers• Basic XHTML • Limited CSS support (CSS Level 1, or
does not recognize cascading) • Minimum screen width: 120 pixels • Hyperlinks may not be colorable by
CSS • Basic table support: 2 or more
colspan and rowspan may not be supported
• No JavaScript support• “Width” expressed as a percentage
may be unreliable
![Page 251: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/251.jpg)
Class F Browsers• No (or very unreliable) CSS support • Poor table support or none at all • Basic forms: text field, select option,
submit button • May not be able to support input
mask on fields • No JavaScript support
![Page 252: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/252.jpg)
The Device MatrixClass Markup CSS Javascript
Class A XHTML, XHTML-MP, HTML5 CSS2, CSS3 Great, includes DHTML, Ajax
Class B XHTML, XHTML-MP CSS2 (Decent) Limited, some DHTML
Class C XHTML, XHTML-MP CSS2 (Limited) Limited
Class D XHTML-MP CSS2 (Basic) None
Class F XHTML-MP, WML None None
![Page 253: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/253.jpg)
MARKUP
![Page 254: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/254.jpg)
XHTMLThe same XHTML we use in web browsers every day has worked in most mobile browsers for over five years.
![Page 255: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/255.jpg)
![Page 256: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/256.jpg)
XHTML-MPA mobile version of XHTML is supported on virtually all modern mobile browsers.
It is practically the same as XHTML Basic.
![Page 257: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/257.jpg)
![Page 258: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/258.jpg)
![Page 259: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/259.jpg)
HTML5While HTML5 is still being defined, it is only supported by a handful of Class A browsers.
![Page 260: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/260.jpg)
CSS
![Page 261: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/261.jpg)
CSS-MP
![Page 262: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/262.jpg)
![Page 263: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/263.jpg)
![Page 264: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/264.jpg)
THE BOX MODELThe box model is one of the key concepts of CSS design, and therefore the first thing that tends to go wrong in mobile devices. The box model is the imaginary box that is around every element in your markup.
![Page 265: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/265.jpg)
![Page 266: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/266.jpg)
Class A Class B Class C Class D Class F
Box Model Great Good OK Poor Fail
THE BOX MODEL
![Page 267: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/267.jpg)
SELECTORSThe selector is used to tell which markup elements it should apply rules to—basically, what makes CSS work to control the presentation.
![Page 268: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/268.jpg)
Class A Class B Class C Class D Class F
Universal Yes Yes Yes Yes Yes
Type Yes Yes Yes Yes Flaky
Descendent Yes Yes Flaky Flaky No
Child Yes Yes Flaky Flaky No
Adjacent Yes Yes Flaky No No
Class Yes Yes Yes Yes Flaky
ID Yes Yes Yes Yes Flaky
Simple Attribute Yes Flaky No No No
Advanced Attribute Yes No No No No
Pseudoselector Yes Flaky No No No
SELECTORS
![Page 269: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/269.jpg)
FONTS & TEXTThe typography options on mobile devices can be less than stellar, but like most things CSS-related, we are seeing mobile browsers move closer to their desktop cousins in this respect.
![Page 270: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/270.jpg)
Class A Class B Class C Class D Class F
Available Fonts Web-safe Web-safe Sans-serif and serif
Sans-serif and serif
Sans-serif and serif
Font Size Any Any Keyword Keyword Keyword
Font-weight Yes Yes Yes Yes Limited
Font-style Yes Yes Yes Yes Limited
Text-transform Yes Yes Yes Yes Limited
Text-decoration Yes Yes Yes Yes Flaky
Line-height Yes Yes Yes Yes Flaky
Text-align Yes Yes Yes Yes Yes
White-space Yes Yes Yes Limited Flaky
Text Shadow Yes No No No No
Font replacement Limited No No No No
FONTS & TEXT
![Page 271: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/271.jpg)
BOX PROPERTIESBeing able to style the box area around an element is a crucial part of web standards design. Basic CSS level 2 box styling techniques work well on most mobile devices, allowing you to style content with some level of precision.
![Page 272: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/272.jpg)
Class A Class B Class C Class D Class F
Height & Width Yes Yes Limited Flaky Flaky
Min & Max dim Yes Flaky No No No
Margins Yes Yes Yes Yes Limited
Padding Yes Yes Yes Flaky Flaky
Borders Advanced Limited Limited Flaky Flaky
Box Shadow Yes No No No No
BOX PROPERTIES
![Page 273: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/273.jpg)
COLORStyling an element means defining colors and background images. Relying on CSS instead of images to create desired visual e!ects reduces time to download as well as cost.
![Page 274: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/274.jpg)
Class A Class B Class C Class D Class F
Background color Yes Yes Yes Yes Yes
Background image Yes Yes Yes Flaky Flaky
Multiple background images Yes No No No No
COLOR
![Page 275: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/275.jpg)
PAGE FLOWCSS can also be used to define the design layout of the page. Using positioning and page flow attributes, we can add style to the page and help make it easier to read or interact with on small screens.
![Page 276: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/276.jpg)
Class A Class B Class C Class D Class F
Display Yes Yes Yes Yes Flaky
Toggle Display Yes Yes Limited No No
Floats Yes Yes Limited Limited Flaky
Clearing Yes Yes Limited Limited Flaky
Positioning Yes Yes Limited Flaky No
Overflow Yes Limited Flaky No No
Stacking Order Yes Yes Limited Flaky No
PAGE FLOW
![Page 277: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/277.jpg)
JAVA-SCRIPT
![Page 278: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/278.jpg)
Class A Class B Class C Class D Class F
Javascript Support Yes Some No No No
DHTML Yes Limited No No No
Ajax Yes Limited No No No
JAVASCRIPT
![Page 279: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/279.jpg)
Don’t count on it.
![Page 280: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/280.jpg)
iPhone Web Apps
![Page 281: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/281.jpg)
What makes a Mobile Web App?
![Page 282: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/282.jpg)
![Page 283: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/283.jpg)
URL Bar
Browser Controls
![Page 284: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/284.jpg)
![Page 285: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/285.jpg)
![Page 286: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/286.jpg)
![Page 287: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/287.jpg)
![Page 288: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/288.jpg)
What is WebKit?
![Page 289: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/289.jpg)
![Page 290: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/290.jpg)
![Page 291: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/291.jpg)
Android Palm webOSNokia S60
![Page 292: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/292.jpg)
Android Palm webOSNokia S60
![Page 293: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/293.jpg)
Android Palm webOSNokia S60
![Page 294: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/294.jpg)
Android Palm webOSNokia S60
![Page 295: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/295.jpg)
![Page 296: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/296.jpg)
![Page 297: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/297.jpg)
98%OF ALL U.S. MOBILE WEB
TRAFFIC IS COMING FROM WEBKIT
![Page 298: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/298.jpg)
MARKUP
![Page 299: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/299.jpg)
XHTMLThe iPhone and WebKit support the XHTML 1.0 Strict and Transitional doctype, which is the recommended language for writing iPhone web apps.
![Page 300: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/300.jpg)
XHTML-MPThe iPhone will render XHTML Basic and XHTML-MP pages, but it won’t like it. Given the option to render a desktop version, or a mobile or WAP version of a site, the iPhone will render the desktop version.
![Page 301: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/301.jpg)
![Page 302: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/302.jpg)
HTML5HTML5 creates some interesting new opportunities for mobile web applications, like the canvas element, o"ine storage, document editing, and media playback.
![Page 303: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/303.jpg)
![Page 304: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/304.jpg)
![Page 305: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/305.jpg)
![Page 306: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/306.jpg)
CANVASThe canvas element allows designers and developers to essentially draw content within your HTML page. The canvas HTML tag defines a custom drawing area within your content that you can then access as a JavaScript object and draw upon.
![Page 307: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/307.jpg)
![Page 308: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/308.jpg)
OFFLINE DATAAlso part of HTML5 and supported by WebKit and the iPhone is the ability to create client-side data storage systems, which essentially allow you to create web applications that work when o"ine.
![Page 309: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/309.jpg)
![Page 310: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/310.jpg)
CSS
![Page 311: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/311.jpg)
CSS2The iPhone has excellent CSS2 support for a mobile browser. In fact, the iPhone might render CSS a bit better than the desktop web browser you’re using these days.
![Page 312: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/312.jpg)
![Page 313: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/313.jpg)
CSS3The iPhone supports the majority of the CSS3 specification, allowing us to create visually stunning and bandwidth-friendly designs using minimal amounts of code.
![Page 314: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/314.jpg)
![Page 315: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/315.jpg)
JAVA-SCRIPT
![Page 316: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/316.jpg)
Supported!
![Page 317: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/317.jpg)
DemosCSS Image E!ectsCSS TransformsFrameworksFixed Footer ScrollingMulti-touchStandalone Mode
![Page 318: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/318.jpg)
Now What?
![Page 319: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/319.jpg)
![Page 320: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/320.jpg)
![Page 321: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/321.jpg)
![Page 322: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/322.jpg)
![Page 323: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/323.jpg)
![Page 324: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/324.jpg)
![Page 325: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/325.jpg)
![Page 326: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/326.jpg)
![Page 327: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/327.jpg)
RAWKBe in the App Store.Charge money for your app.Be in full control of your app.Be able to define the design how ever you want.Spend less making your app.Increase your profitability.Support multiple devices.
![Page 328: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/328.jpg)
![Page 329: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/329.jpg)
What’s Next
![Page 330: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/330.jpg)
EVERYTHING
![Page 331: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/331.jpg)
TomorrowTomorrow’s innovations will not only involve mobile technology, but they will come from the mobile investments that are made today.This won’t be because of the iPhone or Android phones, operators, or the big device makers, but because of people.
![Page 332: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/332.jpg)
1985The Web is supposed to bring us together, but people feel more isolated than ever. In a survey conducted in 1985, respondents said that they had at least three close friends they felt they could talk to about important issues.
![Page 333: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/333.jpg)
2006In 2006, a Duke University study found that the number of friends people felt they could talk to was down to two people.25 percent stated they had no close friends at all.
![Page 334: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/334.jpg)
Go Mobile!
Mobile technology by its nature is designed to facilitate interaction between people. It is portable, personal, and ubiquitously connected. It enables us to not just to communicate in real time, but to collaborate.
![Page 335: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/335.jpg)
The Mobile Generation
2009 2011 2013 2015
Everyone Else
source: us census bureau
![Page 336: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/336.jpg)
Today’s investors, boardrooms, and
entrepreneurs are looking for value in all the
wrong places. Facebook’s game of musical
chairs won’t solve big economic problems—
and neither will making token investments in
green tech. Where is the next industrial revolution crying
out for revolutionaries? Simple: in industries
dominated by clear, durable, structural
barriers to e#ciency and productivity.—Umair Haque
21st Century Industrial Revolution
![Page 337: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/337.jpg)
IN 100 YEARSWe need a new Industrial Revolution that will define the stepping stones for the next hundred years. We need a deep examination of the impact that the Information Age will have on real people for generations to come.
![Page 338: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/338.jpg)
MOBILE IS WHERE THE
CONVERSATION STARTS
![Page 339: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/339.jpg)
MOBILE IS......the introduction to the larger concepts of how to address the user’s context in a multi-device environment...how to deal with data portability...about making content accessible to all people, regardless of location, education, or ability...how to leverage the mobile web, the social web, the desktop web, desktop software, and other emerging technologies to the benefit of your users.
![Page 340: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/340.jpg)
What do you think?
![Page 341: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/341.jpg)
http://mobiledesign.org
![Page 342: DESIGNING MOBILE EXPERIENCES](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e7bd4a795904268b45b6/html5/thumbnails/342.jpg)
My name is Brian Fling and I’m a Mobile Designer
twitter.com/fling
company: pinchzoom.com
blog: flingmedia.comFonts used: Archer & AvenirIllustrations by Simon Oxley (www.idokungfoo.com)
THANK YOU