Mobile Web on Touch Device &

YUI

Morgan Cheng Jan 25th 2011

Why Mobile?

Why Touch Device?

Touch is Direct User Intent

Touch Device

Why Web?

Web: Cross Platform Solution

Web: Cross Platform Solution

Web: Cross Platform Solution

Mobile + Touch Device + Web

Touch API Support Layer

Hardware

OS

Browser

Web App

Apple Touch Layer

Hardware

OS

Browser

Web App

Microsoft Touch Layer: Limited

Hardware

OS

Browser

Web App

Android Layer: Not Complete

Hardware

OS

Browser

Web App

What’s different for Mobile Touch Web?

Touch Event

Why not mousedown/mousemove/mouse

up?

• mousedown/mousemove/mouseup doesn’t work as usual in touch browser

• Semantically, touch event is different from mouse event

• Multi-touch!!!

How does touch event look?

Touch Events in iOS/Safari

• touchstart• touchmove• touchend• touchcancel

Touch Events in iOS/Safari

var target = document.getElementById(‘demo’);target.addEventListener(‘touchstart’, function(e) {

// e.touches// e.targetTouches// e.changedTouches

}, false);

Touch Events in iOS/Safari

var target = document.getElementById(‘demo’);target.addEventListener(‘touchstart’, function(e) {

// e.touches[0].clientX// e.touches[0].clientY// e.touches[0].screenX// e.touches[0].screenY// e.touches[0].pageX// e.touches[0].pageY

// e.touches[0].target // e.touches[0].identifier}, false);

Touch Events in Android/Webkit

• No multi-touch till Android 3

• event property– event.touch === event.touches[0]

Touch Events in Firefox 4 Beta

• MozTouchDown• MozTouchMove• MozTouchUp

Touch Events in Firefox 4 Beta

document.addEventListener(‘MozTouchDown’, function(e) {// e.clientX

// e.clientY// e.streamId

// e.mozInputType}, false);

Touch Friendly CSS

Eliminate :hover pseudo class

How to tell whether it is a touch device?

Server Side UserAgent Sniffing

RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$RewriteRule ^(.*)$ http://ipad.domain.com [R=301]

Media Query

@media handheld, only screen and (max-device-width: 1024px) {

/* iPad specific CSS */}

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)"

href="iPhone.css">

JavaScript Sniffing

function isIPad(){ return navigator.platform == "iPad";}

function isTouchDevice() { return ‘ontouchstart’ in document;}

Gesture

Touch Event

Gesture Event

User Action

User Intent

Gesture Events in iOS/Safari

• gesturestart

• gesturechange

• gestureend

Gesture: Only for Multi Touch

Gesture Events in iOS

var target = document.getElementById(‘demo’);target.addEventListener(‘gesturechange’, function(e) {

// e.scale// e.rotation

}, false);

Gesture Events in Webkit on Android

Not yet

But, Android 3 will have it

YUI with Touch

YUI Touch Events is simple wrapper

Touch Events in YUI

Y.one(“#demo”).on(“touchstart”, function(e) {// e.touches// e.targetTouches// e.changedTouches

// Each element of these arrays are instance of // DOMEventFacade }, false);

Touch Events in YUI

Y.one(“#demo”).on(“gesturechange”, function(e) {// e.scale// e.rotation

}, false);

YUI Gesture Events is abstraction of mouse and touch

Drag & Drop

D&D

Mouse Event Touch Event

Extend Touch Event with Synthetic Event

flick

gesturemovestartgesturemove

gesturemoveend

Summary

• Focus User Intent

• Make Touch Friendly UI

• YUI Helps

Resources

• Touch State-of-the-arthttp://www.quirksmode.org/blog/archives/2010/02/the_touch_actio.html

• Touch and Gesture on iOShttp://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

• Touch on Firefox 4http://hacks.mozilla.org/2010/08/firefox4-beta3/

ThanksQ&A