HTML5 Mobile Approaches

HTML5
Mobile Approaches

Tomomi Imura

Hello

my name is

Tomomi

@girlie_mac

Mobile Front-end, UI/UX Developer
Open Web Advocate at Nokia
Formally at Palm webOS, Yahoo! Mobile etc.

http://lemarquis.deviantart.com/art/HTML5-Wallpaper-243682854

Web Apps

No SDK Required!

Desktop to Mobile

Do Nothing
Adaptive Design
Separated Mobile Experience

Adaptive Design

Progressive Enhancement
- Enhancing Experiences based on browser capabilities
- Graceful Degradation - Fallbacks
Responsive Design
- Fluid Layout
- Flexible Images
- Media Queries

A super silly example I wrote: RespongeBob Web

Why Should You Consider RWD?

One URL works across the browsers

No redirect
No User-Agent sniffing

Maintainable

A single content
No separate markup

@media

http://www.flickr.com/photos/archer10/4312413546/

CSS2 Media-Types

		
@media handheld {
  /* Some mobile-specific CSS here */
}

Only supported by:

Opera Mini
OpenWave
Obigo
PIE (partial)

CSS3: Media-Queries

Controlling the presentation without modifying the content itself.

CSS3: Media-Queries

Separate styles by the width of the target viewport


@media only screen
   and (min-width : 768px)
   and (max-width : 1024px) {
  
  /* Styles */
}

CSS3: Media-Queries

by device-width, the width of the device's screen size


@media only screen 
   and (min-device-width : 320px) 
   and (max-device-width : 480px) {
  
  /* Styles */
}

CSS3: Media-Queries

combined with screen orientations


@media only screen
   and (min-device-width : 768px)
   and (max-device-width : 1024px)
   and (orientation : landscape) {
  
  /* Styles */
}...

CSS3: Media-Queries

separate styles by device pixel ratio

High Pixel Density Displays

The High DPI problem

The High DPI problem: Solution

CSS Pixel vs. Device Pixel

Pixel in CSS is relative
1 CSS pixel != 1 device pixel

Pixel Density in DOM


window.devicePixelRatio

Device	Browser	Pixel Density
Nexus One	Android browser	1.5
Galaxy Nexus	Chrome	2.0
Galaxy Nexus	Opera Mobile	2.25

Media-Queries for "Retina"


@media only screen and (min-device-pixel-ratio: 2) {
	   /* some hi-res css */
}

WTF Vendor Prefix!


@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {...}


@media only screen and (min--moz-device-pixel-ratio: 1.5) {...}


@media only screen and (-o-min-device-pixel-ratio: 3/2) {...}

Unprefix: resolution media query


@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) {
       ...
}

Typical Screen: 96dpi (96px = 1in in CSS units)

...even easier


@media (-webkit-min-device-pixel-ratio: 2),  
       (min-resolution: 2dppx) {
...
}

21

16

Up-Res Images


.banner {
    background-image: url(banner.png);
    width: 320px; height: 160px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (min-resolution: 192dpi) {
  .banner {
      background-image: url(banner-2x.png);
      background-size: 100%;
  }
}

SVG


<img src="logo.svg" width="">

Proposal: Responsive Images


<picture width="500" height="500">
   <source media="(min-width: 45em)" src="large.jpg">
   <source media="(min-width: 18em)" src="med.jpg">
   <source src="small.jpg">
   <img src="fallback.jpg">
   <p>Accessible text</p>
</picture>

Responsive, wut?

Heavy resource loading
- Extra http requests
- Large images
- Image resizing performance
- Data transfer can be costly
- Battery consumption
Impressing developer, not users

Designing for
different form factors

Mobile-Specific Approach: Yay!

No heavy resource loading (vs. RWD)
More focused User-Experience

Different UI & contents
User-interaction (touch/mouse/stylus)

Device-specific features, Hardware access

Mobile-Specific Approach: Meh!

Different URL (m.yourdomain.com)
Redirect
User-Agent Sniffing

Touch Screen User Interaction

Touch Events
- Touch Events v.1 (note: )
- Pointer Events
CSS L4 Media-queries (Future)
- pointer - accuracy of a pointing device. none, coarse, fine. "Fat Finger"
- hover - 0 or 1

Pointer Events

For any input devices: touch, mouse, pen...


if (navigator.pointerEnabled) {
    el.addEventListener('pointerdown', 
                         startHandler, false);
    el.addEventListener('pointermove', ...);
    el.addEventListener('pointerup', ...);
}

Pointer Events

Only IE10 supports so far...


if (navigator.msPointerEnabled) {
    el.addEventListener('MSPointerDown', startHandler, false);
    el.addEventListener('MSPointerMove', moveHandler, false);
    el.addEventListener('MSPointerUp', endHandler, false);
}

10

Device APIs:
Interact with Hardware

Making a Call (or SMS)

		
<a href="tel:+14155557777">
  Order Pizza Now!
</a>

<a href="sms:+14155558888?body=Hello">
  Text me!
</a>

Locating

		
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, fail);
}

