Building a Mobile Web App with HTML5

30 May 2012
Mosquito Mobile Web Interop, Paris, France
Dominique Hazaël-Massieux <dom@w3.org> @dontcallmedom

This project is funded by the European Union through the Seventh Framework Programme (FP7/2010-2012) under grant agreement n°257800
- Mobile Web Applications (MobiWebApp)

W3C

Funded and directed by Web inventor Tim Berners-Lee
International consortium of 360+ organizations (w3.org/join)
Staff of 60 in Europe, USA, Japan
Home of HTML5, CSS, SVG, JavaScript APIs, etc.
Dedicated efforts around mobile

Mobile

Different constraints
Different opportunities

Constraints

smaller physical screens
difficult to use keyboards
no mouse
lesser network connectivity
reduced CPU & memory
diversity & fragmentation
different usage patterns

Advantages

always available
intuitive touch interfaces
full of sensors
easy access to audio & video
different usage patterns

Mobile Web

Adapt layout
Adapt input
Reduce network usage
Reduce CPU & memory usage
Adapt content

Layout

physical sizes: 3-4"
Resolution: 120-800px wide
Portrait orientation
Older browsers: partial screen view
Recent browsers: zoomed out
Scroll bars and zooming best avoided

Adapting Layout: viewport

Default rendering viewport: 800 to 1000px wide

Adapted viewport with<meta name='viewport' content=''>

Different descriptors: width, height, target-densitydpi, initial-scale, user-scalable, …
A pixel is not a pixel is not a pixel
<meta name='viewport' content='width=device-width'>

Adapting Layout: style

Adapt style to screen size:

<link rel='stylesheet' href='default.css'>
<link rel='stylesheet' href='large_screen.css'
    media='screen and (min-width:600px)'>

Use liquid or elastic layout, preferably in single column

Input

keyboard:
- Keypad: text entry difficult
- physcial keyboard: tiny keys
- touch keyboard: slow, takes up screen space
no mouse; increasingly touch-based UI

Reducing text entry

<input type=tel>
<input type=email>
<input type=date>
<datalist><option value=…></datalist>

Soon (?):

<input type='text' speech>

No mouse

large hit targets for touch-based devices
sequential navigation in the page
can’t rely on "hover"
touchstart, touchmove, touchend events
multitouch

Network

limited bandwidth
high latency
network traffic costly or under quota
on and off

Reduce Network Usage

Minify/gzip markup, stylesheets, scripts
Use HTTP caching:
- Cache-Control
- Last-Modified
Reduce size and number of external resources:
- images (CSS sprites, EXIF data, optimization)
- scripts (JS libraries)
- aggregate stylesheets
Use XMLHttpRequest for partial updates
Optimize cookies

Prepare for Offline Operations

Data storage:

window.localStorage

Better, but later:

var db = window.indexedDB.open(dbname);

Offline caching:

<html manifest='manifest_file'>

CPU & memory

slower CPUs
CPU usage drains battery
more limited memory

Optimize CPU & memory usage

Resize images on the server
Avoid long-running scripts
Limit page reflow and repaints
Limit size of pages, script objects
Limit network usage

Diversity & Fragmentation

Much more diversity than on computers
Wide-ranging capabilities among browsers

Content Adaptation

Responsive Web Design:
- CSS Media Queries
- Mobile first
- JavaScript Feature detection
Server-side content adaptation

Mobile Web Applications

vs “Native” Apps
freedom to deploy and update
cross-platform, cross-devices

Building Mobile Web Applications

Slicker UI
Sensors
Hardware
Better use of network

Slicker User Interfaces

Mouse over this circle

The other side!

SVG
CSS3 animations & transformations
canvas

Sensors

Geolocation:

navigator.geolocation.getCurrentPosition(…)

Accelerometer / gyroscope:

addEventListener('devicemotion', …)

Hardware (soon)

Battery:

navigator.battery.
   addEventListener('dischargingtimechange', …)

Camera / Mike:

navigator.getUserMedia({video:true,audio:true},…)

Better connectivity

Adapt to network type:

if (navigator.connection.type) == "3g") { … }

Optimize polling:

var eventsource = new EventSource();
eventsource.onmessage = function(event) { … }

Bidirectional connection:

var socket = new WebSocket(
            'ws://game.example.com:12010/updates');
	  socket.onopen = function () { …};

Soon, P2P connection:

var connection = new PeerConnection('STUNS example.net',
                          signalingCallback);

UI + Sensor + Network

Web & Connected devices

computers
phones
tablets
TVs
soon: cars, home automation, cameras, etc.

Learn more

Relever le défi du Web mobile, ed. Eyrolles
Mobile Web Initiative Web site, with Best Practices
W3C on-line training on Mobile Web Applications (special rate!)
Standards for Web applications on mobile
http://kwz.me/ps

This project is funded by the European Union through the Seventh Framework Programme (FP7/2010-2012) under grant agreement n°257800
- Mobile Web Applications (MobiWebApp)