SlideShare une entreprise Scribd logo
1  sur  131
Télécharger pour lire hors ligne
Mobile Web Design & Development
                                  2
                                  1
                                  1
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
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
Evolution of mobile devices




                              4

                                  4
Brick era: 1973 - 1988




               Motorola DynaTAC   5

                                      5
Candybar era: 1988 - 1998



Critical mass. Mainstream.
SMS (first non-voice communication)




                                     6

                                         6
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
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
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
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
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
“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
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
Global population vs Mobile population




                                         16

                                          16
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
Operating System share of mobile web




          http://gs.statcounter.com    18

                                        18
Browser share of mobile web




      http://gs.statcounter.com   19

                                   19
Browser share of mobile web by region - Africa




               http://gs.statcounter.com         20

                                                  20
Browser share of mobile web by region - South America




                 http://gs.statcounter.com              21

                                                         21
Browser share of mobile web by region - Asia




              http://gs.statcounter.com        22

                                                22
Browser share of mobile web by region - Japan




               http://gs.statcounter.com        23

                                                 23
Browser share of mobile web by region - Europe




               http://gs.statcounter.com         24

                                                  24
Browser share of mobile web by region - North America




                 http://gs.statcounter.com              25

                                                         25
Browser share of mobile web by region - Oceania




                http://gs.statcounter.com         26

                                                   26
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
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
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
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
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
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
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
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
Context




    Wikitude   eRuv: A Street History in Semacode




                                                    35
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
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
Application context




from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling

                                                                                                                            38
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
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
Mobile devices can interact
with their environment

 clock
                 camera
 calendar
                 microphone
 telephony
                 thermometer
 messaging
                 geolocation
 ambient light
                 altitude
 compass


                               41
Mobile is a usage scenario more than a
form factor




 mobile users are mobile
 they expect applications to adapt to their (unpredictable)
 surroundings



                                                              42
Mobile Device Design Constraints
 Presentation Issues
  Screen size, resolution, colour reproduction




     http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html
                                                                         43
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
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
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
Implementation options for
mobile applications




from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling

                                                                                                                            47
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
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
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
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
W3C Mobile Web Best Practices 1.0

 http://www.w3.org/TR/mobile-bp




                                    52
Mobile browser capabilities




from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling

                                                                                                                            53
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
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
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
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
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
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
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
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
Native application vs web application -
the narrowing gap.




   http://www.slideshare.net/mihaiionescu/html5-and-google-chrome-devfest09
                                                                              62
Native application vs web application?




 either way the implementation may differ, the design
 principles are very much the same




                                                        63
64
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
Average screen size is increasing.




                                     66
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
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
Viewport meta tags

<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="Viewport" content="width=device-width" />




                                                        69
Viewport meta tags




     With        Without
                           70
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
Navigation - input
   Scroll            Touch




                             72
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
Contextual HTML5 form inputs




                               74

                                74
Contextual HTML5 form inputs




                               75

                                75
Mobile contextual links
 <a href="tel:0412345678">Call Me</a>
 <a href="sms:0412345678">SMS Me</a>




                                        76

                                         76
Navigation - desktop vs mobile

Typical desktop webpage
layout with horizontal primary
navigation and secondary
sidebar navigation does not
map well to the mobile




                                 77
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
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
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
Use top-aligned labels for
forms




                             81
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
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
Progressive enhancement / graceful
degradation




from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling

                                                                                                                            84
Keep content, logic and presentation separate

                Model-View-Controller Framework


    e.g. Template           Views




   e.g. Wordpress         Controller




 e.g. MySQL Database        Model


                                                  85
Keep content, logic and presentation separate



                       Desktop
    e.g. Template                   Mobile Views
                        Views




   e.g. Wordpress      Controller




 e.g. MySQL Database     Model


                                                   86
Wordpress Mobile Pack Plugin
 http://wordpress.org/extend/plugins/wordpress-mobile-
 pack/
 Selects themes based on the type of user visiting the site.




                                                               87
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
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
CSS media queries




