with Brian FlingDESIGNINGMOBILEEXPERIENCES
AvailableNOWhttp://mobiledesign.org
HOUSEKEEPINGmobiledesign.orgmobiledesign.org/workshopflingmedia.comslideshare.net/flinglinkedin.com/in/fling@fling
The Layersof theMobileExperience
IDEA The first thing we need is an idea that inspires us.
NEEDS & GOALSIDEA The first thing we need is an idea that inspires us.Identify a basic need with our desired user.
CONTEXTNEEDS & GOALSIDEA The first thing we need is an idea that inspires us.Identify a basic need with our desired user.Th...
STRATEGYCONTEXTNEEDS & GOALSIDEA The first thing we need is an idea that inspires us.Identify a basic need with our desired...
DEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA The first thing we need is an idea that inspires us.Identify a basic need with ...
DESIGNDEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA The first thing we need is an idea that inspires us.Identify a basic need...
PROTOTYPEDESIGNDEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA The first thing we need is an idea that inspires us.Identify a b...
DEVELOPMENTPROTOTYPEDESIGNDEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA The first thing we need is an idea that inspires us.I...
TESTINGDEVELOPMENTPROTOTYPEDESIGNDEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA The first thing we need is an idea that inspir...
OPTIMIZATIONTESTINGDEVELOPMENTPROTOTYPEDESIGNDEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA The first thing we need is an idea...
PORTINGOPTIMIZATIONTESTINGDEVELOPMENTPROTOTYPEDESIGNDEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA The first thing we need is ...
DiscussionWhat do you want to learntoday?• Is it to create visual experiences?• Is it to take advantage of the mobileoppor...
What is MobileDesign?
JARGON ALERTMobile DesignThe creation of user experiencesfor the mobile context.
It doesn’t startwith Photoshop
WhyMobile?
What’s Next?
Generation Y97% own a computer94% own a mobile phone76% use Instant Messaging69% use Facebook56% own an iPod
Generation ZBorn in the modern digitalage. Technology is infused atbirth.
Generation ZBorn in the modern digitalage. Technology is infused atbirth.The iPhone is to them
Generation ZBorn in the modern digitalage. Technology is infused atbirth.The iPhone is to themas the Macintosh was to us.
The Mobile Generation2009 2010 2011 2012 2013 2014 2015Everyone Elsesource: us census bureau
In less five years, themobile generationcould have morebuying power than allother demographics
DiscussionWhy are you here?• What is it about mobile that appeals toyou the most?• What do you see as being the obstacles?...
NewRules
Rule #1Forget WhatYou ThinkYou Know
Palm2%Blackberry3%Windows Mobile5%Symbian6%Java ME7%Android7%iPhone69%
Rule #2Believe WhatYou See, NotWhat YouRead
Experiment
Share yourfindings
Rule #3ConstraintsNever ComeFirst
vs.
Rule #4Focus onContext,Goals andNeeds
Rule #5You Can’tSupportEverything
Palm2%Blackberry3%Windows Mobile5%Symbian6%Java ME7%Android7%iPhone69%
Rule #6Don’tConvert,Create
Rule #7Keep ItSimple
Needs&Goals
JARGON ALERTNeedsThe circumstances in whichsomething is necessary, or thatrequire some course of action.
Abraham Harold Maslow(April 1, 1908 – June 8, 1970)was an American psychologist.He is noted for his concept-ualization of ...
JARGON ALERTGoalsThe object of a persons ambitionor effort; an aim or desired result
User GoalsBusinessGoalsTechnicalGoalsSweetSpot
JARGON ALERTNeurolinguisticProgrammingA model of interpersonalcommunication chiefly concerned withthe relationship between ...
Learning TypeAuditory20% of all peopleconnect with others verballyis all they need to feelconnected and productivewith oth...
Learning TypeVisual35% of all peopleBeing able to see conceptsillustrated as diagrams orcharts and graphs is helpfulfor th...
Learning TypeKinesthetic45% of all peopleincorporate muscle memoryand hand-eye movement toprocess and retain newinformation
ExerciseNeeds & Goals• Let’s examine BBC• What human needs does the BBC serve?• What are the goals of the BBC’saudience?• ...
Context
JARGON ALERTContextThe circumstances that form thesetting for an event, statement, oridea, and in terms of which it canbe ...
ContextBIG CContext with a capital Cis how the user will derivevalue from somethingthey are currently doing.In other words...
contextlittle cThe mode, medium, orenvironment in which weperform a task or thecircumstances ofunderstanding.• our present...
PhysicalContextMy present location.My physical context willdictate how I accessinformation and thereforehow I derive value...
MediaContextMy device of access.The media context isn’tjust about the immediacyof the information wereceiveHow to engage p...
ModalContextOur present state ofmind.• Where should I eat?• Should I buy it now orlater?• Is this safe or not?
EventsTVBillboardRadioLiveAuditoryKinestheticVisualWord ofMouthPrint AdMobileDeviceQR
EventsTVBillboardRadioLiveWebsiteAuditoryKinestheticVisualWord ofMouthPrint AdMobileDeviceWAPSMSQR CodSMSQR CodeWAPSMSSMSB...
EventsTVBillboardRadioLiveWebsiteAuditoryKinestheticVisualWord ofMouthPrint AdMobileDeviceIVRSMSIVRSMSWAPSMSQR CodeSMSQR C...
EventsTVBillboardRadioLiveWebsiteAuditoryKinestheticVisualWord ofMouthPrint AdMobileDeviceIVRSMSIVRSMSWAPSMSQR CodeSMSQR C...
ExerciseDefine the Context• Again lets use the BBC as our example• What are the physical contexts?• What are the media con...
Typesof Apps
Types of AppsApplicationMedium
SMSExperiences where the goalis to alert users of newinformation.
WEBSITEExperiences that providethe user with simpleinformational data.
WIDGETSExperiences that are basedon an existing multi-platform framework.
WEBAPPSWhen you want to employ across-platform applicationstrategy.
NATIVEAPPSExperiences that takeadvantage of the nativefeatures of the device.
GAMESExperiences that entertain.
DeviceSupportComplexityUserExperienceLanguageOfflineSupportDeviceFeaturesInitial CostLong TermCostSMS All Simple Limited N...
Types of AppsApplicationContext
UTILITYA simple at-a-glance tool.
LOCALEAn application based onthe physical context.
INFORMATIVEAn application meant toinform.
PRODUCTIVITYMeant to increase ouravailable time.
IMMER-SIVEAn application meant todistract or entertain.
User Experience Type Task Type Task Duration Combine withUtility At-a-Glance Information Recall Very Short ImmersiveLocale...
MobileIA
KEEP ITSIMPLE
SITEMAPS
CLICKSTREAMS
!"#$"!"#$%&!(%)*(%)*"#$%&!"#$%&(%)*!(%)*%&&()!(%)*"#$%&(%)*!(%)*+),+),-&-&+), -&-&-&./$%&./$%&+),+),-&+),-&0123)
WIREFRAMES
PROTOTYPING
DIFFERENT IAFORDIFFERENTDEVICES?
ExerciseDesigning a MobileInformation Architecture• Lets build a mobile wireframe for theBBC• Sketch out an IA for both to...
THEDESIGNMYTH
BackNavigationTitle NewContent
MobileDesign
The Tent PoleThe business goal of a tent-poleproduction is to support or propup the losses from otherproductions.However, ...
vs.
Best Possible ExperienceIn mobile development, the risksand costs of creating that tent-pole product are just too high.Thi...
vs.iPhone The Rest
Elements of Mobile Design|CONTEXT|MESSAGE|LOOK & FEEL|LAYOUT|COLOR|TYPE|GRAPHICS
ContextWho are the users?What do you know about them?What type of behavior can you assumeor predict about the users?What i...
MessageWhat you are trying to say aboutyour site or application visually?Your message is the overall mentalimpression you ...
Look & FeelLook & Feel is used to describe theappearanceAs in “I want a clean look and feel”or “I want a usable look and f...
LayoutHow the user will visually processthe pageThe structural and visualcomponents of layout often getmerged together, cr...
ColorThe most common obstacle youencounter when dealing with coloris mobile screens.When complex designs aredisplayed on d...
TypographyHow type is rendered on mobilescreens:• subpixel-based screens• A subpixel is the division of eachpixel into a r...
TypographyHow type is rendered on mobilescreens:• pixel density or greater pixels perinch (PPI)The pixel density is determ...
GraphicsUse of images that are used toestablish or aid a visualexperience.Graphics can be used tosupplement the look and f...
Different Screen SizesMobile devices come in all shapesand sizes. Choice is great forconsumers, but bad for design.It can ...
The Right DeviceThe truly skilled designer doesn’tcreate just one product—theytranslate ideas into experiences.The spirit ...
ExerciseDesign Critique• Lets pick on the BBC one last time...• Does the current design addresscontext? If so how?• What m...
Web Appsvs.Native Apps
TheUbiquity Principle
JARGON ALERTUbiquity PrincipleThe easiest it is to producequality content and servicesfor the largest availablemarket will...
Reason #1Fragmentation
Getting your applicationon one platform is a snap,but getting it on two is achallenge, five a costlyheadache, and supportin...
Reason #2The Web
Anyone who’s bettingagainst the Web rightnow is an idiot.Daniel Appelquist,Co-Chair W3C Mobile Web Initiative
Reason #3Control
Mobile applicationdistribution cannotand will likely never beunder the control ofthe developer.
Reason #4ConsumerExpectations
Consumersexpect thingsto just work.
THE MOBILE WEB ISTHE ONLY LONG-TERMCOMMERCIALLYVIABLE CONTENTPLATFORM FORMOBILE DEVICES
When to make anative application?
CHARGINGMONEY
GAMES
GameGameGameGameGameGameGameGameGameGameGameGameGame
67%OF ALL PAID APPSARE GAMES
65%OF ALL FREE APPSAREN’T GAMES
LOCATION
CAMERA
ACCELERO-METERS
FILESYSTEM
OFFLINE
• Application Invocation• Application Settings• Camera• Communications Log• Gallery• Location• Messaging• Persistent Data•...
So what is the dealwith BONDI?
When to make aMobile Web App?
Mobile 2.0
Web 1.0ProprietaryWalled GardensFirst to marketBrand-centeredWeb 2.0StandardsWeb ServicesWeb as a PlatformUser-centered
What I Learned at Mobile 2.0#1 Mobile 2.0 = The webThe mobile web browser is thenext killer appMobile Web Applications are...
JARGON ALERTMobile 2.0The convergence of mobile servicesand web services. The promise ofMobile 2.0 is to add portability,u...
Widgets VoIPVideoTransactionsSocial MediaShoppingSearchQR CodesPoint of SaleMobile AdvertisingMicrobloggingMessaging Media...
sensoringbiometricstransactionslifestreamingrecommendationimage recognitionaugmented realitymobile connected gameslocation...
Mobile 1.0ProprietaryWalled GardensFirst to marketBrand-centeredMobile 2.0StandardsWeb ServicesWeb as a PlatformUser-cente...
Brick EraCandy Bar EraFeature Phone EraSmart Phone EraTouch Era1990 2000 201019801970Mobile Evolution
Change occursbecause there isa gap betweenwhat is and whatshould be.— Craig McCaw
the mythical“Future-Phone”
MobileWeb Dev
UsingWeb Standards
Multiple Mobile BrowsersDesigning and developing formultiple mobile browserssimultaneously is a challenge, butnot an impos...
Progressive Enhancement
LAYOUT
Fixed vs. Fluid
Multiple vs. SingleColumn Layouts
DEVICEPLANS
Class A Browsers• Excellent XHTML 1.0 support• Good HTML5 support; specifically,the canvas element and offlinestorage• Exce...
Class A Browsers• Excellent JavaScript support• Ability to toggle the display property• Support for DOM events, includingA...
Class B Browsers• Excellent XHTML 1.0 support• Good CSS Level 2.1 support (75% orhigher on the ACID2 test)• Padding, borde...
Class C Browsers• Good XHTML 1.0 support• Limited CSS Level 2.1 support (scores50 percent or higher on the ACID2test)• Lim...
Class D Browsers• Basic XHTML• Limited CSS support (CSS Level 1, ordoes not recognize cascading)• Minimum screen width: 12...
Class F Browsers• No (or very unreliable) CSS support• Poor table support or none at all• Basic forms: text field, select o...
The Device MatrixClass Markup CSS JavascriptClass A XHTML, XHTML-MP, HTML5 CSS2, CSS3 Great, includes DHTML, AjaxClass B X...
MARKUP
XHTMLThe same XHTML we use inweb browsers every day hasworked in most mobilebrowsers for over five years.
XHTML-MPA mobile version of XHTMLis supported on virtually allmodern mobile browsers.It is practically the same asXHTML Ba...
HTML5While HTML5 is still beingdefined, it is only supportedby a handful of Class Abrowsers.
CSS
CSS-MP
THE BOX MODELThe box model is one of thekey concepts of CSS design,and therefore the first thingthat tends to go wrong inmo...
Class A Class B Class C Class D Class FBox Model Great Good OK Poor FailTHE BOX MODEL
SELECTORSThe selector is used to tellwhich markup elements itshould apply rules to—basically, what makes CSSwork to contro...
Class A Class B Class C Class D Class FUniversal Yes Yes Yes Yes YesType Yes Yes Yes Yes FlakyDescendent Yes Yes Flaky Fla...
FONTS & TEXTThe typography options onmobile devices can be lessthan stellar, but like mostthings CSS-related, we areseeing...
Class A Class B Class C Class D Class FAvailable Fonts Web-safe Web-safeSans-serif andserifSans-serif andserifSans-serif a...
BOX PROPERTIESBeing able to style the boxarea around an element is acrucial part of web standardsdesign. Basic CSS level 2...
Class A Class B Class C Class D Class FHeight & Width Yes Yes Limited Flaky FlakyMin & Max dim Yes Flaky No No NoMargins Y...
COLORStyling an element meansdefining colors andbackground images. Relyingon CSS instead of images tocreate desired visual ...
Class A Class B Class C Class D Class FBackground color Yes Yes Yes Yes YesBackground image Yes Yes Yes Flaky FlakyMultipl...
PAGE FLOWCSS can also be used todefine the design layout ofthe page. Using positioningand page flow attributes, wecan add st...
Class A Class B Class C Class D Class FDisplay Yes Yes Yes Yes FlakyToggle Display Yes Yes Limited No NoFloats Yes Yes Lim...
JAVA-SCRIPT
Class A Class B Class C Class D Class FJavascript Support Yes Some No No NoDHTML Yes Limited No No NoAjax Yes Limited No N...
Don’t count on it.
iPhoneWeb Apps
What makes aMobile Web App?
URL BarBrowser Controls
What is WebKit?
Android Palm webOSNokia S60
Android Palm webOSNokia S60
Android Palm webOSNokia S60
Android Palm webOSNokia S60
98%OF ALL U.S. MOBILE WEBTRAFFIC IS COMING FROMWEBKIT
MARKUP
XHTMLThe iPhone and WebKitsupport the XHTML 1.0 Strictand Transitional doctype,which is the recommendedlanguage for writin...
XHTML-MPThe iPhone will renderXHTML Basic and XHTML-MP pages, but it won’t like it.Given the option to render adesktop ver...
HTML5HTML5 creates someinteresting newopportunities for mobile webapplications, like the canvaselement, offline storage,do...
CANVASThe canvas element allowsdesigners and developers toessentially draw contentwithin your HTML page. Thecanvas HTML ta...
OFFLINE DATAAlso part of HTML5 andsupported by WebKit and theiPhone is the ability to createclient-side data storagesystem...
CSS
CSS2The iPhone has excellentCSS2 support for a mobilebrowser. In fact, the iPhonemight render CSS a bit betterthan the des...
CSS3The iPhone supports themajority of the CSS3specification, allowing us tocreate visually stunning andbandwidth-friendly ...
JAVA-SCRIPT
Supported!
DemosCSS Image EffectsCSS TransformsFrameworksFixed Footer ScrollingMulti-touchStandalone Mode
NowWhat?
RAWKBe in the App Store.Charge money for your app.Be in full control of your app.Be able to define the designhow ever you w...
What’sNext
EVERYTHING
TomorrowTomorrow’s innovations will notonly involve mobile technology,but they will come from the mobileinvestments that a...
1985The Web is supposed to bring ustogether, but people feel moreisolated than ever.In a survey conducted in 1985,responde...
2006In 2006, a Duke University studyfound that the number of friendspeople felt they could talk to wasdown to two people.2...
GoMobile!Mobile technology by itsnature is designed tofacilitate interactionbetween people.It is portable, personal,and ub...
The Mobile Generation2009 2011 2013 2015Everyone Elsesource: us census bureau
Today’s investors, boardrooms, andentrepreneurs are looking for value in all thewrong places. Facebook’s game of musicalch...
IN 100 YEARSWe need a new IndustrialRevolution that will define thestepping stones for the nexthundred years.We need a deep...
MOBILE ISWHERE THECONVERSATIONSTARTS
MOBILE IS......the introduction to the larger concepts of howto address the user’s context in a multi-deviceenvironment......
What do youthink?
http://mobiledesign.org
My name is Brian Fling and I’m a Mobile Designertwitter.com/flingcompany: pinchzoom.comblog: flingmedia.comFonts used: Arc...
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Designing the mobile experience powerpoint
Upcoming SlideShare
Loading in...5
×

