Mobile Web Development - Ready for Primetime?

Slide Control

    On your laptop:

  • ← and → to navigate.
  • Ctrl/Command and + or - to zoom in and out if slides don’t fit.
  • h to toggle help.
  • 2 to toggle speaker notes.

    • On your iOS or Android device:

  • Swipe left or right to navigate or use the controls at the bottom.
  • Landscape mode viewing for best results.

    • This presentation has been designed using Web technologies.

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!

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.

The Native Experience (NX)

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

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 and Local Storage Options Be careful. Clearing your browser cache can wipe the data.

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

The User Experience

Find Your Location

Thin

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

Don't make me enter a zipcode. Determine my location.

Agenda

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

Capabilities and Requirements

Evaluate your app technical and business requirements against technology capabilities

Making the App Decision

A Hybrid Option

Starting with the Web...and moving to the left....

Recommendations

  • Understand your NX requirements
  • Weight the importance of Discoverability