http://css-tricks.com/6731-css-media-queries/
http://www.w3.org/TR/css3-mediaqueries/

                                                90
Detect client capabilities with
Javascript


 mo




 http://diveintohtml5.org/detect.html#geolocation
                                                    91
Modernizr
Modernizr is a small JavaScript library that detects the
availability of native implementations for next-generation Web
Technologies.




             http://www.modernizr.com/
                                                                 92
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
Desktop Web to Mobile Web
Desktop
                 Shared functionality,
                 different presentation




                           Extended/enhanced
                               functionality




                Mobile


                                               94
Cipher Cities Desktop Vs Mobile




                                  95
Cipher Cities Desktop Vs Mobile




                                  96
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
Option 1 - Do Nothing

 Desktop version of site is served to mobile devices un-
 altered




                                                           98
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
Option 3 - Mobile-Specific

 Mobile-specific content is created and served to mobile
 devices.




                                                          100
SPEEED!




          101
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
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
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
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
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
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
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
Functional Testing



 Tests if your implementation is functional - the features/
 mechanics of your site.




                                                              109
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
Testing mobile websites -
Desktop testing


 User agent switcher extension for
 Firefox - http://chrispederick.com/
 work/user-agent-switcher/




                                       111
Testing mobile websites -
Desktop testing


 Opera’s small-screen view




                             112
Testing mobile websites -
Simulators and Emulators




 dotMobi emulator - http://mtld.mobi/emulator.php
                                                    113
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
Testing mobile websites -
Remote Access to Real Devices




Device Anywhere - http://www.deviceanywhere.com/
                                                   115
The Cipher Cities Mobile Web
Design Process...




                               116
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
Research the Field




   http://www.mobileawesomeness.com/
                                       118
Workshop Design Ideas and User Case Scenarios




                                                119
Digital Mockups




                  120
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
So what did we decide?




                         122
Login




        123
Home




       124
Game Details / Game Poster




                             125
Play




       126
Builder




          127
Messaging




            128
Categorisation & Navigation




                              129
And the cycle continues

          User
         Testing
        Feedback

       Workshops

         Design

        Develop



                          130
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

Contenu connexe

Tendances

Social Networks On Cell Phones Mobile Devices
Social Networks On Cell Phones Mobile DevicesSocial Networks On Cell Phones Mobile Devices
Social Networks On Cell Phones Mobile DevicesLaurel Papworth
 
The Surge: Summary of Mobile in Europe (EU5)
The Surge: Summary of Mobile in Europe (EU5)The Surge: Summary of Mobile in Europe (EU5)
The Surge: Summary of Mobile in Europe (EU5)ARC Science
 
Mobile SEA report 2012
Mobile SEA report 2012Mobile SEA report 2012
Mobile SEA report 2012action.vn
 
26 05-2011 mobile havas 2
26 05-2011 mobile havas 226 05-2011 mobile havas 2
26 05-2011 mobile havas 2Hugues Rey
 
The Smartphone Snapshot Showdown (Global Smartphone and Mobile Video Stats)
The Smartphone Snapshot Showdown (Global Smartphone and Mobile Video Stats)The Smartphone Snapshot Showdown (Global Smartphone and Mobile Video Stats)
The Smartphone Snapshot Showdown (Global Smartphone and Mobile Video Stats)Jon Hoehler
 
A World Gone Mobile
A World Gone MobileA World Gone Mobile
A World Gone MobileMoviebites
 
50 Stunning Mobile Statistics
50 Stunning Mobile Statistics50 Stunning Mobile Statistics
50 Stunning Mobile StatisticsVala Afshar
 
Mobile Trends 2008 - America's Emerging Mobile Web
Mobile Trends 2008 - America's Emerging Mobile WebMobile Trends 2008 - America's Emerging Mobile Web
Mobile Trends 2008 - America's Emerging Mobile WebMarta Strickland
 
