DESIGNINGMOBILEEXPERIENCESwith Brian Fling
AvailableNOWhttp://mobiledesign.org
HOUSEKEEPINGmobiledesign.orgmobiledesign.org/workshopflingmedia.comslideshare.net/flinglinkedin.com/in/fling@fling
The Layers  of the  MobileExperience
IDEA   The first thing we need is an idea that inspires us.
NEEDS & GOALS      Identify a basic need with our desired user.   IDEA         The first thing we need is an idea that insp...
CONTEXT        The circumstances where information adds value.NEEDS & GOALS      Identify a basic need with our desired us...
STRATEGY         How we can add value to the business. CONTEXT        The circumstances where information adds value.NEEDS...
DEVICE PLAN      Choose the devices that best serves our audience.  STRATEGY         How we can add value to the business....
DESIGN         Create a user experience based around needs.DEVICE PLAN       Choose the devices that best serves our audie...
PROTOTYPE      Test the experience within the context.  DESIGN         Create a user experience based around needs. DEVICE...
DEVELOPMENT       Put all the pieces together.PROTOTYPE      Test the experience within the context.  DESIGN         Creat...
TESTING        And test, and test, and test some more.DEVELOPMENT       Put all the pieces together.PROTOTYPE      Test th...
OPTIMIZATION        Reduce all assets to its lowest possible size.  TESTING        And test, and test, and test some more....
PORTING            Adapt for other devices that fit our strategy.OPTIMIZATION        Reduce all assets to its lowest possib...
DiscussionWhat do you want to learntoday?• Is it to create visual experiences?• Is it to take advantage of the mobile  opp...
What is Mobile  Design?
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 Z Born in the modern digitalage. Technology is infused at           birth.
Generation Z Born in the modern digitalage. Technology is infused at           birth.   The iPhone is to them
Generation Z Born in the modern digitalage. Technology is infused at           birth.   The iPhone is to themas the Macint...
The Mobile Generation2009 2010 2011 2012 2013 2014 2015      Everyone Else                              source: us census ...
In less five years, the  mobile generation   could have morebuying power than all other demographics
DiscussionWhy are you here?• What is it about mobile that appeals to  you the most?• What do you see as being the obstacle...
NewRules
RuleForg #1     et W You     hat     ThinYou       k    Kno        w
Android           7%              Java ME                7%iPhone         Symbian 69%             6%            Windows Mo...
RuleBelie #2     ve WYou        hat    See,Wha Not     t You  Read
Experiment
Share your findings
Rule Con #3    straiNev       nts   er C        ome  First
vs.
Rule  Focu      #4       s on Con      text,Goa   ls an Nee     d     ds
Rule  You       #5       Can  Supp ’tEver    ort     ythin          g
Android           7%              Java ME                7%iPhone         Symbian 69%             6%            Windows Mo...
Rule           #6  DonCon    ’t   vertCrea      ,     te
Rule       # Keep   7Simp  It     le
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 e ort; an aim or desired result
Te         ls      oa                       ch   sG                       nic es                           al             ...
JARGON ALERTNeurolinguisticProgrammingA model of interpersonalcommunication chiefly concerned withthe relationship between ...
Lear                ni     Aud            ng T                        ype   20%   itory       o    f all conn      ect w  ...
Lear                   ni  ng T         Visu              ype     35%      al             of al   Bein         g ab       ...
Lear    Kine        ni   ng T                         ype        sthe   45  % of               all p                      ...
ExerciseNeeds & Goals• Let’s examine BBC• What human needs does the BBC serve?• What are the goals of the BBC’s  audience?...
Context
JARGON ALERTContextThe circumstances that form thesetting for an event, statement, oridea, and in terms of which it canbe ...
Context with a capital CContext   is how the user will derive BIG C    value from something          they are currently do...
The mode, medium, orcontext     environment in which we little c   perform a task or the            circumstances of      ...
My present location.Physical           My physical context willContext    dictate how I access           information and t...
My device of access. Media          The media context isn’tContext   just about the immediacy          of the information ...
Our present state ofModal     mind.Context   • Where should I eat?          • Should I buy it now or            later?    ...
Radio                    TV    Live                                                Billboard                         ry   ...
WAP             Bluetooth                                             Radio                  TV                           ...
WAP                       Discuss                                                                  IVR                    ...
Join            Down                                                                             Notify                   ...
ExerciseDefine the Context• Again lets use the BBC as our example• What are the physical contexts?• What are the media con...
Typesof Apps
Type      sApp       of A              pps    licat Med      ion      ium
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.
WEB  APPSWhen you want to employ across-platform applicationstrategy.
NATIVE APPSExperiences that takeadvantage of the nativefeatures of the device.
GAMESExperiences that entertain.
MEDIUM MATRIX               Device                   User                    Offline    Device                   Long Term...
Type      sApp       of A              pps    licat Con      ion     text
UTILITYA simple at-a-glance tool.
LOCALEAn application based onthe physical context.
INFORM ATIVEAn application meant toinform.
PRODUC TIVITYMeant to increase ouravailable time.
IMMER-  SIVEAn application meant todistract or entertain.
CONTEXT MATRIX               User Experience Type         Task Type          Task Duration   Combine with   Utility       ...
Mobile IA
KEEP ITSIMPLE
SITEMAPS
CLICKSTREAMS
!"#$"  !      -&   (%)*                ./$%&         (%)*                       ./$%& +),              "#$%&   +),        ...
WIREFRAMES
PROTOTYPING
DIFFERENT IA    FOR DIFFERENT  DEVICES?
ExerciseDesigning a MobileInformation Architecture• Lets build a mobile wireframe for the  BBC• Sketch out an IA for both ...
THEDESIGN MYTH
Back      Title     New       Content       Navigation
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?                        Where are the users?What do you know about them?              Are they in...
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 each  pixel into a...
TypographyHow type is rendered on mobilescreens:• pixel density or greater pixels per  inch (PPI)The pixel density is dete...
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 address  context? If so how?• What...
Web Apps    vs.Native Apps
TheUbiquity Principle
JARGON ALERTUbiquity Principle The easiest it is to produce quality content and services for the largest available market ...
ReasFrag    on #     mentat            1                ion
Getting your applicationon one platform is a snap, but getting it on two is a  challenge, five a costlyheadache, and suppor...
Reas     on #The      2      Web
Anyone who’s bettingagainst the Web rightnow is an idiot.Daniel Appelquist,Co-Chair W3C Mobile Web Initiative
Reas     on #Con       3    trol
Mobile application  distribution cannotand will likely never be under the control of     the developer.
Reas  Con    on #            4Expe  sum            er     ctati           ons
Consumersexpect thingsto just work.
THE MOBILE WEB IS THE ONLY LONG-      TERM COMMERCIALLY VIABLE CONTENT  PLATFORM FOR MOBILE DEVICES
When to make anative application?
CHARGING MONEY
GAMES
Game   GameGame   Game   GameGame          GameGame   Game       Game   GameGame          Game
67%OF ALL PAID APPS  ARE GAMES
65%OF ALL FREE APPS AREN’T GAMES
LOCATION
CAMERA
ACCELERO- METERS
FILESYSTEM
OFFLINE
An initiative is defining new interfaces (Javascript APIs)and a security framework to enable the access to mobilephone fun...
So what is the deal  with BONDI?
When to make aMobile Web App?
Mobile 2.0
Web 1.0        Web 2.0    Proprietary   StandardsWalled Gardens    Web ServicesFirst to market   Web as a PlatformBrand-ce...
What I Learned at Mobile 2.0#1 Mobile 2.0 = The web               The Mobile User Experience                              ...
JARGON ALERTMobile 2.0The convergence of mobile servicesand web services. The promise ofMobile 2.0 is to add portability,u...
Enterprise     Mobile AdvertisingMicroblogging Location-based             Audio  Imaging   Video   App Stores Messaging   ...
Hot Trendssensoring           augmented realitybiometrics          mobile connected gamestransactions        location-base...
Mobile 1.0        Mobile 2.0    Proprietary   StandardsWalled Gardens    Web ServicesFirst to market   Web as a PlatformBr...
Mobile Evolution        Brick Era   Candy Bar EraFeature Phone Era Smart Phone Era       Touch Era                    1970...
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. Single Column Layouts
DEVICEPLANS
Class A Browsers• Excellent XHTML 1.0 support• Good HTML5 support; specifically,  the canvas element and o ine  storage• Ex...
Class A Browsers• Excellent JavaScript support• Ability to toggle the display property• Support for DOM events, including ...
Class B Browsers• Excellent XHTML 1.0 support• Good CSS Level 2.1 support (75% or  higher on the ACID2 test)• Padding, bor...
Class C Browsers• Good XHTML 1.0 support• Limited CSS Level 2.1 support (scores  50 percent or higher on the ACID2  test)•...
Class D Browsers• Basic XHTML• Limited CSS support (CSS Level 1, or  does not recognize cascading)• Minimum screen width: ...
Class F Browsers• No (or very unreliable) CSS support• Poor table support or none at all• Basic forms: text field, select o...
The Device Matrix Class           Markup                 CSS                 JavascriptClass A   XHTML, XHTML-MP, HTML5   ...
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...
THE BOX MODEL            Class A   Class B   Class C   Class D   Class FBox Model   Great     Good       OK        Poor   ...
SELECTORSThe selector is used to tellwhich markup elements itshould apply rules to—basically, what makes CSSwork to contro...
SELECTORS                     Class A   Class B   Class C   Class D   Class F    Universal         Yes       Yes       Yes...
FONTS & TEXTThe typography options onmobile devices can be lessthan stellar, but like mostthings CSS-related, we areseeing...
FONTS & TEXT                   Class A    Class B      Class C          Class D          Class F                          ...
BOX PROPERTIESBeing able to style the boxarea around an element is acrucial part of web standardsdesign. Basic CSS level 2...
BOX PROPERTIES                  Class A   Class B   Class C   Class D   Class FHeight & Width     Yes       Yes      Limit...
COLORStyling an element meansdefining colors andbackground images. Relyingon CSS instead of images tocreate desired visual ...
COLOR                    Class A   Class B   Class C   Class D    Class FBackground color     Yes       Yes       Yes     ...
PAGE FLOWCSS can also be used todefine the design layout ofthe page. Using positioningand page flow attributes, wecan add st...
PAGE FLOW                 Class A   Class B   Class C   Class D    Class F   Display        Yes       Yes       Yes       ...
JAVA-SCRIPT
JAVASCRIPT                     Class A   Class B   Class C   Class D   Class FJavascript Support    Yes      Some        N...
Don’t count on it.
iPhoneWeb Apps
What makes aMobile Web App?
URL BarBrowser Controls
What is WebKit?
Android   Palm webOS                       Nokia S60
Android   Palm webOS                       Nokia S60
Android   Palm webOS                       Nokia S60
Android   Palm webOS                       Nokia S60
98% OF ALL U.S. MOBILE WEBTRAFFIC IS COMING FROM         WEBKIT
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, o ine storage,docu...
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 E ectsCSS 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’s Next
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...
Mobile technology by its Go       nature is designed toMobile!   facilitate interaction          between people.          ...
The Mobile Generation   2009   2011   2013   2015    Everyone Else                        source: us census bureau
Toda                  y’s i          entr          nves               epre          tors         wron        neur         ...
IN 100 YEARSWe need a new IndustrialRevolution that will define thestepping stones for the nexthundred years.We need a deep...
MOBILE IS WHERE THECONVERSATION   STARTS
MOBILE IS......the introduction to the larger concepts of howto address the user’s context in a multi-deviceenvironment......
What do you  think?
http://mobiledesign.org
THANK YOUMy name is Brian Fling and I’m a Mobile Designertwitter.com/flingcompany: pinchzoom.comblog: flingmedia.comFonts ...
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
Upcoming SlideShare
Loading in...5
×