Designing the mobile experience powerpoint

699

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
699
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
71
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Designing the mobile experience powerpoint

  1. 1. with Brian FlingDESIGNINGMOBILEEXPERIENCES
  2. 2. AvailableNOWhttp://mobiledesign.org
  3. 3. HOUSEKEEPINGmobiledesign.orgmobiledesign.org/workshopflingmedia.comslideshare.net/flinglinkedin.com/in/fling@fling
  4. 4. The Layersof theMobileExperience
  5. 5. IDEA The first thing we need is an idea that inspires us.
  6. 6. NEEDS & GOALSIDEA The first thing we need is an idea that inspires us.Identify a basic need with our desired user.
  7. 7. CONTEXTNEEDS & GOALSIDEA 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.
  8. 8. STRATEGYCONTEXTNEEDS & GOALSIDEA 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.
  9. 9. DEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA 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.
  10. 10. DESIGNDEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA 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.
  11. 11. PROTOTYPEDESIGNDEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA 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.
  12. 12. DEVELOPMENTPROTOTYPEDESIGNDEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA 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.
  13. 13. TESTINGDEVELOPMENTPROTOTYPEDESIGNDEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA 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.
  14. 14. OPTIMIZATIONTESTINGDEVELOPMENTPROTOTYPEDESIGNDEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA 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.
  15. 15. PORTINGOPTIMIZATIONTESTINGDEVELOPMENTPROTOTYPEDESIGNDEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA 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.
  16. 16. DiscussionWhat do you want to learntoday?• Is it to create visual experiences?• Is it to take advantage of the mobileopportunity?• Is it to figure out how to make sense ofthis new medium?• Is it something more?• All of the above?
  17. 17. What is MobileDesign?
  18. 18. JARGON ALERTMobile DesignThe creation of user experiencesfor the mobile context.
  19. 19. It doesn’t startwith Photoshop
  20. 20. WhyMobile?
  21. 21. What’s Next?
  22. 22. Generation Y97% own a computer94% own a mobile phone76% use Instant Messaging69% use Facebook56% own an iPod
  23. 23. Generation ZBorn in the modern digitalage. Technology is infused atbirth.
  24. 24. Generation ZBorn in the modern digitalage. Technology is infused atbirth.The iPhone is to them
  25. 25. Generation ZBorn in the modern digitalage. Technology is infused atbirth.The iPhone is to themas the Macintosh was to us.
  26. 26. The Mobile Generation2009 2010 2011 2012 2013 2014 2015Everyone Elsesource: us census bureau
  27. 27. In less five years, themobile generationcould have morebuying power than allother demographics
  28. 28. DiscussionWhy are you here?• What is it about mobile that appeals toyou the most?• What do you see as being the obstacles?(your understanding? your company? thetechnology? etc.)• What are the biggest opportunities?
  29. 29. NewRules
  30. 30. Rule #1Forget WhatYou ThinkYou Know
  31. 31. Palm2%Blackberry3%Windows Mobile5%Symbian6%Java ME7%Android7%iPhone69%
  32. 32. Rule #2Believe WhatYou See, NotWhat YouRead
  33. 33. Experiment
  34. 34. Share yourfindings
  35. 35. Rule #3ConstraintsNever ComeFirst
  36. 36. vs.
  37. 37. Rule #4Focus onContext,Goals andNeeds
  38. 38. Rule #5You Can’tSupportEverything
  39. 39. Palm2%Blackberry3%Windows Mobile5%Symbian6%Java ME7%Android7%iPhone69%
  40. 40. Rule #6Don’tConvert,Create
  41. 41. Rule #7Keep ItSimple
  42. 42. Needs&Goals
  43. 43. JARGON ALERTNeedsThe circumstances in whichsomething is necessary, or thatrequire some course of action.
  44. 44. Abraham Harold Maslow(April 1, 1908 – June 8, 1970)was an American psychologist.He is noted for his concept-ualization of a "hierarchy ofhuman needs", and isconsidered the founder ofhumanistic psychology.
  45. 45. JARGON ALERTGoalsThe object of a persons ambitionor effort; an aim or desired result
  46. 46. User GoalsBusinessGoalsTechnicalGoalsSweetSpot
  47. 47. JARGON ALERTNeurolinguisticProgrammingA model of interpersonalcommunication chiefly concerned withthe relationship between successfulpatterns of behavior and the subjectiveexperiences underlying them.
  48. 48. Learning TypeAuditory20% of all peopleconnect with others verballyis all they need to feelconnected and productivewith others
  49. 49. Learning TypeVisual35% of all peopleBeing able to see conceptsillustrated as diagrams orcharts and graphs is helpfulfor this majority learningtype.
  50. 50. Learning TypeKinesthetic45% of all peopleincorporate muscle memoryand hand-eye movement toprocess and retain newinformation
  51. 51. ExerciseNeeds & Goals• Let’s examine BBC• What human needs does the BBC serve?• What are the goals of the BBC’saudience?• Does the BBC utilize neurolinguisticprogramming models? If so, how?• How do we document our findings?
  52. 52. Context
  53. 53. JARGON ALERTContextThe circumstances that form thesetting for an event, statement, oridea, and in terms of which it canbe fully understood and assessed.
  54. 54. ContextBIG CContext with a capital Cis how the user will derivevalue from somethingthey are currently doing.In other words, theunderstanding ofcircumstance. It is themental model they willestablish to formunderstanding.
  55. 55. contextlittle cThe mode, medium, orenvironment in which weperform a task or thecircumstances ofunderstanding.• our present location• our device of access• our state of mind
  56. 56. PhysicalContextMy present location.My physical context willdictate how I accessinformation and thereforehow I derive value from it.
  57. 57. MediaContextMy device of access.The media context isn’tjust about the immediacyof the information wereceiveHow to engage people inreal time.
  58. 58. ModalContextOur present state ofmind.• Where should I eat?• Should I buy it now orlater?• Is this safe or not?
  59. 59. EventsTVBillboardRadioLiveAuditoryKinestheticVisualWord ofMouthPrint AdMobileDeviceQR
  60. 60. EventsTVBillboardRadioLiveWebsiteAuditoryKinestheticVisualWord ofMouthPrint AdMobileDeviceWAPSMSQR CodSMSQR CodeWAPSMSSMSBluetoothWAPMMSMMS
  61. 61. EventsTVBillboardRadioLiveWebsiteAuditoryKinestheticVisualWord ofMouthPrint AdMobileDeviceIVRSMSIVRSMSWAPSMSQR CodeSMSQR CodeSMSMMSSMSWAPSMSSMSBluetoothNotifyWAPWAPMMSEmailSend toFriendWNoBWAP SiteWAP SiteJoinBuyMMSifyd tondDiscussSend toFriendNotifyBuySend toFriendNotify
  62. 62. EventsTVBillboardRadioLiveWebsiteAuditoryKinestheticVisualWord ofMouthPrint AdMobileDeviceIVRSMSIVRSMSWAPSMSQR CodeSMSQR CodeSMSSMSMMSSMSWAPSMSSMSBluetoothNotifyWAPWAPMMSEmailSend toFriendWAP SiteNotifyBuyWAP SiteWAP SiteSend toFriendJoinBuyNotifyNotifySend toFriendPost WAP SiteMMSSend toFriendNotifySend toFriendJoinDiscussSend toFriendNotifyDownloadDownloadNotifyVoteJoinVoteNotifyBuySend toFriendNotify
  63. 63. 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 businessstrategies simply by addressingcontext?
  64. 64. Typesof Apps
  65. 65. Types of AppsApplicationMedium
  66. 66. SMSExperiences where the goalis to alert users of newinformation.
  67. 67. WEBSITEExperiences that providethe user with simpleinformational data.
  68. 68. WIDGETSExperiences that are basedon an existing multi-platform framework.
  69. 69. WEBAPPSWhen you want to employ across-platform applicationstrategy.
  70. 70. NATIVEAPPSExperiences that takeadvantage of the nativefeatures of the device.
  71. 71. GAMESExperiences that entertain.
  72. 72. DeviceSupportComplexityUserExperienceLanguageOfflineSupportDeviceFeaturesInitial CostLong TermCostSMS All Simple Limited N/A No None Low HighMobileWebsitesAll Simple Limited HTML No None Low LowMobileWebWidgetsSome Medium Great HTML Limited Limited Low LowMobileWebApplicationSome Medium GreatHTML, CSS,JSLimited Limited Mid LowNativeApplicationAll Complex Excellent Various Yes Yes High MidGames All Complex Excellent Various Yes Yes Very High HighMEDIUM MATRIX
  73. 73. Types of AppsApplicationContext
  74. 74. UTILITYA simple at-a-glance tool.
  75. 75. LOCALEAn application based onthe physical context.
  76. 76. INFORMATIVEAn application meant toinform.
  77. 77. PRODUCTIVITYMeant to increase ouravailable time.
  78. 78. IMMER-SIVEAn application meant todistract or entertain.
  79. 79. User Experience Type Task Type Task Duration Combine withUtility At-a-Glance Information Recall Very Short ImmersiveLocale Location-based Contextual Information Quick ImmersiveInformative Content-based Seek Information Quick LocaleProductivity Task-based Content Management Long UtilityImmersive Full Screen Entertainment Long Utility, LocaleCONTEXT MATRIX
  80. 80. MobileIA
  81. 81. KEEP ITSIMPLE
  82. 82. SITEMAPS
  83. 83. CLICKSTREAMS
  84. 84. !"#$"!"#$%&!(%)*(%)*"#$%&!"#$%&(%)*!(%)*%&&()!(%)*"#$%&(%)*!(%)*+),+),-&-&+), -&-&-&./$%&./$%&+),+),-&+),-&0123)
  85. 85. WIREFRAMES
  86. 86. PROTOTYPING
  87. 87. DIFFERENT IAFORDIFFERENTDEVICES?
  88. 88. ExerciseDesigning a MobileInformation Architecture• Lets build a mobile wireframe for theBBC• Sketch out an IA for both touch andtraditional devices.• What are the primary navigation items?• How can you can you “tease” content?• How are they different? How are theythe same?
  89. 89. THEDESIGNMYTH
  90. 90. BackNavigationTitle NewContent
  91. 91. MobileDesign
  92. 92. The Tent PoleThe business goal of a tent-poleproduction is to support or propup the losses from otherproductions.However, to create a tent-poleproduction, the creators involvedmust make an artisticwork that they knowwill appeal to thelargest possibleaudience, providingsomething for everyone.
  93. 93. vs.
  94. 94. Best Possible ExperienceIn mobile development, the risksand costs of creating that tent-pole product are just too high.This lesson is so easily seenthrough bad or just plainuninspired mobile design.Asking creative peopleto create uninspiringwork is a fast trackto mediocrity.
  95. 95. vs.iPhone The Rest
  96. 96. Elements of Mobile Design|CONTEXT|MESSAGE|LOOK & FEEL|LAYOUT|COLOR|TYPE|GRAPHICS
  97. 97. ContextWho are the users?What do you know about them?What type of behavior can you assumeor predict about the users?What is happening?What are the circumstances in whichthe users will best absorb the contentyou intend to present?When will they interact?Are they at home and have largeamounts of time? Are they at workwhere they have short periods of time?Will they have idle periods of timewhile waiting for a train, for example?Where are the users?Are they in a public space or a privatespace? Are they inside or outside?Is it day or is it night?Why will they use your app?What value will they gain from yourcontent or services in their presentsituation?How are they using their mobiledevice?Is it held in their hand or in theirpocket?How are they holding it?Open or closed? Portrait or landscape?
  98. 98. MessageWhat you are trying to say aboutyour site or application visually?Your message is the overall mentalimpression you create explicitlythrough visual design.How someone willreact to your design?If you take a step back,and look at a designfrom a distance, whatis your impression?
  99. 99. Look & FeelLook & Feel is used to describe theappearanceAs 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?
  100. 100. LayoutHow the user will visually processthe pageThe structural and visualcomponents of layout often getmerged together, creatingconfusion and makingyour design moredifficult to produce.
  101. 101. ColorThe most common obstacle youencounter when dealing with coloris mobile screens.When complex designs aredisplayed on different mobiledevices, the limited color depthon one device can causebanding, or unwantedposterization in theimage.
  102. 102. TypographyHow type is rendered on mobilescreens:• subpixel-based screens• A subpixel is the division of eachpixel into a red, green, and blue(or RGB) unit at a micro-scopic level, enablingfor a greater level ofantialiasing for eachfont character or glyph.
  103. 103. TypographyHow type is rendered on mobilescreens:• pixel density or greater pixels perinch (PPI)The pixel density is determined bydividing width of the displayarea in pixels, by widthof the display area ininches.
  104. 104. GraphicsUse of images that are used toestablish or aid a visualexperience.Graphics can be used tosupplement the look and feel, or ascontent displayed inline with thetext.• Iconography• Photos & Images
  105. 105. Different Screen SizesMobile devices come in all shapesand sizes. Choice is great forconsumers, but bad for design.It can be incredibly difficult tocreate that best possible experiencefor a plethora of different screensizes.
  106. 106. The Right DeviceThe truly skilled designer doesn’tcreate just one product—theytranslate ideas into experiences.The spirit of your design should beable to be adapted to multipledevices.The days of tent-polesare gone.
  107. 107. ExerciseDesign Critique• Lets pick on the BBC one last time...• Does the current design addresscontext? If so how?• What message does it convey?• What about the look & feel?• What about layout?• What about color & type?• What about graphics?
  108. 108. Web Appsvs.Native Apps
  109. 109. TheUbiquity Principle
  110. 110. JARGON ALERTUbiquity PrincipleThe easiest it is to producequality content and servicesfor the largest availablemarket will always win.
  111. 111. Reason #1Fragmentation
  112. 112. Getting your applicationon one platform is a snap,but getting it on two is achallenge, five a costlyheadache, and supportingfifty virtually impossible.
  113. 113. Reason #2The Web
  114. 114. Anyone who’s bettingagainst the Web rightnow is an idiot.Daniel Appelquist,Co-Chair W3C Mobile Web Initiative
  115. 115. Reason #3Control
  116. 116. Mobile applicationdistribution cannotand will likely never beunder the control ofthe developer.
  117. 117. Reason #4ConsumerExpectations
  118. 118. Consumersexpect thingsto just work.
  119. 119. THE MOBILE WEB ISTHE ONLY LONG-TERMCOMMERCIALLYVIABLE CONTENTPLATFORM FORMOBILE DEVICES
  120. 120. When to make anative application?
  121. 121. CHARGINGMONEY
  122. 122. GAMES
  123. 123. GameGameGameGameGameGameGameGameGameGameGameGameGame
  124. 124. 67%OF ALL PAID APPSARE GAMES
  125. 125. 65%OF ALL FREE APPSAREN’T GAMES
  126. 126. LOCATION
  127. 127. CAMERA
  128. 128. ACCELERO-METERS
  129. 129. FILESYSTEM
  130. 130. OFFLINE
  131. 131. • Application Invocation• Application Settings• Camera• Communications Log• Gallery• Location• Messaging• Persistent Data• Personal Information• Phone Status• User InteractionAn initiative is defining new interfaces (Javascript APIs)and a security framework to enable the access to mobilephone functionalities.
  132. 132. So what is the dealwith BONDI?
  133. 133. When to make aMobile Web App?
  134. 134. Mobile 2.0
  135. 135. Web 1.0ProprietaryWalled GardensFirst to marketBrand-centeredWeb 2.0StandardsWeb ServicesWeb as a PlatformUser-centered
  136. 136. What I Learned at Mobile 2.0#1 Mobile 2.0 = The webThe mobile web browser is thenext killer appMobile Web Applications arethe futureJavascript is the next frontierRich Interactions kill battery lifeThe Mobile User ExperienceSucksMobile Widgets are the nextbig thingThe Carrier is the new “C” wordMobile Needs to Check Its EgoWe are creators not consumers
  137. 137. JARGON ALERTMobile 2.0The convergence of mobile servicesand web services. The promise ofMobile 2.0 is to add portability,ubiquitous connectivity and location-based services to enhance informationand services found on the web.
  138. 138. Widgets VoIPVideoTransactionsSocial MediaShoppingSearchQR CodesPoint of SaleMobile AdvertisingMicrobloggingMessaging Media SharingAudioPlatformsEnterpriseApp StoresImagingLocation-based
  139. 139. sensoringbiometricstransactionslifestreamingrecommendationimage recognitionaugmented realitymobile connected gameslocation-based social mediaretail proximity mediaconsumptionHot Trends
  140. 140. Mobile 1.0ProprietaryWalled GardensFirst to marketBrand-centeredMobile 2.0StandardsWeb ServicesWeb as a PlatformUser-centered
  141. 141. Brick EraCandy Bar EraFeature Phone EraSmart Phone EraTouch Era1990 2000 201019801970Mobile Evolution
  142. 142. Change occursbecause there isa gap betweenwhat is and whatshould be.— Craig McCaw
  143. 143. the mythical“Future-Phone”
  144. 144. MobileWeb Dev
  145. 145. UsingWeb Standards
  146. 146. Multiple Mobile BrowsersDesigning and developing formultiple mobile browserssimultaneously is a challenge, butnot an impossibility.It requires looking at your designsand code from many contexts.Being able to visualizehow your designs willbe rendered on avariety of devices inyour head, as you lay down code.
  147. 147. Progressive Enhancement
  148. 148. LAYOUT
  149. 149. Fixed vs. Fluid
  150. 150. Multiple vs. SingleColumn Layouts
  151. 151. DEVICEPLANS
  152. 152. Class A Browsers• Excellent XHTML 1.0 support• Good HTML5 support; specifically,the canvas element and offlinestorage• Excellent CSS support, includingmost of CSS Level 2.1 (scores 90percent or higher on the ACID2 test)and the majority of CSS Level 3(scores 75 percent or higher on theACID3 test)• Support for web standards layouts,including absolute positioning, floats,and complex CSS-based layouts• Support for image replacementtechniques
  153. 153. Class A Browsers• Excellent JavaScript support• Ability to toggle the display property• Support for DOM events, includingAjax• Considered comparable to a“desktop-grade” browser
  154. 154. Class B Browsers• Excellent XHTML 1.0 support• Good CSS Level 2.1 support (75% orhigher on the ACID2 test)• Padding, border, and marginproperties are correctly applied• Can reliably apply colors to links,text, and background• Supports image replacementtechniques• Can support complex tables—notnecessarily nested tables• Setting a font size of 10 pixels ormore produces readable text• Has limited JavaScript support, min.toggle the display property
  155. 155. Class C Browsers• Good XHTML 1.0 support• Limited CSS Level 2.1 support (scores50 percent or higher on the ACID2test)• Limited or no JavaScript support
  156. 156. Class D Browsers• Basic XHTML• Limited CSS support (CSS Level 1, ordoes not recognize cascading)• Minimum screen width: 120 pixels• Hyperlinks may not be colorable byCSS• Basic table support: 2 or morecolspan and rowspan may not besupported• No JavaScript support• “Width” expressed as a percentagemay be unreliable
  157. 157. 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 inputmask on fields• No JavaScript support
  158. 158. The Device MatrixClass Markup CSS JavascriptClass A XHTML, XHTML-MP, HTML5 CSS2, CSS3 Great, includes DHTML, AjaxClass B XHTML, XHTML-MP CSS2 (Decent) Limited, some DHTMLClass C XHTML, XHTML-MP CSS2 (Limited) LimitedClass D XHTML-MP CSS2 (Basic) NoneClass F XHTML-MP, WML None None
  159. 159. MARKUP
  160. 160. XHTMLThe same XHTML we use inweb browsers every day hasworked in most mobilebrowsers for over five years.
  161. 161. XHTML-MPA mobile version of XHTMLis supported on virtually allmodern mobile browsers.It is practically the same asXHTML Basic.
  162. 162. HTML5While HTML5 is still beingdefined, it is only supportedby a handful of Class Abrowsers.
  163. 163. CSS
  164. 164. CSS-MP
  165. 165. THE BOX MODELThe box model is one of thekey concepts of CSS design,and therefore the first thingthat tends to go wrong inmobile devices. The boxmodel is the imaginary boxthat is around every elementin your markup.
  166. 166. Class A Class B Class C Class D Class FBox Model Great Good OK Poor FailTHE BOX MODEL
  167. 167. SELECTORSThe selector is used to tellwhich markup elements itshould apply rules to—basically, what makes CSSwork to control thepresentation.
  168. 168. Class A Class B Class C Class D Class FUniversal Yes Yes Yes Yes YesType Yes Yes Yes Yes FlakyDescendent Yes Yes Flaky Flaky NoChild Yes Yes Flaky Flaky NoAdjacent Yes Yes Flaky No NoClass Yes Yes Yes Yes FlakyID Yes Yes Yes Yes FlakySimple Attribute Yes Flaky No No NoAdvanced Attribute Yes No No No NoPseudoselector Yes Flaky No No NoSELECTORS
  169. 169. FONTS & TEXTThe typography options onmobile devices can be lessthan stellar, but like mostthings CSS-related, we areseeing mobile browsers movecloser to their desktopcousins in this respect.
  170. 170. Class A Class B Class C Class D Class FAvailable Fonts Web-safe Web-safeSans-serif andserifSans-serif andserifSans-serif andserifFont Size Any Any Keyword Keyword KeywordFont-weight Yes Yes Yes Yes LimitedFont-style Yes Yes Yes Yes LimitedText-transform Yes Yes Yes Yes LimitedText-decoration Yes Yes Yes Yes FlakyLine-height Yes Yes Yes Yes FlakyText-align Yes Yes Yes Yes YesWhite-space Yes Yes Yes Limited FlakyText Shadow Yes No No No NoFont replacement Limited No No No NoFONTS & TEXT
  171. 171. BOX PROPERTIESBeing able to style the boxarea around an element is acrucial part of web standardsdesign. Basic CSS level 2 boxstyling techniques work wellon most mobile devices,allowing you to style contentwith some level of precision.
  172. 172. Class A Class B Class C Class D Class FHeight & Width Yes Yes Limited Flaky FlakyMin & Max dim Yes Flaky No No NoMargins Yes Yes Yes Yes LimitedPadding Yes Yes Yes Flaky FlakyBorders Advanced Limited Limited Flaky FlakyBox Shadow Yes No No No NoBOX PROPERTIES
  173. 173. COLORStyling an element meansdefining colors andbackground images. Relyingon CSS instead of images tocreate desired visual effectsreduces time to download aswell as cost.
  174. 174. Class A Class B Class C Class D Class FBackground color Yes Yes Yes Yes YesBackground image Yes Yes Yes Flaky FlakyMultiplebackground imagesYes No No No NoCOLOR
  175. 175. PAGE FLOWCSS can also be used todefine the design layout ofthe page. Using positioningand page flow attributes, wecan add style to the page andhelp make it easier to read orinteract with on smallscreens.
  176. 176. Class A Class B Class C Class D Class FDisplay Yes Yes Yes Yes FlakyToggle Display Yes Yes Limited No NoFloats Yes Yes Limited Limited FlakyClearing Yes Yes Limited Limited FlakyPositioning Yes Yes Limited Flaky NoOverflow Yes Limited Flaky No NoStacking Order Yes Yes Limited Flaky NoPAGE FLOW
  177. 177. JAVA-SCRIPT
  178. 178. Class A Class B Class C Class D Class FJavascript Support Yes Some No No NoDHTML Yes Limited No No NoAjax Yes Limited No No NoJAVASCRIPT
  179. 179. Don’t count on it.
  180. 180. iPhoneWeb Apps
  181. 181. What makes aMobile Web App?
  182. 182. URL BarBrowser Controls
  183. 183. What is WebKit?
  184. 184. Android Palm webOSNokia S60
  185. 185. Android Palm webOSNokia S60
  186. 186. Android Palm webOSNokia S60
  187. 187. Android Palm webOSNokia S60
  188. 188. 98%OF ALL U.S. MOBILE WEBTRAFFIC IS COMING FROMWEBKIT
  189. 189. MARKUP
  190. 190. XHTMLThe iPhone and WebKitsupport the XHTML 1.0 Strictand Transitional doctype,which is the recommendedlanguage for writing iPhoneweb apps.
  191. 191. XHTML-MPThe iPhone will renderXHTML Basic and XHTML-MP pages, but it won’t like it.Given the option to render adesktop version, or a mobileor WAP version of a site, theiPhone will render thedesktop version.
  192. 192. HTML5HTML5 creates someinteresting newopportunities for mobile webapplications, like the canvaselement, offline storage,document editing, and mediaplayback.
  193. 193. CANVASThe canvas element allowsdesigners and developers toessentially draw contentwithin your HTML page. Thecanvas HTML tag defines acustom drawing area withinyour content that you canthen access as a JavaScriptobject and draw upon.
  194. 194. OFFLINE DATAAlso part of HTML5 andsupported by WebKit and theiPhone is the ability to createclient-side data storagesystems, which essentiallyallow you to create webapplications that work whenoffline.
  195. 195. CSS
  196. 196. CSS2The iPhone has excellentCSS2 support for a mobilebrowser. In fact, the iPhonemight render CSS a bit betterthan the desktop webbrowser you’re using thesedays.
  197. 197. CSS3The iPhone supports themajority of the CSS3specification, allowing us tocreate visually stunning andbandwidth-friendly designsusing minimal amounts ofcode.
  198. 198. JAVA-SCRIPT
  199. 199. Supported!
  200. 200. DemosCSS Image EffectsCSS TransformsFrameworksFixed Footer ScrollingMulti-touchStandalone Mode
  201. 201. NowWhat?
  202. 202. RAWKBe in the App Store.Charge money for your app.Be in full control of your app.Be able to define the designhow ever you want.Spend less making your app.Increase your profitability.Support multiple devices.
  203. 203. What’sNext
  204. 204. EVERYTHING
  205. 205. TomorrowTomorrow’s innovations will notonly involve mobile technology,but they will come from the mobileinvestments that are made today.This won’t be because of the iPhoneor Android phones,operators, or the bigdevice makers, butbecause of people.
  206. 206. 1985The Web is supposed to bring ustogether, but people feel moreisolated than ever.In a survey conducted in 1985,respondents said that they had atleast three close friendsthey felt they couldtalk to aboutimportant issues.
  207. 207. 2006In 2006, a Duke University studyfound that the number of friendspeople felt they could talk to wasdown to two people.25 percent stated they had noclose friends at all.
  208. 208. GoMobile!Mobile technology by itsnature is designed tofacilitate interactionbetween people.It is portable, personal,and ubiquitouslyconnected.It enables us to not just tocommunicate in real time,but to collaborate.
  209. 209. The Mobile Generation2009 2011 2013 2015Everyone Elsesource: us census bureau
  210. 210. Today’s investors, boardrooms, andentrepreneurs are looking for value in all thewrong places. Facebook’s game of musicalchairs won’t solve big economic problems—and neither will making token investments ingreen tech.Where is the next industrial revolution cryingout for revolutionaries? Simple: in industriesdominated by clear, durable, structuralbarriers to efficiency and productivity.—Umair Haque21st Century Industrial Revolution
  211. 211. IN 100 YEARSWe need a new IndustrialRevolution that will define thestepping stones for the nexthundred years.We need a deep examination of theimpact that the InformationAge will have on realpeople for generationsto come.
  212. 212. MOBILE ISWHERE THECONVERSATIONSTARTS
  213. 213. MOBILE IS......the introduction to the larger concepts of howto address the user’s context in a multi-deviceenvironment...how to deal with data portability...about making content accessible to all people,regardless of location, education,or ability...how to leverage the mobileweb, the social web, thedesktop web, desktopsoftware, and otheremerging technologiesto the benefit of your users.
  214. 214. What do youthink?
  215. 215. http://mobiledesign.org
  216. 216. My name is Brian Fling and I’m a Mobile Designertwitter.com/flingcompany: pinchzoom.comblog: flingmedia.comFonts used: Archer & AvenirIllustrations by Simon Oxley (www.idokungfoo.com)THANK YOU
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×