IAB Global Mobile Anthology
IAB Global Mobile AnthologyIAB Global Mobile Anthology
IAB Global Mobile AnthologyIAB México
 
Engaging Connection: Building & Wielding Social Media Skills
Engaging Connection: Building & Wielding Social Media SkillsEngaging Connection: Building & Wielding Social Media Skills
Engaging Connection: Building & Wielding Social Media SkillsBradd Anderson
 
Market research on mobile phone market in China
Market research on mobile phone market in ChinaMarket research on mobile phone market in China
Market research on mobile phone market in Chinakwanghan
 
Mobile future of newspapers
Mobile future of newspapersMobile future of newspapers
Mobile future of newspapersGreg Piechota
 
Mobile consumer-report-2013
Mobile consumer-report-2013Mobile consumer-report-2013
Mobile consumer-report-2013Marie Park
 
Comscore: Mobile future-in-focus-report-2013
Comscore: Mobile future-in-focus-report-2013Comscore: Mobile future-in-focus-report-2013
Comscore: Mobile future-in-focus-report-2013Brian Crotty
 
山东移动全业务运营的竞争策略探讨 P P T38
山东移动全业务运营的竞争策略探讨 P P T38山东移动全业务运营的竞争策略探讨 P P T38
山东移动全业务运营的竞争策略探讨 P P T38woyaozhangda
 

Tendances (18)

Mobile input lukew
Mobile input lukewMobile input lukew
Mobile input lukew
 
Social Networks On Cell Phones Mobile Devices
Social Networks On Cell Phones Mobile DevicesSocial Networks On Cell Phones Mobile Devices
Social Networks On Cell Phones Mobile Devices
 
The Surge: Summary of Mobile in Europe (EU5)
The Surge: Summary of Mobile in Europe (EU5)The Surge: Summary of Mobile in Europe (EU5)
The Surge: Summary of Mobile in Europe (EU5)
 
Mobile SEA report 2012
Mobile SEA report 2012Mobile SEA report 2012
Mobile SEA report 2012
 
26 05-2011 mobile havas 2
26 05-2011 mobile havas 226 05-2011 mobile havas 2
26 05-2011 mobile havas 2
 
Dossier m-learning1
Dossier m-learning1Dossier m-learning1
Dossier m-learning1
 
The Smartphone Snapshot Showdown (Global Smartphone and Mobile Video Stats)
The Smartphone Snapshot Showdown (Global Smartphone and Mobile Video Stats)The Smartphone Snapshot Showdown (Global Smartphone and Mobile Video Stats)
The Smartphone Snapshot Showdown (Global Smartphone and Mobile Video Stats)
 
A World Gone Mobile
A World Gone MobileA World Gone Mobile
A World Gone Mobile
 
50 Stunning Mobile Statistics
50 Stunning Mobile Statistics50 Stunning Mobile Statistics
50 Stunning Mobile Statistics
 
Mobile Trends 2008 - America's Emerging Mobile Web
Mobile Trends 2008 - America's Emerging Mobile WebMobile Trends 2008 - America's Emerging Mobile Web
Mobile Trends 2008 - America's Emerging Mobile Web
 
IAB Global Mobile Anthology
IAB Global Mobile AnthologyIAB Global Mobile Anthology
IAB Global Mobile Anthology
 
Engaging Connection: Building & Wielding Social Media Skills
Engaging Connection: Building & Wielding Social Media SkillsEngaging Connection: Building & Wielding Social Media Skills
Engaging Connection: Building & Wielding Social Media Skills
 
Market research on mobile phone market in China
Market research on mobile phone market in ChinaMarket research on mobile phone market in China
Market research on mobile phone market in China
 
Mobile future of newspapers
Mobile future of newspapersMobile future of newspapers
Mobile future of newspapers
 
Mobile consumer-report-2013
Mobile consumer-report-2013Mobile consumer-report-2013
Mobile consumer-report-2013
 
