Downloaded 35 times
More Related Content
Similar to DESIGNING MOBILE EXPERIENCES
DESIGNING MOBILE EXPERIENCES
- 1.
- 4.
- 5.
- 6. The Layers of the Mobile Experience
- 7. IDEA The first thing we need is an idea that inspires us.
- 8. NEEDS & GOALS Identify a basic need with our desired user. IDEA The first thing we need is an idea that inspires us.
- 9. 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. 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. 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. 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. 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. 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. 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. 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.
- 17. 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.
- 18. Discussion What do youwant to learn today? • Is it to create visual experiences? • Is it to take advantage of the mobile opportunity? • Is it to figure out how to make sense of this new medium? • Is it something more? • All of the above?
- 19. What is Mobile Design?
- 20. JARGON ALERT Mobile Design Thecreation of user experiences for the mobile context.
- 21. It doesn’t start withPhotoshop
- 22.
- 24.
- 25. Generation Y 97% owna computer 94% own a mobile phone 76% use Instant Messaging 69% use Facebook 56% own an iPod
- 26. Generation Z Bornin the modern digital age. Technology is infused at birth.
- 27. Generation Z Bornin the modern digital age. Technology is infused at birth. The iPhone is to them
- 28. Generation Z Bornin the modern digital age. Technology is infused at birth. The iPhone is to them as the Macintosh was to us.
- 29. The Mobile Generation 20092010 2011 2012 2013 2014 2015 Everyone Else source: us census bureau
- 30. In less fiveyears, the mobile generation could have more buying power than all other demographics
- 31. Discussion Why are youhere? • 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?
- 32.
- 33. Rule Forg #1 et W You hat Thin You k Kno w
- 37. Android 7% Java ME 7% iPhone Symbian 69% 6% Windows Mobile 5% Blackberry 3% Palm 2%
- 38. Rule Belie #2 ve W You hat See, Wha Not t You Read
- 40.
- 42.
- 45. Rule Con #3 strai Nev nts er C ome First
- 47.
- 48. Rule Focu #4 s on Con text, Goa ls an Nee d ds
- 50. Rule You #5 Can Supp ’t Ever ort ythin g
- 52. Android 7% Java ME 7% iPhone Symbian 69% 6% Windows Mobile 5% Blackberry 3% Palm 2%
- 53. Rule #6 Don Con ’t vert Crea , te
- 57. Rule # Keep 7 Simp It le
- 60.
- 61. JARGON ALERT Needs The circumstancesin which something is necessary, or that require some course of action.
- 62. Abraham Harold Maslow (April1, 1908 – June 8, 1970) was an American psychologist. He is noted for his concept- ualization of a "hierarchy of human needs", and is considered the founder of humanistic psychology.
- 64. JARGON ALERT Goals The objectof a person's ambition or e ort; an aim or desired result
- 66. Te ls oa ch sG nic es al Sweet sin G oa Spot Bu ls User Goals
- 67. JARGON ALERT Neurolinguistic Programming A modelof interpersonal communication chiefly concerned with the relationship between successful patterns of behavior and the subjective experiences underlying them.
- 68. Lear ni Aud ng T ype 20% itory o f all conn ect w peop is al ith oth le conn l they n ers verb ecte eed d an to fe ally with d pro el othe ductive rs
- 69. Lear ni ng T Visu ype 35% al of al Bein g ab l peop illus trate le to see c le char ts an d as dia oncepts for t d gra gram his m phs s or ajor is he ity le lpful type arni . ng
- 70. Lear Kine ni ng T ype sthe 45 % of all p tic inco rpor eopl and hand ate m uscl e proc -eye e me ess a movem mory nd re ent t infor tain o mat new ion
- 71. Exercise Needs & 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?
- 72.
- 73. JARGON ALERT Context The circumstancesthat form the setting for an event, statement, or idea, and in terms of which it can be fully understood and assessed.
- 77. Context with acapital C Context 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.
- 83. The mode, medium,or context 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
- 84. My present location. Physical My physical context will Context dictate how I access information and therefore how I derive value from it.
- 86. My device ofaccess. Media The media context isn’t Context just about the immediacy of the information we receive How to engage people in real time.
- 88. Our present stateof Modal mind. Context • Where should I eat? • Should I buy it now or later? • Is this safe or not?
- 90. Radio TV Live Billboard ry Vi to su di al Au Word of Print Ad Mouth Kinesthetic Mobile Events Device QR
- 91. WAP Bluetooth Radio TV SMS SMS Live Billboard WAP ry Vi to MMS su di al Au QR Cod Word of Print Ad Mouth SMS Kinesthetic SMS WAP Mobile Events Device QR Code Website MMS
- 92. WAP Discuss IVR SMS Buy SMS IVR Notify Send to Friend WAP Bluetooth Radio TV Send to Friend Notify SMS SMS Live Billboard d to B nd WAP ry Vi to MMS su di al Au W QR Code Word of Print Ad Mouth SMS ify 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
- 93. 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 Billboard Send to Buy Friend WAP ry Vi to MMS su di al Au Join WAP Site QR Code Word of Print Ad Mouth SMS Notify 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
- 94. Exercise Define 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?
- 95.
- 96. Type s App of A pps licat Med ion ium
- 97. SMS Experiences where thegoal is to alert users of new information.
- 99. WEBSITE Experiences that provide theuser with simple informational data.
- 101. WIDGETS Experiences that arebased on an existing multi- platform framework.
- 103. WEB APPS Whenyou want to employ a cross-platform application strategy.
- 105. NATIVE APPS Experiences thattake advantage of the native features of the device.
- 107.
- 109. MEDIUM MATRIX Device User Offline Device Long Term Complexity Language Initial Cost Support Experience Support Features Cost SMS All Simple Limited N/A No None Low High Mobile All Simple Limited HTML No None Low Low Websites Mobile Web Some Medium Great HTML Limited Limited Low Low Widgets Mobile HTML, CSS, Web Some Medium Great Limited Limited Mid Low JS Application Native All Complex Excellent Various Yes Yes High Mid Application Games All Complex Excellent Various Yes Yes Very High High
- 110. Type s App of A pps licat Con ion text
- 111.
- 113. LOCALE An application basedon the physical context.
- 115. INFORM ATIVE An applicationmeant to inform.
- 117. PRODUC TIVITY Meant toincrease our available time.
- 119. IMMER- SIVE Anapplication meant to distract or entertain.
- 121. 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 Immersive Informative Content-based Seek Information Quick Locale Productivity Task-based Content Management Long Utility Immersive Full Screen Entertainment Long Utility, Locale
- 122.
- 124.
- 129.
- 132.
- 133. !"#$" ! -& (%)* ./$%&' (%)* ./$%&' +), "#$%&' +), ! -& "#$%&' "#$%&' 0123) ! -& ! -& +), +), -& "#$%&' (%)* (%)* -& -& (%)* ! +), ! +), (%)* (%)* %&'&()
- 137.
- 139.
- 143. DIFFERENT IA FOR DIFFERENT DEVICES?
- 144. Exercise Designing a Mobile InformationArchitecture • 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?
- 145.
- 146. Back Title New Content Navigation
- 147.
- 148. The Tent Pole Thebusiness goal of a tent-pole production is to support or prop up the losses from other productions. However, to create a tent-pole production, the creators involved must make an artistic work that they know will appeal to the largest possible audience, providing something for everyone.
- 149.
- 150. Best Possible Experience Inmobile development, the risks and costs of creating that tent- pole product are just too high. This lesson is so easily seen through bad or just plain uninspired mobile design. Asking creative people to create uninspiring work is a fast track to mediocrity.
- 151. vs. iPhone The Rest
- 152. Elements of MobileDesign | CONTEXT | MESSAGE | LOOK & FEEL | LAYOUT | COLOR | TYPE | GRAPHICS
- 153. Context Who are theusers? 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 assume or 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 your the users will best absorb the content content or services in their present you intend to present? situation? When will they interact? How are they using their mobile Are they at home and have large device? amounts of time? Are they at work Is it held in their hand or in their where 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?
- 154. Message What you aretrying to say about your site or application visually? Your message is the overall mental impression you create explicitly through visual design. How someone will react to your design? If you take a step back, and look at a design from a distance, what is your impression?
- 160. Look & Feel Look& Feel is used to describe the appearance As 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?
- 163. Layout How the userwill visually process the page The structural and visual components of layout often get merged together, creating confusion and making your design more di cult to produce.
- 167. Color The most commonobstacle you encounter when dealing with color is mobile screens. When complex designs are displayed on di erent mobile devices, the limited color depth on one device can cause banding, or unwanted posterization in the image.
- 170. Typography How type isrendered on mobile screens: • subpixel-based screens • A subpixel is the division of each pixel into a red, green, and blue (or RGB) unit at a micro- scopic level, enabling for a greater level of antialiasing for each font character or glyph.
- 173. Typography How type isrendered on mobile screens: • pixel density or greater pixels per inch (PPI) The pixel density is determined by dividing width of the display area in pixels, by width of the display area in inches.
- 175. Graphics Use of imagesthat are used to establish or aid a visual experience. Graphics can be used to supplement the look and feel, or as content displayed inline with the text. • Iconography • Photos & Images
- 178. Different Screen Sizes Mobiledevices come in all shapes and sizes. Choice is great for consumers, but bad for design. It can be incredibly di cult to create that best possible experience for a plethora of di erent screen sizes.
- 181. The Right Device Thetruly skilled designer doesn’t create just one product—they translate ideas into experiences. The spirit of your design should be able to be adapted to multiple devices. The days of tent-poles are gone.
- 182. Exercise Design Critique • Letspick 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?
- 183. Web Apps vs. Native Apps
- 184.
- 185. JARGON ALERT Ubiquity Principle The easiest it is to produce quality content and services for the largest available market will always win.
- 186. Reas Frag on # mentat 1 ion
- 187. Getting your application onone platform is a snap, but getting it on two is a challenge, five a costly headache, and supporting fifty virtually impossible.
- 188. Reas on # The 2 Web
- 189. Anyone who’s betting againstthe Web right now is an idiot. Daniel Appelquist, Co-Chair W3C Mobile Web Initiative
- 190. Reas on # Con 3 trol
- 191. Mobile application distribution cannot and will likely never be under the control of the developer.
- 192. Reas Con on # 4 Expe sum er ctati ons
- 193.
- 194. THE MOBILE WEBIS THE ONLY LONG- TERM COMMERCIALLY VIABLE CONTENT PLATFORM FOR MOBILE DEVICES
- 195. When to makea native application?
- 196.
- 198.
- 200. Game Game Game Game Game Game Game Game Game Game Game Game Game
- 201. 67% OF ALL PAIDAPPS ARE GAMES
- 202. 65% OF ALL FREEAPPS AREN’T GAMES
- 203.
- 206.
- 208.
- 210.
- 212.
- 215. An initiative isdefining new interfaces (Javascript APIs) and a security framework to enable the access to mobile phone functionalities. • Application Invocation • Messaging • Application Settings • Persistent Data • Camera • Personal Information • Communications Log • Phone Status • Gallery • User Interaction • Location
- 216. So what isthe deal with BONDI?
- 218. When to makea Mobile Web App?
- 219.
- 221. Web 1.0 Web 2.0 Proprietary Standards Walled Gardens Web Services First to market Web as a Platform Brand-centered User-centered
- 223. What I Learnedat Mobile 2.0 #1 Mobile 2.0 = The web The Mobile User Experience Sucks The mobile web browser is the next killer app Mobile Widgets are the next big thing Mobile Web Applications are the future The Carrier is the new “C” word Javascript is the next frontier Mobile Needs to Check Its Ego Rich Interactions kill battery life We are creators not consumers
- 224. JARGON ALERT Mobile 2.0 Theconvergence of mobile services and web services. The promise of Mobile 2.0 is to add portability, ubiquitous connectivity and location- based services to enhance information and services found on the web.
- 225. Enterprise Mobile Advertising Microblogging Location-based Audio Imaging Video App Stores Messaging Media Sharing Point of Sale Widgets VoIP Search Shopping Transactions Social Media QR Codes Platforms
- 226. Hot Trends sensoring augmented reality biometrics mobile connected games transactions location-based social media lifestreaming retail proximity media recommendation consumption image recognition
- 227. Mobile 1.0 Mobile 2.0 Proprietary Standards Walled Gardens Web Services First to market Web as a Platform Brand-centered User-centered
- 228. Mobile Evolution Brick Era Candy Bar Era Feature Phone Era Smart Phone Era Touch Era 1970 1980 1990 2000 2010
- 229. Change occurs because thereis a gap between what is and what should be. — Craig McCaw
- 230.
- 232.
- 233.
- 234. Multiple Mobile Browsers Designingand developing for multiple mobile browsers simultaneously is a challenge, but not an impossibility. It requires looking at your designs and code from many contexts. Being able to visualize how your designs will be rendered on a variety of devices in your head, as you lay down code.
- 235.
- 239.
- 240.
- 242. Multiple vs. Single Column Layouts
- 244.
- 245. 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
- 246. 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
- 248. 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
- 249. 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
- 250. 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
- 251. 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
- 252. The Device Matrix Class Markup CSS Javascript Class A XHTML, XHTML-MP, HTML5 CSS2, CSS3 Great, includes DHTML, Ajax Class B XHTML, XHTML-MP CSS2 (Decent) Limited, some DHTML Class C XHTML, XHTML-MP CSS2 (Limited) Limited Class D XHTML-MP CSS2 (Basic) None Class F XHTML-MP, WML None None
- 253.
- 254. XHTML The same XHTMLwe use in web browsers every day has worked in most mobile browsers for over five years.
- 256. XHTML-MP A mobile versionof XHTML is supported on virtually all modern mobile browsers. It is practically the same as XHTML Basic.
- 259. HTML5 While HTML5 isstill being defined, it is only supported by a handful of Class A browsers.
- 260.
- 261.
- 264. THE BOX MODEL Thebox model is one of the key concepts of CSS design, and therefore the first thing that tends to go wrong in mobile devices. The box model is the imaginary box that is around every element in your markup.
- 266. THE BOX MODEL Class A Class B Class C Class D Class F Box Model Great Good OK Poor Fail
- 267. SELECTORS The selector isused to tell which markup elements it should apply rules to— basically, what makes CSS work to control the presentation.
- 268. 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 No Advanced Attribute Yes No No No No Pseudoselector Yes Flaky No No No
- 269. FONTS & TEXT Thetypography options on mobile devices can be less than stellar, but like most things CSS-related, we are seeing mobile browsers move closer to their desktop cousins in this respect.
- 270. 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 Limited Text-decoration Yes Yes Yes Yes Flaky Line-height Yes Yes Yes Yes Flaky Text-align Yes Yes Yes Yes Yes White-space Yes Yes Yes Limited Flaky Text Shadow Yes No No No No Font replacement Limited No No No No
- 271. BOX PROPERTIES Being ableto style the box area around an element is a crucial part of web standards design. Basic CSS level 2 box styling techniques work well on most mobile devices, allowing you to style content with some level of precision.
- 272. BOX PROPERTIES Class A Class B Class C Class D Class F Height & Width Yes Yes Limited Flaky Flaky Min & Max dim Yes Flaky No No No Margins Yes Yes Yes Yes Limited Padding Yes Yes Yes Flaky Flaky Borders Advanced Limited Limited Flaky Flaky Box Shadow Yes No No No No
- 273. COLOR Styling an elementmeans defining colors and background images. Relying on CSS instead of images to create desired visual e ects reduces time to download as well as cost.
- 274. COLOR Class A Class B Class C Class D Class F Background color Yes Yes Yes Yes Yes Background image Yes Yes Yes Flaky Flaky Multiple Yes No No No No background images
- 275. PAGE FLOW CSS canalso be used to define the design layout of the page. Using positioning and page flow attributes, we can add style to the page and help make it easier to read or interact with on small screens.
- 276. PAGE FLOW Class A Class B Class C Class D Class F Display Yes Yes Yes Yes Flaky Toggle Display Yes Yes Limited No No Floats Yes Yes Limited Limited Flaky Clearing Yes Yes Limited Limited Flaky Positioning Yes Yes Limited Flaky No Overflow Yes Limited Flaky No No Stacking Order Yes Yes Limited Flaky No
- 277.
- 278. JAVASCRIPT Class A Class B Class C Class D Class F Javascript Support Yes Some No No No DHTML Yes Limited No No No Ajax Yes Limited No No No
- 279.
- 280.
- 281. What makes a MobileWeb App?
- 283.
- 288.
- 291. Android Palm webOS Nokia S60
- 292. Android Palm webOS Nokia S60
- 293. Android Palm webOS Nokia S60
- 294. Android Palm webOS Nokia S60
- 297. 98% OF ALLU.S. MOBILE WEB TRAFFIC IS COMING FROM WEBKIT
- 298.
- 299. XHTML The iPhone andWebKit support the XHTML 1.0 Strict and Transitional doctype, which is the recommended language for writing iPhone web apps.
- 300. XHTML-MP The iPhone willrender XHTML Basic and XHTML- MP pages, but it won’t like it. Given the option to render a desktop version, or a mobile or WAP version of a site, the iPhone will render the desktop version.
- 302. HTML5 HTML5 creates some interestingnew opportunities for mobile web applications, like the canvas element, o ine storage, document editing, and media playback.
- 306. CANVAS The canvas elementallows designers and developers to essentially draw content within your HTML page. The canvas HTML tag defines a custom drawing area within your content that you can then access as a JavaScript object and draw upon.
- 308. OFFLINE DATA Also partof HTML5 and supported by WebKit and the iPhone is the ability to create client-side data storage systems, which essentially allow you to create web applications that work when o ine.
- 310.
- 311. CSS2 The iPhone hasexcellent CSS2 support for a mobile browser. In fact, the iPhone might render CSS a bit better than the desktop web browser you’re using these days.
- 313. CSS3 The iPhone supportsthe majority of the CSS3 specification, allowing us to create visually stunning and bandwidth-friendly designs using minimal amounts of code.
- 315.
- 316.
- 317. Demos CSS Image Eects CSS Transforms Frameworks Fixed Footer Scrolling Multi-touch Standalone Mode
- 318.
- 327. RAWK Be in theApp Store. Charge money for your app. Be in full control of your app. Be able to define the design how ever you want. Spend less making your app. Increase your profitability. Support multiple devices.
- 329.
- 330.
- 331. Tomorrow Tomorrow’s innovations willnot only involve mobile technology, but they will come from the mobile investments that are made today. This won’t be because of the iPhone or Android phones, operators, or the big device makers, but because of people.
- 332. 1985 The Web issupposed to bring us together, but people feel more isolated than ever. In a survey conducted in 1985, respondents said that they had at least three close friends they felt they could talk to about important issues.
- 333. 2006 In 2006, aDuke University study found that the number of friends people felt they could talk to was down to two people. 25 percent stated they had no close friends at all.
- 334. Mobile technology byits Go nature is designed to Mobile! 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.
- 335. The Mobile Generation 2009 2011 2013 2015 Everyone Else source: us census bureau
- 336. 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 rev barr 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
- 337. IN 100 YEARS Weneed a new Industrial Revolution that will define the stepping stones for the next hundred years. We need a deep examination of the impact that the Information Age will have on real people for generations to come.
- 338. MOBILE IS WHERETHE CONVERSATION STARTS
- 339. MOBILE IS... ...the introductionto the larger concepts of how to address the user’s context in a multi-device environment ...how to deal with data portability ...about making content accessible to all people, regardless of location, education, or ability ...how to leverage the mobile web, the social web, the desktop web, desktop software, and other emerging technologies to the benefit of your users.
- 340. What do you think?
- 341.
- 342. THANK YOU My nameis Brian Fling and I’m a Mobile Designer twitter.com/fling company: pinchzoom.com blog: flingmedia.com Fonts used: Archer & Avenir Illustrations by Simon Oxley (www.idokungfoo.com)