0
Mobile Web Design & Development
In the mobile telecommunications industry, thetechnology is represented by two separate, yetequally important groups: the ...
Evolution of cell networks 1G, 2G, 3G, 4G... generations of cellular network technology that describe the maturity and cap...
Evolution of mobile devices                              4
Brick era: 1973 - 1988         Motorola DynaTAC                            5
Candybar era: 1988 - 1998Critical mass. Mainstream.SMS (first non-voice communication)                                     6
Feature phone era: 1998 -2008camerasaddition of packet-switched data services to networksallowed first use of the Internet ...
Smart phones: 2002 -presentsome overlap between what is considered afeature phone and a smart phone.use a common operating...
Some early mobile web browsers                                   TextNetHopper for Apple        Pocket Internet Explorer  ...
10
Touch phone era: January9, 2007 - presentThough the majority of the technology in the originaliPhone had already been avai...
12
Why mobile?Of the 6 Billion people onEarth, 3.6 Billion people own orhave access to mobile devices.Of those 1.6 Billion (a...
“The [mobile] phone is bigger in its reach than the car(800 million), TV (1.5 billion), or Internet (1.1 billion). Itwill ...
Worldwide, the share of Internet pageviews originating frommobile devices increased 148% in the year to December ’09      ...
Global population vs Mobile population                                         16
Worldwide, the share of Internet pageviews originating frommobile devices increased 148% in the year to December ’09      ...
Operating System share of mobile web          http://gs.statcounter.com    18
Browser share of mobile web      http://gs.statcounter.com   19
Browser share of mobile web by region - Africa               http://gs.statcounter.com         20
Browser share of mobile web by region - South America                 http://gs.statcounter.com              21
Browser share of mobile web by region - Asia              http://gs.statcounter.com        22
Browser share of mobile web by region - Japan              http://gs.statcounter.com         23
Browser share of mobile web by region - Europe               http://gs.statcounter.com         24
Browser share of mobile web by region - North America                 http://gs.statcounter.com              25
Browser share of mobile web by region - Oceania               http://gs.statcounter.com          26
Identifying target market The global mobile device market is especially fragmented. Usage trends rarely map neatly across ...
How do people use themobile web?Most common content segments are news, email,weather, sports, city guides, and social netw...
Mobile usage in Australia2009 43% of online Australians now own a smartphone 26% of social network users participated in m...
Mobile internet usage in Australia 201096% of Australianconsumers own amobile phoneof these 41% use it toaccess the intern...
Mobile internet usage in Australia 2010Accessing information wasa key use of internet onmobile phones, withlooking for map...
Mobile internet usage in Australia 2010Australians are not just usingthe internet on their mobilephones when other methods...
Developing a mobile strategy1. Define the users’ context.2. Determine users’ goals and how they are altered by   context.3....
ContextMobile devices have an unparalleled ability to leverage thecontext in which information is consumed (and produced)C...
Context    Wikitude   eRuv: A Street History in Semacode
Context         Who are your users? What do you know about them? What type of behaviour can you         assume or predict?...
Application contextutility:                                    informative:   short, task-based scenarios                 ...
Application contextfrom Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web a...
Sovereign vs Transientapplication sovereign application monopolises the users attention for long periods of time (e.g. wor...
Advantages of MobileDevicesPopularityPersonal and personalisablePortableConstant connectivity, always on and always with y...
Mobile devices can interactwith their environment clock                 camera calendar                 microphone telepho...
Mobile is a usage scenario more than aform factor mobile users are mobile they expect applications to adapt to their (unpr...
Mobile Device Design Constraints Presentation Issues  Screen size, resolution, colour reproduction   http://sender11.typep...
Mobile Device Design Constraints Input   Limited keypad, small keys   Pointing device? Touch? D-pad?   Affects navigation ...
Mobile Device Design Constraints Hardware limitations    Processing power, memory, battery life etc. Usage environment is ...
Mobile Device Design Constraints Device fragmentation    Proprietary browsers    The range of device and browser capabilit...
Implementation options for     mobile applicationsfrom Mobile Design and DevelopmentPractical concepts and techniques for ...
Native application vs webapplication? http://www.alistapart.com/articles/apps-vs-the-web/ http://www.readwriteweb.com/arch...
Native mobile application Pros                              Cons Offer best user experience,       Cannot be easily ported...
Mobile web application Pros                       Cons Easy to create, using      Can be challenging (but basic HTML, CSS,...
W3C Mobile Web Best Practices 1.0 http://www.w3.org/TR/mobile-bp
Mobile browser capabilitiesfrom Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites a...
Main Mobile Browser Engines   Webkit          Presto          Gecko             Trident     Safari   Chrome Mobile Safari ...
WebkitSame rendering engine as used in Safari and Chromeon the desktop - capable of rendering the “real web”on mobile.Stan...
HTML 5 to the rescue.HTML 5, and the current climate of     New functionality allowed by HTMLintense development around   ...
Geolocationhttp://dev.w3.org/geo/api/spec-source.htmlhttp://diveintohtml5.org/geolocation.htmlhttp://mobile.tutsplus.com/t...
CSS 3allows for creating more complex designs using theminimum of images, making it ideal for mobile design  gradients  tr...
Javascript DHTML AJAX event handling (e.g. multi-touch events)   http://tlrobinson.net/blog/2008/07/11/multitouch-   javas...
Full-screen web apps    <meta content="width=device-width, user-scalable=no, initial-scale=1.0"    name="viewport" />    <...
Trends towards the future... The trends are towards even more “native” feel.   persistence   push   more APIs for accessin...
Native application vs web application -the narrowing gap.  http://www.slideshare.net/mihaiionescu/html5-and-google-chrome-...
Native application vs web application? either way the implementation may differ, the design principles are very much the s...
Designing for multiple screen sizes andorientations http://mobiforge.com/designing/story/effective-design-multiple-screen-...
Average screen size is increasing.
Pixel density physical screen size and resolution do not map as neatly on mobile as they do on desktop pixel density is in...
Designing for multiple screen sizes and orientations Decide early on which screen sizes you will design for (needs analysi...
Viewport meta tags<meta name="HandheldFriendly" content="true" /><meta name="MobileOptimized" content="320" /><meta name="...
Viewport meta tags     With        Without
Information architecture -Navigation Most make or break component of mobile interface design. Users will quickly get frust...
Navigation - input   Scroll            Touch
Design touch friendly webpagesFinger tips are typically around 10mm in sizeSpace elements far enough apart to avoid overla...
Contextual HTML5 form inputs                               73
Contextual HTML5 form inputs                               74
Mobile contextual links <a href="tel:0412345678">Call Me</a> <a href="sms:0412345678">SMS Me</a>                          ...
Navigation - desktop vs mobileTypical desktop webpagelayout with horizontal primarynavigation and secondarysidebar navigat...
Navigation - desktop vs mobile  Typical mobile webpage  layout  Design for vertical scrolling  The most contextual  inform...
Navigation - mobile The most common method of creating mobile navigation schemes is to use a simple vertical list of optio...
Putting contextually relevant informationabove the fold The area of a page that is viewable without scrolling (known as “a...
Use top-aligned labels forforms
Don’t reinvent the wheel Often (but not always) common design problem patterns have common solutions. Take advantage of th...
Designing for different     mobile browser capabilitiesfrom Mobile Design and DevelopmentPractical concepts and techniques...
Progressive enhancement / graceful     degradationfrom Mobile Design and DevelopmentPractical concepts and techniques for ...
Keep content, logic and presentation separate              Model-View-Controller Framework    e.g. Template         Views ...
Keep content, logic and presentation separate                       Desktop    e.g. Template                   Mobile View...
Wordpress Mobile Pack Plugin http://wordpress.org/extend/plugins/wordpress-mobile- pack/ Selects themes based on the type ...
XSLT (Extensible Stylesheet LanguageTransformations) Content is defined as XML and then XSLT is used, along with multiple m...
Device Independent Authoring Language(DIAL) Working draft standard for a markup language for the filtering and presentation...
CSS media querieshttp://css-tricks.com/6731-css-media-queries/http://www.w3.org/TR/css3-mediaqueries/
Detect client capabilitieswith Javascript mohttp://diveintohtml5.org/detect.html#geolocation
ModernizrModernizr is a small JavaScript library that detects theavailability of native implementations for next-generatio...
Desktop Web to Mobile WebWhat content/functionality from my desktop web site willbe useful on a mobile device?  How will i...
Desktop Web to Mobile WebDesktop                Shared functionality,                different presentation               ...
Cipher Cities Desktop Vs Mobile
Cipher Cities Desktop Vs Mobile
What are the range of devicecapabilities my mobile websitewill target? What devices do my prospective users have? What dev...
Option 1 - Do NothingDesktop version of site is served to mobile devices un-altered
Option 2 - Multi-Serve Same page content delivered to mobile and desktop devices, but CSS and resources (e.g. images) are ...
Option 3 - Mobile-SpecificMobile-specific content is created and served to mobiledevices.
SPEEED!
In practical terms... A single 500KB webpage will take a minute to download over a GSM connection. This is the best case s...
Users won’t see what they can’tbe bothered to wait for to display Most uses find wait times more than a few seconds unaccep...
A picture isn’t always wortha thousand words. It takes roughly the same amount of space to store a character as a pixel. T...
Other speed optimisationsKeep it simple. If it’s not necessary, don’t include it. This includes content(text/image/audio/v...
Testing mobile websites -Desktop testing A good deal of your testing can be done on a desktop web browser. In the case of ...
Testing mobile websitesIn an ideal world you would have one of every deviceyour are targeting to test on.Try and at least ...
Usability TestingTest with real users in real contexts.  Active - go to the users. Conduct workshops, trials etc.  Passive...
Functional Testing Tests if your implementation is functional - the features/ mechanics of your site.
Contextual Testing Tests if your design has successfully solved the design problem.   How does the user experience render ...
Testing mobile websites -Desktop testing User agent switcher extension for Firefox - http://chrispederick.com/ work/user-a...
Testing mobile websites -Desktop testing Opera’s small-screen view
Testing mobile websites -Simulators and Emulators dotMobi emulator - http://mtld.mobi/emulator.php
Mobile Emulators & SimulatorsModel                Official            Platform          Type               Browser testing ...
Testing mobile websites -Remote Access to Real DevicesDevice Anywhere - http://www.deviceanywhere.com/
The Cipher Cities MobileWeb Design Process...
Research the FieldFeasibility analysis  Current device capabilities and  future trends  Market saturation  Web mobile usag...
Research the Field   http://www.mobileawesomeness.com/
Workshop Design Ideas and User Case Scenarios
Digital Mockups
So what did we decide?Enhanced Play  ability to search and join games on the move  start and stop games  access game descr...
So what did we decide?
Login
Home
Game Details / Game Poster
Play
Builder
Messaging
Categorisation & Navigation
And the cycle continues     User Testing      Feedback      Workshops       Design       Develop
In Conclusion... Always design for the users   They provide the context for the application of   theoretical design princi...
Mobile Web Design & Development 2011
Upcoming SlideShare
Loading in...5
×

Mobile Web Design & Development 2011

2,779

Published on

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

No Downloads
Views
Total Views
2,779
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
170
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Mobile Web Design & Development 2011"

  1. 1. Mobile Web Design & Development
  2. 2. In the mobile telecommunications industry, thetechnology is represented by two separate, yetequally important groups: the mobile devices,and the cellular networks that connect them.(These are their stories...) 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
  4. 4. Evolution of mobile devices 4
  5. 5. Brick era: 1973 - 1988 Motorola DynaTAC 5
  6. 6. Candybar era: 1988 - 1998Critical mass. Mainstream.SMS (first non-voice communication) 6
  7. 7. Feature phone era: 1998 -2008camerasaddition of packet-switched data services to networksallowed first use of the Internet on a phone.little real innovation and inconsistent interpretation of agreedupon standards.WAP 1.0 and WML provided a “dumbed down” version ofthe webstifled by network operators who focussed on providingdownloadable ringtones, wallpapers, themes etc they couldsell through network portals.poor adoption of mobile web by consumers Motorola RAZR 7
  8. 8. Smart phones: 2002 -presentsome overlap between what is considered afeature phone and a smart phone.use a common operating system, a largerscreen size, a QWERTY keyboard or stylusfor input, and Wi-Fi or another form of high-speed wireless connectivity.consistent frameworks for creatingapplications and services, and a reusableinfrastructure to innovateWAP 2.0 specified use of cut down versionsof XHTML (XHTML-MP) and CSS, bringingdevelopment back in line with the desktopweb.Though standards compliance is still poor. 8
  9. 9. Some early mobile web browsers TextNetHopper for Apple Pocket Internet Explorer Opera Mini Newton 3.0 http://www.phonearena.com/news/Evolution-of-mobile-web-browsing_id9059 9
  10. 10. 10
  11. 11. Touch phone era: January9, 2007 - presentThough the majority of the technology in the originaliPhone had already been available from othermanufacturers, what was notable about the iPhonewas how it changed every-day perceptions of whatmobile technology can do.It made using the mobile web worth while from aconsumer standpoint.http://bits.blogs.nytimes.com/2008/03/18/iphone-users-are-mobile-web-junkies/It made developing for the mobile web worth whilefrom a content provider and developer standpoint.Standards compliant web browsers that use the samerendering engines as their desktop counterparts. 11
  12. 12. 12
  13. 13. Why mobile?Of the 6 Billion people onEarth, 3.6 Billion people own orhave access to mobile devices.Of those 1.6 Billion (andgrowing rapidly) have access tothe web through a mobiledevice.Thats 500 million more people predicted growth of mobile web accessthan have access to Internetconnected desktop computers. 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). Itwill make bigger changes in the next decade than anyof these did. The [mobile] phone adds the combinedutility of the fixed telephone, Internet, computer, creditcard, and TV. The phone will impact your life in moreways than we can imagine, because of its multi-functionality aspect, and its reach.” - Tomi Ahonenhttp://fora.tv/2009/09/24/ 14
  15. 15. Worldwide, the share of Internet pageviews originating frommobile devices increased 148% in the year to December ’09 http://www.quantcast.com/docs/display/info/Mobile+Report 15
  16. 16. Global population vs Mobile population 16
  17. 17. Worldwide, the share of Internet pageviews originating frommobile devices increased 148% in the year to December ’09 http://www.quantcast.com/docs/display/info/Mobile+Report 17
  18. 18. Operating System share of mobile web http://gs.statcounter.com 18
  19. 19. Browser share of mobile web http://gs.statcounter.com 19
  20. 20. Browser share of mobile web by region - Africa http://gs.statcounter.com 20
  21. 21. Browser share of mobile web by region - South America http://gs.statcounter.com 21
  22. 22. Browser share of mobile web by region - Asia http://gs.statcounter.com 22
  23. 23. Browser share of mobile web by region - Japan http://gs.statcounter.com 23
  24. 24. Browser share of mobile web by region - Europe http://gs.statcounter.com 24
  25. 25. Browser share of mobile web by region - North America http://gs.statcounter.com 25
  26. 26. Browser share of mobile web by region - Oceania http://gs.statcounter.com 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
  28. 28. How do people use themobile web?Most common content segments are news, email,weather, sports, city guides, and social networksMobile users tend to perform quick, task basedbehaviours, often whilst in-between other tasks ormulti-tasking.
  29. 29. Mobile usage in Australia2009 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
  30. 30. Mobile internet usage in Australia 201096% of Australianconsumers own amobile phoneof these 41% use it toaccess the internet (upfrom 26% last year) http://www.about.sensis.com.au/small-business/sensis-ebusiness-report/ 30
  31. 31. Mobile internet usage in Australia 2010Accessing information wasa key use of internet onmobile phones, withlooking for maps, weatherand news the topapplications.Social networking was alsoa highly used application;on par with people lookingfor information on productsand services (56% each). http://www.about.sensis.com.au/small-business/sensis-ebusiness-report/ 31
  32. 32. Mobile internet usage in Australia 2010Australians are not just usingthe internet on their mobilephones when other methods ofconnection are not available.The most frequently nominatedplaces for Australians to usethe internet on their mobilephones was at home or work(42%), regardless of the factthat they were likely to haveother methods to connect tothe internet at either of theselocations. http://www.about.sensis.com.au/small-business/sensis-ebusiness-report/ 32
  33. 33. Developing a mobile strategy1. 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.
  34. 34. ContextMobile devices have an unparalleled ability to leverage thecontext 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)
  35. 35. Context Wikitude eRuv: A Street History in Semacode
  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
  37. 37. Application contextutility: informative: short, task-based scenarios only goal is to provide information. Importance is on providing relevant minimal input, at-a-glance information information up front. e.g. calculator, clock, weather e.g. news sites, google reader, forecast wikipedialocale: productivity: use geolocation data to add context heavily task-based content and to information - e.g. find restaurants services. close to me. e.g. ebay, banking e.g. google maps, foursquare immersive: designed to consume the user’s attention. often for entertainment purposes. e.g. games, video, google street-view
  38. 38. Application contextfrom Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling
  39. 39. Sovereign vs Transientapplication sovereign application monopolises the users 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.
  40. 40. Advantages of MobileDevicesPopularityPersonal and personalisablePortableConstant connectivity, always on and always with youAt the point of creative impulseBuilt-in payment channelCaptures social context of media consumption/productionCan interact with their environment
  41. 41. Mobile devices can interactwith their environment clock camera calendar microphone telephony thermometer messaging geolocation ambient light altitude compass
  42. 42. Mobile is a usage scenario more than aform factor mobile users are mobile they expect applications to adapt to their (unpredictable) surroundings
  43. 43. Mobile Device Design Constraints Presentation Issues Screen size, resolution, colour reproduction http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html
  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
  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
  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.
  47. 47. Implementation options for mobile applicationsfrom Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling
  48. 48. Native application vs webapplication? http://www.alistapart.com/articles/apps-vs-the-web/ http://www.readwriteweb.com/archives/ will_mobile_web_apps_eventually_replace_native_apps .php http://mobileanalyticssimplified.com/post/439404358/ the-future-is-the-mobile-web-not-the-mobile-app
  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 the one or more third parties. 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 multiple handsets. support native application features, like offline mode, Content is accessible on location lookup, any mobile web browser. filesystem access, camera, etc. 50
  51. 51. W3C Mobile Web Best Practices 1.0 http://www.w3.org/TR/mobile-bp
  52. 52. Mobile browser capabilitiesfrom Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling
  53. 53. Main Mobile Browser Engines Webkit Presto Gecko Trident Safari Chrome Mobile Safari Firefox Opera Internet ExplorerAndroid Browser Firefox Mobile Opera Mobile IE Mobile Blackberry (Fennec) Palm Kindle 53
  54. 54. WebkitSame rendering engine as used in Safari and Chromeon 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 ofof the mobile internet market.Influencing other browsers to catch up fast. 54
  55. 55. HTML 5 to the rescue.HTML 5, and the current climate of New functionality allowed by HTMLintense development around 5 includes:optimising both desktop and native support for audio andmobile browsers for web video (without plugin)applications are quickly closing thegap between web and native canvas element for drawing /applications, especially in the animationmobile domain. document editinghttp://html5demos.com/ offline storage (keep workinghttp:// without internet connection)www.chromeexperiments.com/ drag and drophttp://www.apple.com/html5/ geolocation 55
  56. 56. Geolocationhttp://dev.w3.org/geo/api/spec-source.htmlhttp://diveintohtml5.org/geolocation.htmlhttp://mobile.tutsplus.com/tutorials/html5/html5-geolocation/https://student.ci.qut.edu.au/~sade/geo/geo-watch-example.html 56
  57. 57. CSS 3allows for creating more complex designs using theminimum of images, making it ideal for mobile design gradients transitions animations custom typographyhttp://www.css3.info/preview/ 57
  58. 58. 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/ 58
  59. 59. 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 59
  60. 60. 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. 61. Native application vs web application -the narrowing gap. http://www.slideshare.net/mihaiionescu/html5-and-google-chrome-devfest09
  62. 62. Native application vs web application? either way the implementation may differ, the design principles are very much the same
  63. 63. Designing for multiple screen sizes andorientations http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html
  64. 64. Average screen size is increasing.
  65. 65. 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)
  66. 66. 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.
  67. 67. Viewport meta tags<meta name="HandheldFriendly" content="true" /><meta name="MobileOptimized" content="320" /><meta name="Viewport" content="width=device-width" />
  68. 68. Viewport meta tags With Without
  69. 69. 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.
  70. 70. Navigation - input Scroll Touch
  71. 71. Design touch friendly webpagesFinger tips are typically around 10mm in sizeSpace elements far enough apart to avoid overlapsbetween touch targets.A stylus can easily be used on an interface designed fortouch, but not the other way round.Take advantage of multi-touch gesturesuse sensors, local storage, contextual form inputs etcto reduce required manual input.
  72. 72. Contextual HTML5 form inputs 73
  73. 73. Contextual HTML5 form inputs 74
  74. 74. Mobile contextual links <a href="tel:0412345678">Call Me</a> <a href="sms:0412345678">SMS Me</a> 75
  75. 75. Navigation - desktop vs mobileTypical desktop webpagelayout with horizontal primarynavigation and secondarysidebar navigation does notmap well to the mobile
  76. 76. 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
  77. 77. 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
  78. 78. Putting contextually relevant informationabove 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.
  79. 79. Use top-aligned labels forforms
  80. 80. 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/
  81. 81. Designing for different mobile browser capabilitiesfrom Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling
  82. 82. Progressive enhancement / graceful degradationfrom Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling
  83. 83. Keep content, logic and presentation separate Model-View-Controller Framework e.g. Template Views e.g. Wordpress Controller e.g. MySQL Database Model
  84. 84. Keep content, logic and presentation separate Desktop e.g. Template Mobile Views Views e.g. Wordpress Controller e.g. MySQL Database Model
  85. 85. Wordpress Mobile Pack Plugin http://wordpress.org/extend/plugins/wordpress-mobile- pack/ Selects themes based on the type of user visiting the site.
  86. 86. XSLT (Extensible Stylesheet LanguageTransformations) 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
  87. 87. 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/
  88. 88. CSS media querieshttp://css-tricks.com/6731-css-media-queries/http://www.w3.org/TR/css3-mediaqueries/
  89. 89. Detect client capabilitieswith Javascript mohttp://diveintohtml5.org/detect.html#geolocation
  90. 90. ModernizrModernizr is a small JavaScript library that detects theavailability of native implementations for next-generation WebTechnologies. http://www.modernizr.com/
  91. 91. Desktop Web to Mobile WebWhat content/functionality from my desktop web site willbe 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 mobilewebsite? Will it break?What extra or enhanced functionality can a mobilewebsite offer my users that the desktop version doesnot?
  92. 92. Desktop Web to Mobile WebDesktop Shared functionality, different presentation Extended/enhanced functionality Mobile
  93. 93. Cipher Cities Desktop Vs Mobile
  94. 94. Cipher Cities Desktop Vs Mobile
  95. 95. What are the range of devicecapabilities my mobile websitewill 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
  96. 96. Option 1 - Do NothingDesktop version of site is served to mobile devices un-altered
  97. 97. 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
  98. 98. Option 3 - Mobile-SpecificMobile-specific content is created and served to mobiledevices.
  99. 99. SPEEED!
  100. 100. 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.
  101. 101. Users won’t see what they can’tbe 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.
  102. 102. A picture isn’t always wortha 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)
  103. 103. Other speed optimisationsKeep 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 andjavascript require more CPU time and as a result adversely affect battery life.Avoid over-pagination. Due to network latency, it may take longer to refreshthe page twice than to load double the content.Text can be compressed just like images. Always use minified versions ofcode libraries and serve compressed HTML/CSS/Javscript if the browsersupports it. http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip- compression/
  104. 104. 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
  105. 105. Testing mobile websitesIn an ideal world you would have one of every deviceyour are targeting to test on.Try and at least test on one real device that is indicativeof your main target market.If you can’t afford one, borrow, or even test on demodevices in store.Get the users to test for you with their own devices -provide an easy method for users to give feedback.
  106. 106. Usability TestingTest 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.
  107. 107. Functional Testing Tests if your implementation is functional - the features/ mechanics of your site.
  108. 108. 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.
  109. 109. Testing mobile websites -Desktop testing User agent switcher extension for Firefox - http://chrispederick.com/ work/user-agent-switcher/
  110. 110. Testing mobile websites -Desktop testing Opera’s small-screen view
  111. 111. Testing mobile websites -Simulators and Emulators dotMobi emulator - http://mtld.mobi/emulator.php
  112. 112. Mobile Emulators & SimulatorsModel Official Platform Type Browser testing CompatibilityApple iOS Official iOS Simulator Safari MacGoogle Android Official Android Emulator Android Win, Mac, UnixNokia Symbian Official Symbian Emulator S60 Browser WinWindows Phone 7 Official Windows Phone Emulator Internet Explorer WinBlackBerry Official RIM OS Emulator RIM Browser WinHP webOS Official webOS Virtual Machine webOS Win, Mac, UnixOpera Mobile Official multi-platform Simulator Opera Mobile Win, Mac, UnixOpera Mini Official multi-platform Online Emulator Opera Mini Win, Mac, UnixFirefox for Mobile Official multi-platform Simulator Firefox Mobile Win, Mac, Unix https://github.com/shichuan/mobile-html5-boilerplate/wiki/Mobile-Emulators-%26-Simulators
  113. 113. Testing mobile websites -Remote Access to Real DevicesDevice Anywhere - http://www.deviceanywhere.com/
  114. 114. The Cipher Cities MobileWeb Design Process...
  115. 115. Research the FieldFeasibility analysis Current device capabilities and future trends Market saturation Web mobile usage statistics Different delivery approaches: native application vs mobile web browser
  116. 116. Research the Field http://www.mobileawesomeness.com/
  117. 117. Workshop Design Ideas and User Case Scenarios
  118. 118. Digital Mockups
  119. 119. So what did we decide?Enhanced Play ability to search and join games on the move start and stop games access game descriptions and informationBuild tools that took advantage of ‘on site’ buildingMessaging
  120. 120. So what did we decide?
  121. 121. Login
  122. 122. Home
  123. 123. Game Details / Game Poster
  124. 124. Play
  125. 125. Builder
  126. 126. Messaging
  127. 127. Categorisation & Navigation
  128. 128. And the cycle continues User Testing Feedback Workshops Design Develop
  129. 129. 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…
  1. A particular slide catching your eye?

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

×