Mobile Future in Focus 2013
Mobile Future in Focus 2013Mobile Future in Focus 2013
Mobile Future in Focus 2013
 
Comscore: Mobile future-in-focus-report-2013
Comscore: Mobile future-in-focus-report-2013Comscore: Mobile future-in-focus-report-2013
Comscore: Mobile future-in-focus-report-2013
 
山东移动全业务运营的竞争策略探讨 P P T38
山东移动全业务运营的竞争策略探讨 P P T38山东移动全业务运营的竞争策略探讨 P P T38
山东移动全业务运营的竞争策略探讨 P P T38
 

Similaire à Mobile Web Design & Development 2012 Lecture

Mobile services and its impact on GPDs and Return on Investment
Mobile services and its impact on GPDs and Return on InvestmentMobile services and its impact on GPDs and Return on Investment
Mobile services and its impact on GPDs and Return on InvestmentKartik Mehta
 
Sitecore mobile whitepaperManaging the Mobile Rush: Smart Strategies for Mult...
Sitecore mobile whitepaperManaging the Mobile Rush: Smart Strategies for Mult...Sitecore mobile whitepaperManaging the Mobile Rush: Smart Strategies for Mult...
Sitecore mobile whitepaperManaging the Mobile Rush: Smart Strategies for Mult...LocalDirectgov
 
Managing the Mobile Rush: Smart Strategies for Multi‐channel Publishing
Managing the Mobile Rush: Smart Strategies for Multi‐channel PublishingManaging the Mobile Rush: Smart Strategies for Multi‐channel Publishing
Managing the Mobile Rush: Smart Strategies for Multi‐channel PublishingLocalDirectgov
 
Wave 3 - Anytime Anyplace
Wave 3 - Anytime AnyplaceWave 3 - Anytime Anyplace
Wave 3 - Anytime AnyplaceThorsten Linz
 
Global internet society report 2015
Global internet society report 2015Global internet society report 2015
Global internet society report 2015Tuan Anh Nguyen
 
Why mobile matters
Why mobile mattersWhy mobile matters
Why mobile mattersAmy Gahran
 
Harnessing-Mobile-Internet
Harnessing-Mobile-InternetHarnessing-Mobile-Internet
Harnessing-Mobile-Interneteweinman
 
American University Presentation (3) 2012 on Mobile Trends and Emerging Techn...
American University Presentation (3) 2012 on Mobile Trends and Emerging Techn...American University Presentation (3) 2012 on Mobile Trends and Emerging Techn...
American University Presentation (3) 2012 on Mobile Trends and Emerging Techn...Wayne Chen
 
The potential of digital publishing in an emerging market : John Wheeler
The potential of digital publishing in an emerging market : John WheelerThe potential of digital publishing in an emerging market : John Wheeler
The potential of digital publishing in an emerging market : John WheelerFootnote Summit
 
Wikimedia mobile strategy final01.04.11
Wikimedia mobile strategy final01.04.11Wikimedia mobile strategy final01.04.11
Wikimedia mobile strategy final01.04.11manipande
 
The Mobile Industry & Ecosystem (March 2010)
The Mobile Industry & Ecosystem (March 2010)The Mobile Industry & Ecosystem (March 2010)
The Mobile Industry & Ecosystem (March 2010)Shane Williamson
 
Network 2020: Connecting Everyone to Everything
Network 2020: Connecting Everyone to Everything Network 2020: Connecting Everyone to Everything
Network 2020: Connecting Everyone to Everything Verizon Thought Leadership
 
Mobile opportunity and options for it
Mobile opportunity and options   for itMobile opportunity and options   for it
Mobile opportunity and options for itTim McGovern
 
Mobile system overview
Mobile system overviewMobile system overview
Mobile system overviewJack Zheng
 
50 Stunning Mobile Statistics 2013
50 Stunning Mobile Statistics 201350 Stunning Mobile Statistics 2013
50 Stunning Mobile Statistics 2013Melih Özdemir
 
