Mobile Web Development - Ready for Primetime?

Tested On

This presentation has been designed using Web technologies.

Desktop Browsers

Mobile Browsers

Slide Control

    On your laptop:

  • ← and → or use < and > controls at bottom to navigate.
  • Ctrl/Command and + or - to zoom in and out if slides don’t fit.
  • h to toggle help. t to toggle Table of Contents.

    • On iOS (touch enabled):

  • Swipe left or right to navigate. Tap to view table of contents.

    • On Android and BlackBerry:

  • Use < and > controls at bottom to navigate. Click TOC to view Table of Contents.

The Mobile Web

Agenda

  • Mobile Web Applications
  • HTML5 Goodness
  • Building Mobile Apps Using Web Technologies

What is a Mobile Web App

They run in your browser and are designed to fit your mobile device. But there is a "richness" spectrum that differentiates.

Resident

  • Code lives on client
  • Smooth transitions
  • Hidden URL
  • Async data load
  • Single page architecture

Thin

  • Code lives on server
  • “Bouncy” browser
  • Visible URL
  • Load data with page
  • Multiple Pages

At the glass, MWAs are virtually indistinguishable from their native counterparts.

Native or Web?

Which of these is the native application?

Click to select your answer!

123

Beyond The Glass

Web apps can't always deliver a native experience!

The Native Experience (NX)

The NX allows you to leverage the hardware capabilities and integrate with local apps and data of the device.

Is the Web ready for mobile?

(HTML5, CSS3, JavaScript)

Is Mobile ready for the Web?

(Android, BlackBerry, iOS, Windows Phone 7)

these are my notes for this slide.

Agenda

  • Mobile Web Applications
  • HTML5 Goodness
  • Building Mobile Apps Using Web Technologies

HTML5 Features

Though several features of the NX aren't available, several HTML5 features are that allow you to deliver a great UX.

Off-Line Applications

Cache Manifest

  • Static resources stored locally on the device
  • App is "updated" when accessed
  • Wiping your browser cache clears resources

Storage

  • For storing data locally on the device
  • Local Storage
  • Session Storage
  • Not viable as "system or record"

This "app" has been cached on your device. Put your device in "airplane" mode. It still works!

The User Experience

Delivering the UX

  • Some features of the NX are available
  • Features of the NX aren't always required to deliver the UX
  • For instance, the GeoLocation API is widely available.

Don't make me enter a zipcode. Determine my location using the device GPS.

Find My Location

Agenda

  • Mobile Web Applications
  • HTML5 Goodness
  • Building Mobile Apps Using Web Technologies

Discoverability

Sometimes, you gotta have an app in the application stores.

Evaluate your app technical and business requirements against technology capabilities.

Requirements and Capabilities

A Hybrid Option

Develop an MWA and embed it using cross platform tools.

  • Leverage features of the NX
  • Reuse your code across platforms.

    • Recommendations

    • Understand your NX requirements
    • Weight the importance of Discoverability
    • Don't trade portability in favor of the UX.
    • Be sure to factor business requirements into the decision to go Web.
    • Don't expect HTML5 to guarantee portability.
    • Adjust Web design practices to accommodate new architectural patterns.

    Recommended Reading

    Gartner Recommended Reading

  • A Guidance Framework for Delivering a Mobile Application to Multiple Platforms Kirk Knoernschild (G00229657)
  • Mobile Web Applications Kirk Knoernschild (G00214647)
  • Mobile Applications: Native, Cross-Compiled, Custom Container, Hybrid, or Web Kirk Knoernschild (G00235099)
  • New Directions for Mobile Enterprise Application Platforms: Convergence 2012, Mutichannel 2018 William Clark (G00230525)
  • Mobile Applications and Interfaces: New Approaches for a Multichannel Future William Clark and David Cearley (G00230586)

    • Colophon

    This presentation was created using Web technologies (HTML5, CSS3, and JavaScript). It utilizes a single page architecture and is designed to run in many popular desktop and mobile browsers. It runs best on the desktop, but has also been optimized for iOS.

    The presentation uses a cache-manifest file to store all static resources (i.e., images, HTML, JavaScript, CSS) locally on your device. Subsequently, after accessing this presentation for the first time, you will be able to reference it even in the absence of an internet connection, though some components that rely on connectivity (e.g., GeoLocation) may not function.

    Subtle inconsistencies across mobile browsers required that I used different interaction styles. For instance, on iOS, touch is completely supported. However, for Android and BlackBerry, it is not due to browser bugs such as the Android touchEnd event not firing properly. Likewise, because advanced CSS transition are used, IE is not supported at all.

    You may be wondering why I made some of these decisions (i.e. optimized for iOS, not supporting Windows Phone). A big part of the reason is due to some very interesting findings from our recent mobile application field research study. I can provide all the nitty gritty details. Just schedule an inquiry while you're at the conference, and we can chat.