DESIGNING MOBILE EXPERIENCES

703

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
703
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
34
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

DESIGNING MOBILE EXPERIENCES

  1. 1. DESIGNINGMOBILEEXPERIENCESwith Brian Fling
  2. 2. AvailableNOWhttp://mobiledesign.org
  3. 3. HOUSEKEEPINGmobiledesign.orgmobiledesign.org/workshopflingmedia.comslideshare.net/flinglinkedin.com/in/fling@fling
  4. 4. The Layers of the MobileExperience
  5. 5. IDEA The first thing we need is an idea that inspires us.
  6. 6. NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
  7. 7. CONTEXT The circumstances where information adds value.NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
  8. 8. STRATEGY How we can add value to the business. CONTEXT The circumstances where information adds value.NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
  9. 9. DEVICE PLAN Choose the devices that best serves our audience. STRATEGY How we can add value to the business. CONTEXT The circumstances where information adds value.NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
  10. 10. DESIGN Create a user experience based around needs.DEVICE PLAN Choose the devices that best serves our audience. STRATEGY How we can add value to the business. CONTEXT The circumstances where information adds value.NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
  11. 11. PROTOTYPE Test the experience within the context. DESIGN Create a user experience based around needs. DEVICE PLAN Choose the devices that best serves our audience. STRATEGY How we can add value to the business. CONTEXT The circumstances where information adds value. NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
  12. 12. DEVELOPMENT Put all the pieces together.PROTOTYPE Test the experience within the context. DESIGN Create a user experience based around needs. DEVICE PLAN Choose the devices that best serves our audience. STRATEGY How we can add value to the business. CONTEXT The circumstances where information adds value. NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
  13. 13. TESTING And test, and test, and test some more.DEVELOPMENT Put all the pieces together.PROTOTYPE Test the experience within the context. DESIGN Create a user experience based around needs. DEVICE PLAN Choose the devices that best serves our audience. STRATEGY How we can add value to the business. CONTEXT The circumstances where information adds value. NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
  14. 14. OPTIMIZATION Reduce all assets to its lowest possible size. TESTING And test, and test, and test some more.DEVELOPMENT Put all the pieces together.PROTOTYPE Test the experience within the context. DESIGN Create a user experience based around needs. DEVICE PLAN Choose the devices that best serves our audience. STRATEGY How we can add value to the business. CONTEXT The circumstances where information adds value. NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
  15. 15. PORTING Adapt for other devices that fit our strategy.OPTIMIZATION Reduce all assets to its lowest possible size. TESTING And test, and test, and test some more.DEVELOPMENT Put all the pieces together.PROTOTYPE Test the experience within the context. DESIGN Create a user experience based around needs. DEVICE PLAN Choose the devices that best serves our audience. STRATEGY How we can add value to the business. CONTEXT The circumstances where information adds value. NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
  16. 16. DiscussionWhat do you want to learntoday?• 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?
  17. 17. What is Mobile Design?
  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 Z Born in the modern digitalage. Technology is infused at birth.
  24. 24. Generation Z Born in the modern digitalage. Technology is infused at birth. The iPhone is to them
  25. 25. Generation Z Born in the modern digitalage. Technology is infused at birth. The iPhone is to themas the Macintosh was to us.
  26. 26. The Mobile Generation2009 2010 2011 2012 2013 2014 2015 Everyone Else source: us census bureau
  27. 27. In less five years, the mobile generation could have morebuying power than all other demographics
  28. 28. 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?
  29. 29. NewRules
  30. 30. RuleForg #1 et W You hat ThinYou k Kno w
  31. 31. Android 7% Java ME 7%iPhone Symbian 69% 6% Windows Mobile 5% Blackberry 3% Palm 2%
  32. 32. RuleBelie #2 ve WYou hat See,Wha Not t You Read
  33. 33. Experiment
  34. 34. Share your findings
  35. 35. Rule Con #3 straiNev nts er C ome First
  36. 36. vs.
  37. 37. Rule Focu #4 s on Con text,Goa ls an Nee d ds
  38. 38. Rule You #5 Can Supp ’tEver ort ythin g
  39. 39. Android 7% Java ME 7%iPhone Symbian 69% 6% Windows Mobile 5% Blackberry 3% Palm 2%
  40. 40. Rule #6 DonCon ’t vertCrea , te
  41. 41. Rule # Keep 7Simp It le
  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 e ort; an aim or desired result
  46. 46. Te ls oa ch sG nic es al Sweetsin G oa SpotBu ls User Goals
  47. 47. JARGON ALERTNeurolinguisticProgrammingA model of interpersonalcommunication chiefly concerned withthe relationship between successfulpatterns of behavior and the subjectiveexperiences underlying them.
  48. 48. Lear ni Aud ng T ype 20% itory o f all conn ect w peop is al ith oth leconn l they n ers verb ecte eed d an to fe ally with d pro el othe ductive rs
  49. 49. Lear ni ng T Visu ype 35% al of al Bein g ab l peop illus trate le to see c lechar ts an d as dia onceptsfor t d gra gram his m phs s or ajor is he ity le lpful type arni . ng
  50. 50. Lear Kine ni ng T ype sthe 45 % of all p tic inco rpor eopland hand ate m uscl e proc -eye e me ess a movem mory nd re ent t infor tain o mat new ion
  51. 51. 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?
  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. Context with a capital CContext is how the user will derive BIG C 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.
  55. 55. The mode, medium, orcontext environment in which we little c perform a task or the circumstances of understanding. • our present location • our device of access • our state of mind
  56. 56. My present location.Physical My physical context willContext dictate how I access information and therefore how I derive value from it.
  57. 57. My device of access. Media The media context isn’tContext just about the immediacy of the information we receive How to engage people in real time.
  58. 58. Our present state ofModal mind.Context • Where should I eat? • Should I buy it now or later? • Is this safe or not?
  59. 59. Radio TV Live Billboard ry Vi to su di al AuWord of Print AdMouth Kinesthetic Mobile Events Device QR
  60. 60. WAP Bluetooth Radio TV SMS SMS Live Billboard WAP ry Vi toMMS su di al Au QR Cod Word of Print Ad MouthSMS Kinesthetic SMS WAP Mobile Events Device QR Code Website MMS
  61. 61. WAP Discuss IVR SMS Buy SMS IVR Notify Send to Friend WAP Bluetooth Radio TV Send to Friend Notify SMS SMS Live Billboardd to B nd WAP ry Vi to MMS su di al Au W QR Code Word of Print Ad Mouth SMSify Kinesthetic No SMS WAP Mobile Events Buy Device Send to Friend QR Code Website MMS Join Notify SMS SMS Email WAP Site MMS WAP Site
  62. 62. Join Down Notify load Vote Vote Down load Notify WAP Discuss IVR SMS Buy SMS IVR Notify Send to Friend WAP Bluetooth Radio TV Send to Friend Notify SMS SMS Live BillboardSend to Buy Friend WAP ry Vi to MMS su di al AuJoin WAP Site QR Code Word of Print Ad Mouth SMSNotify Kinesthetic Notify SMS WAP Mobile Events Buy Device Send to Friend QR Code Website MMS Join Notify SMS SMS Email WAP Site MMS WAP Site SMS Send to Friend Send to Friend Notify Notify Post WAP Site Send to Friend
  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 business strategies simply by addressing context?
  64. 64. Typesof Apps
  65. 65. Type sApp of A pps licat Med ion ium
  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. WEB APPSWhen you want to employ across-platform applicationstrategy.
  70. 70. NATIVE APPSExperiences that takeadvantage of the nativefeatures of the device.
  71. 71. GAMESExperiences that entertain.
  72. 72. MEDIUM MATRIX Device User Offline Device Long Term Complexity Language Initial Cost Support Experience Support Features CostSMS All Simple Limited N/A No None Low HighMobile All Simple Limited HTML No None Low LowWebsitesMobileWeb Some Medium Great HTML Limited Limited Low LowWidgetsMobile HTML, CSS,Web Some Medium Great Limited Limited Mid Low JSApplicationNative All Complex Excellent Various Yes Yes High MidApplicationGames All Complex Excellent Various Yes Yes Very High High
  73. 73. Type sApp of A pps licat Con ion text
  74. 74. UTILITYA simple at-a-glance tool.
  75. 75. LOCALEAn application based onthe physical context.
  76. 76. INFORM ATIVEAn application meant toinform.
  77. 77. PRODUC TIVITYMeant to increase ouravailable time.
  78. 78. IMMER- SIVEAn application meant todistract or entertain.
  79. 79. CONTEXT MATRIX User Experience Type Task Type Task Duration Combine with Utility At-a-Glance Information Recall Very Short Immersive Locale Location-based Contextual Information Quick ImmersiveInformative Content-based Seek Information Quick LocaleProductivity Task-based Content Management Long UtilityImmersive Full Screen Entertainment Long Utility, Locale
  80. 80. Mobile IA
  81. 81. KEEP ITSIMPLE
  82. 82. SITEMAPS
  83. 83. CLICKSTREAMS
  84. 84. !"#$" ! -& (%)* ./$%& (%)* ./$%& +), "#$%& +), ! -& "#$%&"#$%& 0123) ! -& ! -& +), +), -& "#$%& (%)*(%)* -& -& (%)* ! +), ! +), (%)* (%)* %&&()
  85. 85. WIREFRAMES
  86. 86. PROTOTYPING
  87. 87. DIFFERENT IA FOR DIFFERENT DEVICES?
  88. 88. ExerciseDesigning a MobileInformation 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?
  89. 89. THEDESIGN MYTH
  90. 90. Back Title New Content Navigation
  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? Where are the users?What do you know about them? Are they in a public space or a private space? Are they inside or outside?What type of behavior can you assumeor predict about the users? Is it day or is it night?What is happening? Why will they use your app?What are the circumstances in which What value will they gain from yourthe users will best absorb the content content or services in their presentyou intend to present? situation?When will they interact? How are they using their mobileAre they at home and have large device?amounts of time? Are they at work Is it held in their hand or in theirwhere they have short periods of time? pocket?Will they have idle periods of time How are they holding it?while waiting for a train, for example? 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 moredi cult to produce.
  101. 101. ColorThe most common obstacle youencounter when dealing with coloris mobile screens.When complex designs aredisplayed on di erent 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 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.
  103. 103. TypographyHow type is rendered on mobilescreens:• pixel density or greater pixels per inch (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 di cult tocreate that best possible experiencefor a plethora of di erent 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 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?
  108. 108. Web Apps vs.Native Apps
  109. 109. TheUbiquity Principle
  110. 110. JARGON ALERTUbiquity Principle The easiest it is to produce quality content and services for the largest available market will always win.
  111. 111. ReasFrag on # mentat 1 ion
  112. 112. Getting your applicationon one platform is a snap, but getting it on two is a challenge, five a costlyheadache, and supportingfifty virtually impossible.
  113. 113. Reas on #The 2 Web
  114. 114. Anyone who’s bettingagainst the Web rightnow is an idiot.Daniel Appelquist,Co-Chair W3C Mobile Web Initiative
  115. 115. Reas on #Con 3 trol
  116. 116. Mobile application distribution cannotand will likely never be under the control of the developer.
  117. 117. Reas Con on # 4Expe sum er ctati ons
  118. 118. Consumersexpect thingsto just work.
  119. 119. THE MOBILE WEB IS THE ONLY LONG- TERM COMMERCIALLY VIABLE CONTENT PLATFORM FOR MOBILE DEVICES
  120. 120. When to make anative application?
  121. 121. CHARGING MONEY
  122. 122. GAMES
  123. 123. Game GameGame Game GameGame GameGame Game Game GameGame Game
  124. 124. 67%OF ALL PAID APPS ARE GAMES
  125. 125. 65%OF ALL FREE APPS AREN’T GAMES
  126. 126. LOCATION
  127. 127. CAMERA
  128. 128. ACCELERO- METERS
  129. 129. FILESYSTEM
  130. 130. OFFLINE
  131. 131. An initiative is defining new interfaces (Javascript APIs)and a security framework to enable the access to mobilephone functionalities.• Application Invocation • Messaging• Application Settings • Persistent Data• Camera • Personal Information• Communications Log • Phone Status• Gallery • User Interaction• Location
  132. 132. So what is the deal with BONDI?
  133. 133. When to make aMobile Web App?
  134. 134. Mobile 2.0
  135. 135. Web 1.0 Web 2.0 Proprietary StandardsWalled Gardens Web ServicesFirst to market Web as a PlatformBrand-centered User-centered
  136. 136. What I Learned at Mobile 2.0#1 Mobile 2.0 = The web The Mobile User Experience SucksThe mobile web browser is thenext killer app Mobile Widgets are the next big thingMobile Web Applications arethe future The Carrier is the new “C” wordJavascript is the next frontier Mobile Needs to Check Its EgoRich Interactions kill battery life We 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. Enterprise Mobile AdvertisingMicroblogging Location-based Audio Imaging Video App Stores Messaging Media Sharing Point of Sale Widgets VoIP Search Shopping Transactions Social Media QR Codes Platforms
  139. 139. Hot Trendssensoring augmented realitybiometrics mobile connected gamestransactions location-based social medialifestreaming retail proximity mediarecommendation consumptionimage recognition
  140. 140. Mobile 1.0 Mobile 2.0 Proprietary StandardsWalled Gardens Web ServicesFirst to market Web as a PlatformBrand-centered User-centered
  141. 141. Mobile Evolution Brick Era Candy Bar EraFeature Phone Era Smart Phone Era Touch Era 1970 1980 1990 2000 2010
  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. Single Column Layouts
  151. 151. DEVICEPLANS
  152. 152. 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
  153. 153. 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
  154. 154. 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
  155. 155. 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
  156. 156. 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
  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 input mask on fields• No JavaScript support
  158. 158. The Device Matrix Class 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. THE BOX MODEL Class A Class B Class C Class D Class FBox Model Great Good OK Poor Fail
  167. 167. SELECTORSThe selector is used to tellwhich markup elements itshould apply rules to—basically, what makes CSSwork to control thepresentation.
  168. 168. SELECTORS 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 NoAdvanced Attribute Yes No No No No Pseudoselector Yes Flaky No No No
  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. FONTS & TEXT Class A Class B Class C Class D Class F Sans-serif and Sans-serif and Sans-serif and Available Fonts Web-safe Web-safe serif serif 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 LimitedText-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 NoFont replacement Limited No No No No
  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. BOX PROPERTIES Class A Class B Class C Class D Class FHeight & Width Yes Yes Limited Flaky FlakyMin & 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
  173. 173. COLORStyling an element meansdefining colors andbackground images. Relyingon CSS instead of images tocreate desired visual e ectsreduces time to download aswell as cost.
  174. 174. COLOR Class A Class B Class C Class D Class FBackground color Yes Yes Yes Yes YesBackground image Yes Yes Yes Flaky Flaky Multiple Yes No No No Nobackground images
  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. PAGE FLOW Class A Class B Class C Class D Class F Display Yes Yes Yes Yes FlakyToggle 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 NoStacking Order Yes Yes Limited Flaky No
  177. 177. JAVA-SCRIPT
  178. 178. JAVASCRIPT Class A Class B Class C Class D Class FJavascript Support Yes Some No No No DHTML Yes Limited No No No Ajax Yes Limited No No No
  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 webOS Nokia S60
  185. 185. Android Palm webOS Nokia S60
  186. 186. Android Palm webOS Nokia S60
  187. 187. Android Palm webOS Nokia S60
  188. 188. 98% OF ALL U.S. MOBILE WEBTRAFFIC IS COMING FROM WEBKIT
  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, o ine 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 wheno ine.
  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 E ectsCSS 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’s Next
  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. Mobile technology by its Go nature is designed toMobile! 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.
  209. 209. The Mobile Generation 2009 2011 2013 2015 Everyone Else source: us census bureau
  210. 210. Toda y’s i entr nves epre tors wron neur , boa g pla s are rdro look oms chai ces. ing f , and rs w Face or v and on’t book alue neit solv ’s ga in al gree her e big me o l the n tec will econ f mu mak h. ing t omic pr sica Whe oken oble l re is inve ms— out f the n stme or re ext i nts i volu ndu n dom tion stria inat arie l revbarr ed b s? S olut iers y cle imp i to e ar, d urab le: in on cryin cien le, s indu g cy a truc strie nd p s rodu tural ctiv 21st ity. Cen tury —Um Indu stria air Haq l Rev ue olut ion
  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 IS WHERE THECONVERSATION STARTS
  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 you think?
  215. 215. http://mobiledesign.org
  216. 216. THANK YOUMy 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)
  1. A particular slide catching your eye?

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

×