function success(position) {
  alert('Latitude: '+ position.coords.latitude + 
  ', Longitude: '+ position.coords.longitude);
}

Access Permission

Device Orientation Events

DOM events for obtaining information about the physical orientation and movement of the hosting device

Gyroscope
Accelerometer
Compass

Device Orientation Events

Events:
deviceorientation, devicemotion, compassneedscalibration

Dev Opera (Diagram)

Watch the demo video on Vemeo

Try it on supported browsers: http://goo.gl/5Cj4d

Media Capture and Streams API

WebRTC "Web Real Time Communications"


var gum = navigator.getUserMedia ||
    navigator.mozGetUserMedia||navigator.webkitGetUserMedia;
          
navigator.getUserMedia({video: true, audio: true}, 
    	                     successCallback, errorCallback);

10

21*

17*

The super silly demo again: RespongeBob Web / Make Me Bob!

HTML Media Capture


<!-- Current implementation (if supported) -->
<input type="file" accept="image/*" capture="camera">

<!-- Newly proposed specification -->
<input type="file" accept="image/*" capture>

18

3

6*

10*

10

10*

Watch the demo video.

Battery Status API


var battery = navigator.battery || navigator.mozBattery;

battery.addEventListener('chargingchange', updateStatus);  

function updateStatus() {  
  alert('Battery status: ' + battery.level * 100 + ' %');  
  if (battery.charging) {
    alert('Battery is charging...');   
  }
}

10*

16

Battery Status API

Try it on Firefox Mobile: http://goo.gl/V1n6h

Vibration API


var vibrate = navigator.vibrate || navigator.mozVibrate;

vibrate(1000); // vibrate for 1sec

vibrate([1000, 500, 2000]);
// vibrates for 1sec, still for 0.5 seconds, 
// and vibrates again for 2sec

14

Try it on Firefox Mobile: http://goo.gl/EWPmL

Ambient Light Events


window.addEventListener('devicelight', function(e) {
   alert(e.value);
});

Sensor Value	Lightning Condition	My Observation on Galaxy Nexus
< 300 lux	Dim	Indoor
400-1000 lux	Normal	By window. Outdoor (Cloudy)
> 1000 lux	Light	Outdoor Daylight? Can't test in foggy SF :-p

15

Light Sensor Demo

Watch the demo video on Vemeo

Try it on Firefox Mobile: http://goo.gl/WynKX

Proximity Events

The distance of a nearby physical object using the proximity sensor of a device.


window.addEventListener('deviceproximity', function(e) {
   alert(e.value);
});

More APIs and related APIs

The Network Information API
Network Service Discovery
Clipboard API
Fullscreen API
Gamepad API
Calendar and Contacts APIs
...

Closing the Gap with Native

Better UI performance (e.g. Scrolling)
More hardware integrations (e.g. NFC)
App discoverability
Web Payment & In-App Payment
...

Thank you!

Tomomi Imura