O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Mobile Web Design & Development 2012 Lecture

Carregando em…3

Confira estes a seguir

1 de 131 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (18)

Semelhante a Mobile Web Design & Development 2012 Lecture (20)


Mais recentes (20)


Mobile Web Design & Development 2012 Lecture

  1. 1. Mobile Web Design & Development 2 1 1
  2. 2. In the mobile telecommunications industry, the technology is represented by two separate, yet equally important groups: the mobile devices, and the cellular networks that connect them. (These are their stories...) 2 2
  3. 3. Evolution of cell networks 1G, 2G, 3G, 4G... generations of cellular network technology that describe the maturity and capabilities of cellular networks most obvious trend is speed/bandwidth increase 3 3
  4. 4. Evolution of mobile devices 4 4
  5. 5. Brick era: 1973 - 1988 Motorola DynaTAC 5 5
  6. 6. Candybar era: 1988 - 1998 Critical mass. Mainstream. SMS (first non-voice communication) 6 6
  7. 7. Feature phone era: 1998 - 2008 cameras addition of packet-switched data services to networks allowed first use of the Internet on a phone. little real innovation and inconsistent interpretation of agreed upon standards. WAP 1.0 and WML provided a “dumbed down” version of the web stifled by network operators who focussed on providing downloadable ringtones, wallpapers, themes etc they could sell through network portals. poor adoption of mobile web by consumers Motorola RAZR 7 7
  8. 8. Smart phones: 2002 - present some overlap between what is considered a feature phone and a smart phone. use a common operating system, a larger screen size, a QWERTY keyboard or stylus for input, and Wi-Fi or another form of high-speed wireless connectivity. consistent frameworks for creating applications and services, and a reusable infrastructure to innovate WAP 2.0 specified use of cut down versions of XHTML (XHTML-MP) and CSS, bringing development back in line with the desktop web. Though standards compliance is still poor. 8 8
  9. 9. Some early mobile web browsers Text NetHopper for Apple Opera Mini Pocket Internet Explorer 3.0 Newton http://www.phonearena.com/news/Evolution-of-mobile-web-browsing_id9059 9 9
  10. 10. 10 10
  11. 11. Touch phone era: January 9, 2007 - present Though the majority of the technology in the original iPhone had already been available from other manufacturers, what was notable about the iPhone was how it changed every-day perceptions of what mobile technology can do. It made using the mobile web worth while from a consumer standpoint. http://bits.blogs.nytimes.com/2008/03/18/iphone- users-are-mobile-web-junkies/ It made developing for the mobile web worth while from a content provider and developer standpoint. Standards compliant web browsers that use the same rendering engines as their desktop counterparts. 11 11
  12. 12. 12 12
  13. 13. Why mobile? Of the 6 Billion people on Earth, 3.6 Billion people own or have access to mobile devices. Of those 1.6 Billion (and growing rapidly) have access to the web through a mobile device. Thats 500 million more people than have access to Internet predicted growth of mobile web access connected desktop computers. 13 13
  14. 14. “The [mobile] phone is bigger in its reach than the car (800 million), TV (1.5 billion), or Internet (1.1 billion). It will make bigger changes in the next decade than any of these did. The [mobile] phone adds the combined utility of the fixed telephone, Internet, computer, credit card, and TV. The phone will impact your life in more ways than we can imagine, because of its multi-functionality aspect, and its reach.” - Tomi Ahonen http://fora.tv/2009/09/24/ Mobile_Phones_The_Next_4_Billion_with_Tomi_Ahonen 14 14
  15. 15. Worldwide, the share of Internet pageviews originating from mobile devices increased 148% in the year to December ’09 http://www.quantcast.com/docs/display/info/Mobile+Report 15 15
  16. 16. Global population vs Mobile population 16 16
  17. 17. Worldwide, the share of Internet pageviews originating from mobile devices increased 148% in the year to December ’09 http://www.quantcast.com/docs/display/info/Mobile+Report 17 17
  18. 18. Operating System share of mobile web http://gs.statcounter.com 18 18
  19. 19. Browser share of mobile web http://gs.statcounter.com 19 19
  20. 20. Browser share of mobile web by region - Africa http://gs.statcounter.com 20 20
  21. 21. Browser share of mobile web by region - South America http://gs.statcounter.com 21 21
  22. 22. Browser share of mobile web by region - Asia http://gs.statcounter.com 22 22
  23. 23. Browser share of mobile web by region - Japan http://gs.statcounter.com 23 23
  24. 24. Browser share of mobile web by region - Europe http://gs.statcounter.com 24 24
  25. 25. Browser share of mobile web by region - North America http://gs.statcounter.com 25 25
  26. 26. Browser share of mobile web by region - Oceania http://gs.statcounter.com 26 26
  27. 27. Identifying target market The global mobile device market is especially fragmented. Usage trends rarely map neatly across geography or demographics such as age, wealth, gender, education, profession etc. It is therefore critical more-so than ever to identify and profile your target users’ needs and capabilities. 27 27
  28. 28. How do people use the mobile web? Most common content segments are news, email, weather, sports, city guides, and social networks Mobile users tend to perform quick, task based behaviours, often whilst in-between other tasks or multi- tasking. 28
  29. 29. Mobile usage in Australia 2009 43% of online Australians now own a smartphone 26% of social network users participated in mobile social networking in the past year. 66% of mobile social networkers are under 35 years of age http://blog.nielsen.com/nielsenwire/global/australia-getting-more-social-online- as-facebook-leads-and-twitter-grows/ 29 29
  30. 30. Mobile internet usage in Australia 2010 96% of Australian consumers own a mobile phone of these 41% use it to access the internet (up from 26% last year) http://www.about.sensis.com.au/small-business/sensis-ebusiness-report/ 30 30
  31. 31. Mobile internet usage in Australia 2010 Accessing information was a key use of internet on mobile phones, with looking for maps, weather and news the top applications. Social networking was also a highly used application; on par with people looking for information on products and services (56% each). http://www.about.sensis.com.au/small-business/sensis-ebusiness-report/ 31 31
  32. 32. Mobile internet usage in Australia 2010 Australians are not just using the internet on their mobile phones when other methods of connection are not available. The most frequently nominated places for Australians to use the internet on their mobile phones was at home or work (42%), regardless of the fact that they were likely to have other methods to connect to the internet at either of these locations. http://www.about.sensis.com.au/small-business/sensis-ebusiness-report/ 32 32
  33. 33. Developing a mobile strategy 1. Define the users’ context. 2. Determine users’ goals and how they are altered by context. 3. Determine the tasks the users want to perform to achieve goals. 4. Filter content by context, such as location, media, and model. 33
  34. 34. Context Mobile devices have an unparalleled ability to leverage the context in which information is consumed (and produced) Context refers to the surroundings, circumstances, environment, background, or settings which determine, specify, or clarify meaning - a mental model to establish understanding. physical context (e.g. location) media context (what device is being used to access the content) modal context (user’s state of mind) 34
  35. 35. Context Wikitude eRuv: A Street History in Semacode 35
  36. 36. Context Who are your users? What do you know about them? What type of behaviour can you assume or predict? What is happening? What are the circumstances in which they will best absorb the content you intend to present? When will they interact? When they are home and have large amounts of time? At work, where they have short periods of focus? During idle periods, while waiting for a train? Where are they? Are they in a public space or a private space? Are they inside or outside? Is it day or is it night? Why will they use your app? What value will they gain from your content or services in their present situation? How are they using their mobile devices? Are they held in the hand or in the pocket? How are they holding it? Open or closed? Portrait or landscape? from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling 36
  37. 37. Application context informative: utility: only goal is to provide information. short, task-based scenarios Importance is on providing relevant minimal input, at-a-glance information information up front. e.g. calculator, clock, weather forecast e.g. news sites, google reader, wikipedia locale: productivity: use geolocation data to add context to information - e.g. find restaurants close heavily task-based content and to me. services. e.g. google maps, foursquare e.g. ebay, banking immersive: designed to consume the user’s attention. often for entertainment purposes. e.g. games, video, google street-view 37
  38. 38. Application context from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling 38
  39. 39. Sovereign vs Transient application sovereign application monopolises the user's attention for long periods of time (e.g. wordprocessor) transient application comes and goes, presenting a single, high-relief function with a tightly restricted set of accompanying controls. The program is called when needed, it appears and performs its job, then it quickly leaves (e.g. instant messaging/SMS application) desktop applications tend to be sovereign while mobile applications tend to be transient. 39
  40. 40. Advantages of Mobile Devices Popularity Personal and personalisable Portable Constant connectivity, always on and always with you At the point of creative impulse Built-in payment channel Captures social context of media consumption/production Can interact with their environment 40
  41. 41. Mobile devices can interact with their environment clock camera calendar microphone telephony thermometer messaging geolocation ambient light altitude compass 41
  42. 42. Mobile is a usage scenario more than a form factor mobile users are mobile they expect applications to adapt to their (unpredictable) surroundings 42
  43. 43. Mobile Device Design Constraints Presentation Issues Screen size, resolution, colour reproduction http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html 43
  44. 44. Mobile Device Design Constraints Input Limited keypad, small keys Pointing device? Touch? D-pad? Affects navigation Bandwidth & Cost Speed and latency issues, especially for lengthy content or content that requires a lot of navigation between pages 44
  45. 45. Mobile Device Design Constraints Hardware limitations Processing power, memory, battery life etc. Usage environment is unpredictable and changing (e.g. lighting conditions) User Goals more immediate and goal-directed intentions than desktop web users Limited, adhoc or no standards compliance Limited implementations of html, css and JavaScript 45
  46. 46. Mobile Device Design Constraints Device fragmentation Proprietary browsers The range of device and browser capabilities is much, much more varied than on the desktop Taming the madness - databases like Device Atlas and WURFL which contain data on thousands of mobile devices. 46
  47. 47. Implementation options for mobile applications from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling 47
  48. 48. Native application vs web application? http://www.alistapart.com/articles/apps-vs-the-web/ http://www.readwriteweb.com/archives/ will_mobile_web_apps_eventually_replace_native_apps.ph p http://mobileanalyticssimplified.com/post/439404358/the- future-is-the-mobile-web-not-the-mobile-app 48
  49. 49. Native mobile application Pros Cons Offer best user experience, Cannot be easily ported to leveraging all device features. other mobile platforms - multiple device support is Built in revenue model (app costly. stores) Require certification and distribution from a third party that you have no control over. Require you to share revenue with one or more third parties. 49 49
  50. 50. Mobile web application Pros Cons Easy to create, using Can be challenging (but basic HTML, CSS, and not impossible) to support JavaScript knowledge. across multiple devices. Simple to deploy across They don’t always support multiple handsets. native application features, like offline mode, location Content is accessible on lookup, filesystem access, any mobile web browser. camera, etc. 50 50
  51. 51. Multiple phone web based application frameworks Allow you to write your application using HTML/CSS/ Javascript, but then package it as a native application for multiple mobile platforms. http://en.wikipedia.org/wiki/ Multiple_phone_web_based_application_framework 51 51
  52. 52. W3C Mobile Web Best Practices 1.0 http://www.w3.org/TR/mobile-bp 52
  53. 53. Mobile browser capabilities from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling 53
  54. 54. Main Mobile Browser Engines Webkit Presto Gecko Trident Safari Chrome Mobile Safari Firefox Opera Internet Explorer Android Browser Firefox Mobile Opera Mobile IE Mobile Blackberry (Fennec) Palm Kindle 54 54
  55. 55. Webkit Same rendering engine as used in Safari and Chrome on the desktop - capable of rendering the “real web” on mobile. Standards compliant. Used in mobile browsers by Apple, Android and Nokia, which together account for by far the largest chunk of of the mobile internet market. Influencing other browsers to catch up fast. 55 55
  56. 56. HTML 5 to the rescue. HTML 5, and the current climate of New functionality allowed by HTML intense development around 5 includes: optimising both desktop and native support for audio and mobile browsers for web video (without plugin) applications are quickly closing the gap between web and native canvas element for drawing / applications, especially in the animation mobile domain. document editing http://html5demos.com/ offline storage (keep working http:// without internet connection) www.chromeexperiments.com/ drag and drop http://www.apple.com/html5/ geolocation 56 56
  57. 57. Geolocation http://dev.w3.org/geo/api/spec-source.html http://diveintohtml5.org/geolocation.html http://mobile.tutsplus.com/tutorials/html5/html5- geolocation/ https://student.ci.qut.edu.au/~sade/geo/geo-watch- example.html 57 57
  58. 58. CSS 3 allows for creating more complex designs using the minimum of images, making it ideal for mobile design gradients transitions animations custom typography http://www.css3.info/preview/ 58 58
  59. 59. Javascript DHTML AJAX event handling (e.g. multi-touch events) http://tlrobinson.net/blog/2008/07/11/multitouch- javascript-virtual-light-table-on-iphone-v20/ http://jquerymobile.com/ 59 59
  60. 60. Full-screen web apps <meta content="width=device-width, user-scalable=no, initial-scale=1.0" name="viewport" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-icon" href="images/myappicon.png"/> <link rel="apple-touch-startup-image" href="images/startup.png"/> http://developer.apple.com/library/IOS/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html 60 60
  61. 61. Trends towards the future... The trends are towards even more “native” feel. persistence push more APIs for accessing phone features (telephony, address book, location, camera, media, filesystem etc.) embedded web (pervasive throughout phone os) http://www.slideshare.net/pgolding/mobile-web-evolution-rich- mobile-applications-and-realtime-web-ux http://www.slideshare.net/ricferraro/evolution-of-mobile-web-ric- ferraro-presentation 61
  62. 62. Native application vs web application - the narrowing gap. http://www.slideshare.net/mihaiionescu/html5-and-google-chrome-devfest09 62
  63. 63. Native application vs web application? either way the implementation may differ, the design principles are very much the same 63
  64. 64. 64
  65. 65. Designing for multiple screen sizes and orientations http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html 65
  66. 66. Average screen size is increasing. 66
  67. 67. Pixel density physical screen size and resolution do not map as neatly on mobile as they do on desktop pixel density is increasing faster than physical screen size (fingers remain largely the same) 67
  68. 68. Designing for multiple screen sizes and orientations Decide early on which screen sizes you will design for (needs analysis). Write semantic code that communicates without the addition of complex visuals. Where possible use flexible layouts that automatically adapt/scale to screen width. (Modern, touch browsers are good at doing this themselves with pinch-zoom, tap-zoom and auto-orientation) Responsive web design with CSS media queries - http://www.alistapart.com/articles/responsive- web-design/ Define rules for content adaption across screen sizes. 68
  69. 69. Viewport meta tags <meta name="HandheldFriendly" content="true" /> <meta name="MobileOptimized" content="320" /> <meta name="Viewport" content="width=device-width" /> 69
  70. 70. Viewport meta tags With Without 70
  71. 71. Information architecture - Navigation Most make or break component of mobile interface design. Users will quickly get frustrated with poor navigation and go elsewhere / give up. Affected by both display and input and compounded by the network latency. 71
  72. 72. Navigation - input Scroll Touch 72
  73. 73. Design touch friendly web pages Finger tips are typically around 10mm in size Space elements far enough apart to avoid overlaps between touch targets. A stylus can easily be used on an interface designed for touch, but not the other way round. Take advantage of multi-touch gestures use sensors, local storage, contextual form inputs etc to reduce required manual input. 73
  74. 74. Contextual HTML5 form inputs 74 74
  75. 75. Contextual HTML5 form inputs 75 75
  76. 76. Mobile contextual links <a href="tel:0412345678">Call Me</a> <a href="sms:0412345678">SMS Me</a> 76 76
  77. 77. Navigation - desktop vs mobile Typical desktop webpage layout with horizontal primary navigation and secondary sidebar navigation does not map well to the mobile 77
  78. 78. Navigation - desktop vs mobile Typical mobile webpage layout Design for vertical scrolling The most contextual information at the top Content consumes majority of the screen Exit points at the bottom 78
  79. 79. Navigation - mobile The most common method of creating mobile navigation schemes is to use a simple vertical list of options, often assigning and listing the corresponding numbers (0–9) to the accesskeys for keypad navigation. Showing multiple levels of navigation within your list usually doesn’t work well because it gives users too many options and consumes valuable screen area. A better way is to show only the options related to the page they’re viewing. http://mobiforge.com/book/mobile-web-navigation-paradigms 79
  80. 80. Putting contextually relevant information above the fold The area of a page that is viewable without scrolling (known as “above the fold”) is much smaller on a mobile screen. The most contextually relevant information should appear above the fold. 80
  81. 81. Use top-aligned labels for forms 81
  82. 82. Don’t reinvent the wheel Often (but not always) common design problem patterns have common solutions. Take advantage of the research and expertise of others. http://patterns.design4mobile.com/index.php/ Main_Page#Design_Patterns http://patterntap.com/ http://www.mobileawesomeness.com/ http://www.smashingmagazine.com/2009/01/13/mobile- 82
  83. 83. Designing for different mobile browser capabilities from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling 83
  84. 84. Progressive enhancement / graceful degradation from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling 84
  85. 85. Keep content, logic and presentation separate Model-View-Controller Framework e.g. Template Views e.g. Wordpress Controller e.g. MySQL Database Model 85
  86. 86. Keep content, logic and presentation separate Desktop e.g. Template Mobile Views Views e.g. Wordpress Controller e.g. MySQL Database Model 86
  87. 87. Wordpress Mobile Pack Plugin http://wordpress.org/extend/plugins/wordpress-mobile- pack/ Selects themes based on the type of user visiting the site. 87
  88. 88. XSLT (Extensible Stylesheet Language Transformations) Content is defined as XML and then XSLT is used, along with multiple markup languages like HTML, XHTML, WML, XHTML Basic, XHTML-MP, and so on, to provide the proper rendering markup for the viewing context http://www.w3schools.com/xsl/ http://en.wikipedia.org/wiki/XSLT 88
  89. 89. Device Independent Authoring Language (DIAL) Working draft standard for a markup language for the filtering and presentation of Web page content available across different delivery contexts. intended XML language profile of XHTML2 (also a draft) http://www.w3.org/TR/dial/ 89
  90. 90. CSS media queries http://css-tricks.com/6731-css-media-queries/ http://www.w3.org/TR/css3-mediaqueries/ 90
  91. 91. Detect client capabilities with Javascript mo http://diveintohtml5.org/detect.html#geolocation 91
  92. 92. Modernizr Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation Web Technologies. http://www.modernizr.com/ 92
  93. 93. Desktop Web to Mobile Web What content/functionality from my desktop web site will be useful on a mobile device? How will it need to be re-presented so that it works in a mobile context? Will it still be familiar to the user once it is re-presented? What content/functionality will I leave out of the mobile website? Will it break? What extra or enhanced functionality can a mobile website offer my users that the desktop version does not? 93
  94. 94. Desktop Web to Mobile Web Desktop Shared functionality, different presentation Extended/enhanced functionality Mobile 94
  95. 95. Cipher Cities Desktop Vs Mobile 95
  96. 96. Cipher Cities Desktop Vs Mobile 96
  97. 97. What are the range of device capabilities my mobile website will target? What devices do my prospective users have? What devices are capable of providing the functionality my users will want? Trade-off of functionality vs. risk of alienating users with incapable devices 97
  98. 98. Option 1 - Do Nothing Desktop version of site is served to mobile devices un- altered 98
  99. 99. Option 2 - Multi-Serve Same page content delivered to mobile and desktop devices, but CSS and resources (e.g. images) are tailored to the smaller form factor 99
  100. 100. Option 3 - Mobile-Specific Mobile-specific content is created and served to mobile devices. 100
  101. 101. SPEEED! 101
  102. 102. In practical terms... A single 500KB webpage will take a minute to download over a GSM connection. This is the best case scenario - cell networks almost never operate near theoretical maximum speeds and this doesn’t take into account typically high cell network latency and slow browser rendering speed on low-powered mobile devices. The same page could be downloaded and rendered in under a second on a modern desktop browser over a wifi connection. 102
  103. 103. Users won’t see what they can’t be bothered to wait for to display Most uses find wait times more than a few seconds unacceptable. Tolerance is even less if page refreshes are frequent or the context is that of an application where perceived lag will be compared with native apps. 103
  104. 104. A picture isn’t always worth a thousand words. It takes roughly the same amount of space to store a character as a pixel. Therefore a 70px x 70px image takes as long to download as 1000 words of text. Compress your images (duh). Resolution and colour depth both affect image size. Find out what the display capabilities of your target devices are and only serve images of the required dimensions and colour depth. Many older browsers give the option (often by default) to view pages without images, so make sure to code your HTML semantically so it makes sense without them (e.g. include alt-text) 104
  105. 105. Other speed optimisations Keep it simple. If it’s not necessary, don’t include it. This includes content (text/image/audio/video etc.) styles, javascript etc. This applies to download and rendering speed. Complex stylesheets and javascript require more CPU time and as a result adversely affect battery life. Avoid over-pagination. Due to network latency, it may take longer to refresh the page twice than to load double the content. Text can be compressed just like images. Always use minified versions of code libraries and serve compressed HTML/CSS/Javscript if the browser supports it. http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip- compression/ 105
  106. 106. Testing mobile websites - Desktop testing A good deal of your testing can be done on a desktop web browser. In the case of modern, webkit mobile browsers they should effectively render the same. In the least case you can verify and validate the majority of HTML, CSS and Javascript and do some functional testing. http://validator.w3.org/mobile/ You can use iframes to simulate mobile viewports 106
  107. 107. Testing mobile websites In an ideal world you would have one of every device your are targeting to test on. Try and at least test on one real device that is indicative of your main target market. If you can’t afford one, borrow, or even test on demo devices in store. Get the users to test for you with their own devices - provide an easy method for users to give feedback. 107
  108. 108. Usability Testing Test with real users in real contexts. Active - go to the users. Conduct workshops, trials etc. Passive - provide a way for users to send you feedback. 108
  109. 109. Functional Testing Tests if your implementation is functional - the features/ mechanics of your site. 109
  110. 110. Contextual Testing Tests if your design has successfully solved the design problem. How does the user experience render on the device? Does it load quickly, correctly? Progress indicators? On wi-fi, 3G, 2G? Do the physical features of the device work correctly? (keys, orientation change etc.) What happens if the device loses its connection? Can it work in offline mode and recover once connection is re-established. Does geolocation provide an acceptable level of accuracy in different environments? etc. 110
  111. 111. Testing mobile websites - Desktop testing User agent switcher extension for Firefox - http://chrispederick.com/ work/user-agent-switcher/ 111
  112. 112. Testing mobile websites - Desktop testing Opera’s small-screen view 112
  113. 113. Testing mobile websites - Simulators and Emulators dotMobi emulator - http://mtld.mobi/emulator.php 113
  114. 114. Mobile Emulators & Simulators Model Official Platform Type Browser testing Compatibility Apple iOS Official iOS Simulator Safari Mac Google Android Official Android Emulator Android Win, Mac, Unix Nokia Symbian Official Symbian Emulator S60 Browser Win Windows Phone 7 Official Windows Phone Emulator Internet Explorer Win BlackBerry Official RIM OS Emulator RIM Browser Win HP webOS Official webOS Virtual Machine webOS Win, Mac, Unix Opera Mobile Official multi-platform Simulator Opera Mobile Win, Mac, Unix Opera Mini Official multi-platform Online Emulator Opera Mini Win, Mac, Unix Firefox for Mobile Official multi-platform Simulator Firefox Mobile Win, Mac, Unix https://github.com/shichuan/mobile-html5-boilerplate/wiki/Mobile-Emulators-%26-Simulators 114
  115. 115. Testing mobile websites - Remote Access to Real Devices Device Anywhere - http://www.deviceanywhere.com/ 115
  116. 116. The Cipher Cities Mobile Web Design Process... 116
  117. 117. Research the Field Feasibility analysis Current device capabilities and future trends Market saturation Web mobile usage statistics Different delivery approaches: native application vs mobile web browser 117
  118. 118. Research the Field http://www.mobileawesomeness.com/ 118
  119. 119. Workshop Design Ideas and User Case Scenarios 119
  120. 120. Digital Mockups 120
  121. 121. So what did we decide? Enhanced Play ability to search and join games on the move start and stop games access game descriptions and information Build tools that took advantage of ‘on site’ building Messaging 121
  122. 122. So what did we decide? 122
  123. 123. Login 123
  124. 124. Home 124
  125. 125. Game Details / Game Poster 125
  126. 126. Play 126
  127. 127. Builder 127
  128. 128. Messaging 128
  129. 129. Categorisation & Navigation 129
  130. 130. And the cycle continues User Testing Feedback Workshops Design Develop 130
  131. 131. In Conclusion... Always design for the users They provide the context for the application of theoretical design principles Interface development is an iterative and ongoing process. Interface design never goes from idea to resolution in one step… 131