Please enable JavaScript.

Coggle requires JavaScript to display documents.

20 Mobile Web Application Best Practices (3 Best Practice Statements (3.4…

- - - - a better user experience
      - harmful & non-obvious detrimental effects
    - - H5 :forbidden: rather than web content
      - include locally executable elements of interactivity and persistent state
    - - small screen
      - intermittent connectivity
- - - - intrinsic content & supplementary personalization settings
    - - store simple personalization data & token identity
      - :check: automatic sign-in
      - :red_cross: excessive data -> poor performance -> send to server
      - :red_cross: disabled by device config & mobile network
    - - client-side storage better than cookies
        :red_flag: BONDI
        :red_flag: HTML5
        :red_flag: Opera Widgets
      - :check: work when network signal is unreliable
      - :check: displayed immediately
      - how
        
        :pen: key = value
        
        :star: local storage API
    - - :check: visible to the user's other devices (preferences and state relevant only) -> a consistent view across devices
      - :check: recover data if the device is lost or damaged
      - how
        
        client-side storage APIs -> detect network connectivity -> no guarantee a subsequent connection
        
        :pen: navigator.onLine
        
        store unsaved data in a queue of uncommitted changes
        set a timer to try again later
        
        :star: local storage API
  - - - :pen: JSON -> JS eval() to parse it -> Inadvertently executing malicious JS
      - how
        
        :check: use a JSON parser
        
        :red_cross: JS eval()
  - - - :check: types of data used
      - :check: whether / how it exchanged with the server
      - :check: notifying when first using the app
      - :check: enough info
      - how
        
        native confirmation dialog
        
        user decline -> app recover gracefully
        
        :star: Device Data APIs
    - - :check: prompt for user credentials (username and password) -> option to sign-in automatically
      - :check: where there is automatic sign-in, there is a sign-out link
      - how
        
        :check: cookie / local storage
        
        :red_cross: unencrypted password -> insecure
  - - - :check: use of device memory
      - :check: processor power
      - :check: network bandwidth
    - - :check: Compress content for efficient delivery
      - how
        
        :check: balance -> cost of decompressing data & gains in transport efficiency
        
        :red_cross: most images like jpg not benefit from compression
        
        :check: SVG benefit from compression
        
        :red_cross: most video & audio not benefit from compression
        
        :red_cross: small files < 1k not benefit from compression
    - - :check: smaller app -> download quickly & execute quickly
      - how
        
        :check: compress HTML & JS & CSS
        
        :check: shorter variables name -> global substitution
    - - redirection of requests -> exchange info between servers
      - how
        
        :check: not use redirects
        
        :check: using an interstitial page instead
    - - :check: preferable to make fewer, larger requests
      - how
        
        :check: batch up multiple requests at the application level
        
        :check: Throttle low-priority requests:
        
        :check: Back off during periods of inactivity:
        
        :check: Device Context:
    - - :check: fewer, larger requests
      - :red_cross: a larger number of smaller requests
      - how
        
        :check: combine all CSS into a single resource & same as JS
        
        :check: authoring process -> merge before the page is served
    - - CSS sprites tech
      - how
        
        :check: background / icon / button / not change often -> many -> one image -> CSS positioning & clipping
        
        :check: only be applied to decorative images -> not require alt
        
        :star: CSS2 Clipping and Positioning Support
    - - :check: base64
      - :question: balance -> base 64 -> add 10% image size & image -> additional request
      - how
        
        data:image/png;base64
    - - :check: dynamically identify avatars with a URI that includes a hash of the resource content -> resource fingerprinting
      - :smiley: <img src="http://www.example.com/userimages/joeblogs-67f90da089da">
      - how
        
        :check: resource caching policy -> never expire -> date in the far future -> request every time
        
        :check: URI + hash of the content
    - - :check: static resources -> served from a path / sub-domain
      - how
        
        :check:
        /myapp -> app data -> receive cookie info
        /static -> static data -> not receive cookie info
    - - :red_cross: exceed the limit -> error
      - how
        
        :check: pagination
  - - - latency, interaction method, and data consistency
    - - :check: strongly influenced by the beginning of app
      - how
        
        :star: HTML5 AppCache
        
        :check: Use Offline Technology
        
        :check: Consider Partitioning Large Scripts
        
        :check: Use Local Storage
        
        :check: Minimize Number of Local Storage Queries
    - - how
        
        :check: Enable Incremental Rendering -> place JS at the bottom of the page
        
        :check: Keep the User Informed of Activity -> spinners progress bar
        
        :check: Avoid Page Reloads -> different states
        
        :check: Preload Probable Next Views
    - - interaction methods
        
        :check: Focus Based -> keyboard
        
        :check: Pointer Based -> mouse
        
        :check: Touch Based -> finger
      - new interaction methods
        
        :check: voice
        
        :check: assistive technology
      - how
        
        Focus Based
        
        current focus element highlight
        
        focus area can jump automatically
        
        Pointer Based
        
        associated elements be close
        
        large to select -> pointer often moves in steps of 5~10 pixels
        
        selectable element -> hover
        
        Touch Based
        
        elements better to be widely spaced
        
        large to select -> 1cm
        
        nothing be focus until finger click
    - - JS focus() -> set focus for user to preserve
      - :star: focus() JS
    - - :check: hide & show section of the page
      - :red_cross: reload the whole page
      - :check: back button not work -> js control
      - :check: enable deep links -> bookmark -> this page state
      - :check: enable browser history -> this page state
      - how
        
        :star: URI + id -> http://myapp.example.org/myapp#view
        
        :red_cross: adverse affects on accessibility :question:
    - - :check: Standardized URI schemes -> phone call & send SMSs & manage address books
      - :star:
        phone call -> <a href="tel:[PHONE-NUMBER]">[PHONE-NUMBER]</a> -> the full international prefix (e.g. +1-201-555-0111)
        send SMS -> <a href="sms:[PHONE-NUMBER]?body=[MESSAGE]">[PHONE-NUMBER]</a> -> sms:+15105550101?body=hello%20there
    - - :check: paragraph text flows
      - how
        
        :red_cross: absolute position & pixel measures
        
        :check: percentage & relative position & flex
    - - :check: credentials & preferences & data -> one device & other devices
      - how
        
        :check: store credentials & preferences & data on servers
    - - :check: network-initiated content delivery methods -> notifications & updates -> user outside
      - how
        
        :check: OMA Push
        
        :check: SMS
        
        :check: QR codes
        
        :check: Alternative vendor-specific initiatives.
    - - :check: viewport meta
      - how
        
        :star: <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        
        :star: rem
  - - - how
        
        :check: HTTP request
        
        accept
        
        user0agent
        
        x-wap-profile
    - - how
        
        :check: JS -> encapsulating different behaviors & passing gathered info
        
        :check: CSS Media Types -> <link rel="stylesheet" type="text/css" href="print.css" media="print">
        
        :check: CSS Media Queries -> rem
    - - outline
        
        a large number of devices -> a single app variant for each class
      - how
        
        :check: identify target devices -> assign device classes -> work in each class
        
        :star:
        class1 basic XHTML
        class 2 AJAX JS
        class 3 advanced API
        class 1 pointer based
        class 2 touch based
    - - :red_cross: browser no always support JS
      - how
        
        :check: support non-JS version -> low-bandwidth & browser no support
        
        :star: disabled JS <noscript> element should always be included & contain a suitably informative message.
    - - how
        
        :check: multiple versions
        
        :check: default the most appropriate UI
        
        :check: user preference in cookie / local data store