50 stunning mobile statistics - trends in gadgets and mobility
50 stunning mobile statistics - trends in gadgets and mobility50 stunning mobile statistics - trends in gadgets and mobility
50 stunning mobile statistics - trends in gadgets and mobilityAli Kafel
 
Scaling Mobile for Development: A developing world opportunity
Scaling Mobile for Development: A developing world opportunityScaling Mobile for Development: A developing world opportunity
Scaling Mobile for Development: A developing world opportunityGSMA Mobile for Development
 
Incorporating Mobile Commerce in your Multi-Channel strategy
Incorporating Mobile Commerce in your Multi-Channel strategy Incorporating Mobile Commerce in your Multi-Channel strategy
Incorporating Mobile Commerce in your Multi-Channel strategy IBM Software India
 

Similaire à Mobile Web Design & Development 2012 Lecture (20)

Mobile services and its impact on GPDs and Return on Investment
Mobile services and its impact on GPDs and Return on InvestmentMobile services and its impact on GPDs and Return on Investment
Mobile services and its impact on GPDs and Return on Investment
 
Sitecore mobile whitepaperManaging the Mobile Rush: Smart Strategies for Mult...
Sitecore mobile whitepaperManaging the Mobile Rush: Smart Strategies for Mult...Sitecore mobile whitepaperManaging the Mobile Rush: Smart Strategies for Mult...
Sitecore mobile whitepaperManaging the Mobile Rush: Smart Strategies for Mult...
 
Managing the Mobile Rush: Smart Strategies for Multi‐channel Publishing
Managing the Mobile Rush: Smart Strategies for Multi‐channel PublishingManaging the Mobile Rush: Smart Strategies for Multi‐channel Publishing
Managing the Mobile Rush: Smart Strategies for Multi‐channel Publishing
 
Wave 3 - Anytime Anyplace
Wave 3 - Anytime AnyplaceWave 3 - Anytime Anyplace
Wave 3 - Anytime Anyplace
 
Global internet society report 2015
Global internet society report 2015Global internet society report 2015
Global internet society report 2015
 
Why mobile matters
Why mobile mattersWhy mobile matters
Why mobile matters
 
Harnessing-Mobile-Internet
Harnessing-Mobile-InternetHarnessing-Mobile-Internet
Harnessing-Mobile-Internet
 
American University Presentation (3) 2012 on Mobile Trends and Emerging Techn...
American University Presentation (3) 2012 on Mobile Trends and Emerging Techn...American University Presentation (3) 2012 on Mobile Trends and Emerging Techn...
American University Presentation (3) 2012 on Mobile Trends and Emerging Techn...
 
The potential of digital publishing in an emerging market : John Wheeler
The potential of digital publishing in an emerging market : John WheelerThe potential of digital publishing in an emerging market : John Wheeler
The potential of digital publishing in an emerging market : John Wheeler
 
indiana library federation reference conference keynote
indiana library federation reference conference keynoteindiana library federation reference conference keynote
indiana library federation reference conference keynote
 
Wikimedia mobile strategy final01.04.11
Wikimedia mobile strategy final01.04.11Wikimedia mobile strategy final01.04.11
Wikimedia mobile strategy final01.04.11
 
The Mobile Industry & Ecosystem (March 2010)
The Mobile Industry & Ecosystem (March 2010)The Mobile Industry & Ecosystem (March 2010)
The Mobile Industry & Ecosystem (March 2010)
 
Network 2020: Connecting Everyone to Everything
Network 2020: Connecting Everyone to Everything Network 2020: Connecting Everyone to Everything
Network 2020: Connecting Everyone to Everything
 
Mobile opportunity and options for it
Mobile opportunity and options   for itMobile opportunity and options   for it
Mobile opportunity and options for it
 
Mobile system overview
Mobile system overviewMobile system overview
Mobile system overview
 
