• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
571
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
59
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. with Brian FlingDESIGNINGMOBILEEXPERIENCES
  • 2. AvailableNOWhttp://mobiledesign.org
  • 3. HOUSEKEEPINGmobiledesign.orgmobiledesign.org/workshopflingmedia.comslideshare.net/flinglinkedin.com/in/fling@fling
  • 4. The Layersof theMobileExperience
  • 5. IDEA The first thing we need is an idea that inspires us.
  • 6. NEEDS & GOALSIDEA The first thing we need is an idea that inspires us.Identify a basic need with our desired user.
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. What is MobileDesign?
  • 18. JARGON ALERTMobile DesignThe creation of user experiencesfor the mobile context.
  • 19. It doesn’t startwith Photoshop
  • 20. WhyMobile?
  • 21. What’s Next?
  • 22. Generation Y97% own a computer94% own a mobile phone76% use Instant Messaging69% use Facebook56% own an iPod
  • 23. Generation ZBorn in the modern digitalage. Technology is infused atbirth.
  • 24. Generation ZBorn in the modern digitalage. Technology is infused atbirth.The iPhone is to them
  • 25. Generation ZBorn in the modern digitalage. Technology is infused atbirth.The iPhone is to themas the Macintosh was to us.
  • 26. The Mobile Generation2009 2010 2011 2012 2013 2014 2015Everyone Elsesource: us census bureau
  • 27. In less five years, themobile generationcould have morebuying power than allother demographics
  • 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. NewRules
  • 30. Rule #1Forget WhatYou ThinkYou Know
  • 31. Palm2%Blackberry3%Windows Mobile5%Symbian6%Java ME7%Android7%iPhone69%
  • 32. Rule #2Believe WhatYou See, NotWhat YouRead
  • 33. Experiment
  • 34. Share yourfindings
  • 35. Rule #3ConstraintsNever ComeFirst
  • 36. vs.
  • 37. Rule #4Focus onContext,Goals andNeeds
  • 38. Rule #5You Can’tSupportEverything
  • 39. Palm2%Blackberry3%Windows Mobile5%Symbian6%Java ME7%Android7%iPhone69%
  • 40. Rule #6Don’tConvert,Create
  • 41. Rule #7Keep ItSimple
  • 42. Needs&Goals
  • 43. JARGON ALERTNeedsThe circumstances in whichsomething is necessary, or thatrequire some course of action.
  • 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. JARGON ALERTGoalsThe object of a persons ambitionor effort; an aim or desired result
  • 46. User GoalsBusinessGoalsTechnicalGoalsSweetSpot
  • 47. JARGON ALERTNeurolinguisticProgrammingA model of interpersonalcommunication chiefly concerned withthe relationship between successfulpatterns of behavior and the subjectiveexperiences underlying them.
  • 48. Learning TypeAuditory20% of all peopleconnect with others verballyis all they need to feelconnected and productivewith others
  • 49. Learning TypeVisual35% of all peopleBeing able to see conceptsillustrated as diagrams orcharts and graphs is helpfulfor this majority learningtype.
  • 50. Learning TypeKinesthetic45% of all peopleincorporate muscle memoryand hand-eye movement toprocess and retain newinformation
  • 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. Context
  • 53. JARGON ALERTContextThe circumstances that form thesetting for an event, statement, oridea, and in terms of which it canbe fully understood and assessed.
  • 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. 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. PhysicalContextMy present location.My physical context willdictate how I accessinformation and thereforehow I derive value from it.
  • 57. MediaContextMy device of access.The media context isn’tjust about the immediacyof the information wereceiveHow to engage people inreal time.
  • 58. ModalContextOur present state ofmind.• Where should I eat?• Should I buy it now orlater?• Is this safe or not?
  • 59. EventsTVBillboardRadioLiveAuditoryKinestheticVisualWord ofMouthPrint AdMobileDeviceQR
  • 60. EventsTVBillboardRadioLiveWebsiteAuditoryKinestheticVisualWord ofMouthPrint AdMobileDeviceWAPSMSQR CodSMSQR CodeWAPSMSSMSBluetoothWAPMMSMMS
  • 61. EventsTVBillboardRadioLiveWebsiteAuditoryKinestheticVisualWord ofMouthPrint AdMobileDeviceIVRSMSIVRSMSWAPSMSQR CodeSMSQR CodeSMSMMSSMSWAPSMSSMSBluetoothNotifyWAPWAPMMSEmailSend toFriendWNoBWAP SiteWAP SiteJoinBuyMMSifyd tondDiscussSend toFriendNotifyBuySend toFriendNotify
  • 62. EventsTVBillboardRadioLiveWebsiteAuditoryKinestheticVisualWord ofMouthPrint AdMobileDeviceIVRSMSIVRSMSWAPSMSQR CodeSMSQR CodeSMSSMSMMSSMSWAPSMSSMSBluetoothNotifyWAPWAPMMSEmailSend toFriendWAP SiteNotifyBuyWAP SiteWAP SiteSend toFriendJoinBuyNotifyNotifySend toFriendPost WAP SiteMMSSend toFriendNotifySend toFriendJoinDiscussSend toFriendNotifyDownloadDownloadNotifyVoteJoinVoteNotifyBuySend toFriendNotify
  • 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. Typesof Apps
  • 65. Types of AppsApplicationMedium
  • 66. SMSExperiences where the goalis to alert users of newinformation.
  • 67. WEBSITEExperiences that providethe user with simpleinformational data.
  • 68. WIDGETSExperiences that are basedon an existing multi-platform framework.
  • 69. WEBAPPSWhen you want to employ across-platform applicationstrategy.
  • 70. NATIVEAPPSExperiences that takeadvantage of the nativefeatures of the device.
  • 71. GAMESExperiences that entertain.
  • 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. Types of AppsApplicationContext
  • 74. UTILITYA simple at-a-glance tool.
  • 75. LOCALEAn application based onthe physical context.
  • 76. INFORMATIVEAn application meant toinform.
  • 77. PRODUCTIVITYMeant to increase ouravailable time.
  • 78. IMMER-SIVEAn application meant todistract or entertain.
  • 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. MobileIA
  • 81. KEEP ITSIMPLE
  • 82. SITEMAPS
  • 83. CLICKSTREAMS
  • 84. !"#$"!"#$%&!(%)*(%)*"#$%&!"#$%&(%)*!(%)*%&&()!(%)*"#$%&(%)*!(%)*+),+),-&-&+), -&-&-&./$%&./$%&+),+),-&+),-&0123)
  • 85. WIREFRAMES
  • 86. PROTOTYPING
  • 87. DIFFERENT IAFORDIFFERENTDEVICES?
  • 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. THEDESIGNMYTH
  • 90. BackNavigationTitle NewContent
  • 91. MobileDesign
  • 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. vs.
  • 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. vs.iPhone The Rest
  • 96. Elements of Mobile Design|CONTEXT|MESSAGE|LOOK & FEEL|LAYOUT|COLOR|TYPE|GRAPHICS
  • 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. 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. 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. LayoutHow the user will visually processthe pageThe structural and visualcomponents of layout often getmerged together, creatingconfusion and makingyour design moredifficult to produce.
  • 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. 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. 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. 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. 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. 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. 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. Web Appsvs.Native Apps
  • 109. TheUbiquity Principle
  • 110. JARGON ALERTUbiquity PrincipleThe easiest it is to producequality content and servicesfor the largest availablemarket will always win.
  • 111. Reason #1Fragmentation
  • 112. Getting your applicationon one platform is a snap,but getting it on two is achallenge, five a costlyheadache, and supportingfifty virtually impossible.
  • 113. Reason #2The Web
  • 114. Anyone who’s bettingagainst the Web rightnow is an idiot.Daniel Appelquist,Co-Chair W3C Mobile Web Initiative
  • 115. Reason #3Control
  • 116. Mobile applicationdistribution cannotand will likely never beunder the control ofthe developer.
  • 117. Reason #4ConsumerExpectations
  • 118. Consumersexpect thingsto just work.
  • 119. THE MOBILE WEB ISTHE ONLY LONG-TERMCOMMERCIALLYVIABLE CONTENTPLATFORM FORMOBILE DEVICES
  • 120. When to make anative application?
  • 121. CHARGINGMONEY
  • 122. GAMES
  • 123. GameGameGameGameGameGameGameGameGameGameGameGameGame
  • 124. 67%OF ALL PAID APPSARE GAMES
  • 125. 65%OF ALL FREE APPSAREN’T GAMES
  • 126. LOCATION
  • 127. CAMERA
  • 128. ACCELERO-METERS
  • 129. FILESYSTEM
  • 130. OFFLINE
  • 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. So what is the dealwith BONDI?
  • 133. When to make aMobile Web App?
  • 134. Mobile 2.0
  • 135. Web 1.0ProprietaryWalled GardensFirst to marketBrand-centeredWeb 2.0StandardsWeb ServicesWeb as a PlatformUser-centered
  • 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. 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. Widgets VoIPVideoTransactionsSocial MediaShoppingSearchQR CodesPoint of SaleMobile AdvertisingMicrobloggingMessaging Media SharingAudioPlatformsEnterpriseApp StoresImagingLocation-based
  • 139. sensoringbiometricstransactionslifestreamingrecommendationimage recognitionaugmented realitymobile connected gameslocation-based social mediaretail proximity mediaconsumptionHot Trends
  • 140. Mobile 1.0ProprietaryWalled GardensFirst to marketBrand-centeredMobile 2.0StandardsWeb ServicesWeb as a PlatformUser-centered
  • 141. Brick EraCandy Bar EraFeature Phone EraSmart Phone EraTouch Era1990 2000 201019801970Mobile Evolution
  • 142. Change occursbecause there isa gap betweenwhat is and whatshould be.— Craig McCaw
  • 143. the mythical“Future-Phone”
  • 144. MobileWeb Dev
  • 145. UsingWeb Standards
  • 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. Progressive Enhancement
  • 148. LAYOUT
  • 149. Fixed vs. Fluid
  • 150. Multiple vs. SingleColumn Layouts
  • 151. DEVICEPLANS
  • 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. 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. 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. 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. 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. 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. 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. MARKUP
  • 160. XHTMLThe same XHTML we use inweb browsers every day hasworked in most mobilebrowsers for over five years.
  • 161. XHTML-MPA mobile version of XHTMLis supported on virtually allmodern mobile browsers.It is practically the same asXHTML Basic.
  • 162. HTML5While HTML5 is still beingdefined, it is only supportedby a handful of Class Abrowsers.
  • 163. CSS
  • 164. CSS-MP
  • 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. Class A Class B Class C Class D Class FBox Model Great Good OK Poor FailTHE BOX MODEL
  • 167. SELECTORSThe selector is used to tellwhich markup elements itshould apply rules to—basically, what makes CSSwork to control thepresentation.
  • 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. 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. 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. 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. 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. COLORStyling an element meansdefining colors andbackground images. Relyingon CSS instead of images tocreate desired visual effectsreduces time to download aswell as cost.
  • 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. 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. 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. JAVA-SCRIPT
  • 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. Don’t count on it.
  • 180. iPhoneWeb Apps
  • 181. What makes aMobile Web App?
  • 182. URL BarBrowser Controls
  • 183. What is WebKit?
  • 184. Android Palm webOSNokia S60
  • 185. Android Palm webOSNokia S60
  • 186. Android Palm webOSNokia S60
  • 187. Android Palm webOSNokia S60
  • 188. 98%OF ALL U.S. MOBILE WEBTRAFFIC IS COMING FROMWEBKIT
  • 189. MARKUP
  • 190. XHTMLThe iPhone and WebKitsupport the XHTML 1.0 Strictand Transitional doctype,which is the recommendedlanguage for writing iPhoneweb apps.
  • 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. HTML5HTML5 creates someinteresting newopportunities for mobile webapplications, like the canvaselement, offline storage,document editing, and mediaplayback.
  • 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. 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. CSS
  • 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. CSS3The iPhone supports themajority of the CSS3specification, allowing us tocreate visually stunning andbandwidth-friendly designsusing minimal amounts ofcode.
  • 198. JAVA-SCRIPT
  • 199. Supported!
  • 200. DemosCSS Image EffectsCSS TransformsFrameworksFixed Footer ScrollingMulti-touchStandalone Mode
  • 201. NowWhat?
  • 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. What’sNext
  • 204. EVERYTHING
  • 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. 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. 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. 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. The Mobile Generation2009 2011 2013 2015Everyone Elsesource: us census bureau
  • 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. 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. MOBILE ISWHERE THECONVERSATIONSTARTS
  • 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. What do youthink?
  • 215. http://mobiledesign.org
  • 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