50 Stunning Mobile Statistics 2013
50 Stunning Mobile Statistics 201350 Stunning Mobile Statistics 2013
50 Stunning Mobile Statistics 2013
 
50 stunning mobile statistics - trends in gadgets and mobility
50 stunning mobile statistics - trends in gadgets and mobility50 stunning mobile statistics - trends in gadgets and mobility
50 stunning mobile statistics - trends in gadgets and mobility
 
Mobile Tehnology
Mobile TehnologyMobile Tehnology
Mobile Tehnology
 
Scaling Mobile for Development: A developing world opportunity
Scaling Mobile for Development: A developing world opportunityScaling Mobile for Development: A developing world opportunity
Scaling Mobile for Development: A developing world opportunity
 
Incorporating Mobile Commerce in your Multi-Channel strategy
Incorporating Mobile Commerce in your Multi-Channel strategy Incorporating Mobile Commerce in your Multi-Channel strategy
Incorporating Mobile Commerce in your Multi-Channel strategy
 

Plus de Dave Wallace

Anatomy of a Wordpress theme
Anatomy of a Wordpress themeAnatomy of a Wordpress theme
Anatomy of a Wordpress themeDave Wallace
 
Installing wordpress
Installing wordpressInstalling wordpress
Installing wordpressDave Wallace
 
Lecture the dynamic web (2013)
Lecture   the dynamic web (2013)Lecture   the dynamic web (2013)
Lecture the dynamic web (2013)Dave Wallace
 
Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Dave Wallace
 
Content Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme developmentContent Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme developmentDave Wallace
 
The Edge - Datahack Workshop
The Edge - Datahack WorkshopThe Edge - Datahack Workshop
The Edge - Datahack WorkshopDave Wallace
 

Plus de Dave Wallace (8)

Anatomy of a Wordpress theme
Anatomy of a Wordpress themeAnatomy of a Wordpress theme
Anatomy of a Wordpress theme
 
Installing wordpress
Installing wordpressInstalling wordpress
Installing wordpress
 
Lecture the dynamic web (2013)
Lecture   the dynamic web (2013)Lecture   the dynamic web (2013)
Lecture the dynamic web (2013)
 
The Dynamic Web
The Dynamic WebThe Dynamic Web
The Dynamic Web
 
Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Cms & wordpress theme development 2011
Cms & wordpress theme development 2011
 
Content Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme developmentContent Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme development
 
Dynamic Web
Dynamic WebDynamic Web
Dynamic Web
 
The Edge - Datahack Workshop
The Edge - Datahack WorkshopThe Edge - Datahack Workshop
The Edge - Datahack Workshop
 

Dernier

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
The Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementThe Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementNuwan Dias
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"DianaGray10
 
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdfPaige Cruz
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 

Dernier (20)

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
The Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementThe Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API Management
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
 
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 

Mobile Web Design & Development 2012 Lecture

  • 1. Mobile Web Design & Development 2 1 1
  • 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. 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. Evolution of mobile devices 4 4
  • 5. Brick era: 1973 - 1988 Motorola DynaTAC 5 5
  • 6. Candybar era: 1988 - 1998 Critical mass. Mainstream. SMS (first non-voice communication) 6 6
  • 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. 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. 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
  • 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
  • 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. “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. 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. Global population vs Mobile population 16 16
  • 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. Operating System share of mobile web http://gs.statcounter.com 18 18
  • 19. Browser share of mobile web http://gs.statcounter.com 19 19
  • 20. Browser share of mobile web by region - Africa http://gs.statcounter.com 20 20
  • 21. Browser share of mobile web by region - South America http://gs.statcounter.com 21 21
  • 22. Browser share of mobile web by region - Asia http://gs.statcounter.com 22 22
  • 23. Browser share of mobile web by region - Japan http://gs.statcounter.com 23 23
  • 24. Browser share of mobile web by region - Europe http://gs.statcounter.com 24 24
  • 25. Browser share of mobile web by region - North America http://gs.statcounter.com 25 25
  • 26. Browser share of mobile web by region - Oceania http://gs.statcounter.com 26 26
  • 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. 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. 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. 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. 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. 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. 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. 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. Context Wikitude eRuv: A Street History in Semacode 35
  • 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. 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. Application context from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling 38
  • 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. 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. Mobile devices can interact with their environment clock camera calendar microphone telephony thermometer messaging geolocation ambient light altitude compass 41
  • 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. Mobile Device Design Constraints Presentation Issues Screen size, resolution, colour reproduction http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html 43
  • 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. 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. 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. 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. 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. 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. 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. 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. W3C Mobile Web Best Practices 1.0 http://www.w3.org/TR/mobile-bp 52
  • 53. Mobile browser capabilities from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling 53
  • 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. 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. 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
  • 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. 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. 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. 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. Native application vs web application - the narrowing gap. http://www.slideshare.net/mihaiionescu/html5-and-google-chrome-devfest09 62
  • 63. Native application vs web application? either way the implementation may differ, the design principles are very much the same 63
  • 64. 64
  • 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. Average screen size is increasing. 66
  • 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. 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. Viewport meta tags <meta name="HandheldFriendly" content="true" /> <meta name="MobileOptimized" content="320" /> <meta name="Viewport" content="width=device-width" /> 69
  • 70. Viewport meta tags With Without 70
  • 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. Navigation - input Scroll Touch 72
  • 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. Contextual HTML5 form inputs 74 74
  • 75. Contextual HTML5 form inputs 75 75
  • 76. Mobile contextual links <a href="tel:0412345678">Call Me</a> <a href="sms:0412345678">SMS Me</a> 76 76
  • 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. 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. 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. 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. Use top-aligned labels for forms 81
  • 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. 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. Progressive enhancement / graceful degradation from Mobile Design and DevelopmentPractical concepts and techniques for creating mobile sites and web apps by Brian Fling 84
  • 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. Keep content, logic and presentation separate Desktop e.g. Template Mobile Views Views e.g. Wordpress Controller e.g. MySQL Database Model 86
  • 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. 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. 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
  • 91. Detect client capabilities with Javascript mo http://diveintohtml5.org/detect.html#geolocation 91
  • 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. 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. Desktop Web to Mobile Web Desktop Shared functionality, different presentation Extended/enhanced functionality Mobile 94
  • 95. Cipher Cities Desktop Vs Mobile 95
  • 96. Cipher Cities Desktop Vs Mobile 96
  • 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. Option 1 - Do Nothing Desktop version of site is served to mobile devices un- altered 98
  • 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. Option 3 - Mobile-Specific Mobile-specific content is created and served to mobile devices. 100
  • 101. SPEEED! 101
  • 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. 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. 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. 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. 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. 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. 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. Functional Testing Tests if your implementation is functional - the features/ mechanics of your site. 109
  • 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. Testing mobile websites - Desktop testing User agent switcher extension for Firefox - http://chrispederick.com/ work/user-agent-switcher/ 111
  • 112. Testing mobile websites - Desktop testing Opera’s small-screen view 112
  • 113. Testing mobile websites - Simulators and Emulators dotMobi emulator - http://mtld.mobi/emulator.php 113
  • 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. Testing mobile websites - Remote Access to Real Devices Device Anywhere - http://www.deviceanywhere.com/ 115
  • 116. The Cipher Cities Mobile Web Design Process... 116
  • 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. Research the Field http://www.mobileawesomeness.com/ 118
  • 119. Workshop Design Ideas and User Case Scenarios 119
  • 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. So what did we decide? 122
  • 123. Login 123
  • 124. Home 124
  • 125. Game Details / Game Poster 125
  • 126. Play 126
  • 127. Builder 127
  • 128. Messaging 128
  • 130. And the cycle continues User Testing Feedback Workshops Design Develop 130
  • 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