Press → key to navigate

WAP to HTML5
Mobile Web: Past, Present, and Future

Tomomi Imura
July 16, 2011

June 29, 2007

America discovered the first mobile web

... years after the rest of the world did

The life before iPhone

wap.yahoo.com (later m.yahoo.com)

for future phones and smart phones

WAP Browsers

WAP (Wireless Application Protocol)

Proxy Browsers

fetches web contents thru a proxy server that compress, cache and re-format

"Full" Mobile Browsers

Webkit

"Full" Mobile Browsers

Gecko

  • Mozilla Minimo (discontinued)
  • Mozilla Fennec (now Firefox for mobile)
  • Maemo MicroB
  • Skyfire

Presto

  • Opera Mobile
  • Nintendo DSi, Wii

"Full" Mobile Browsers

More

Mobile Web Standard

http://en.wikipedia.org/wiki/File:Mobile_Web_Standards_Evolution_Vector.svg

WAP 1.0 - WML (Wireless Markup Language) 

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" 
  "http://www.wapforum.org/DTD/wml_1.1.xml" >
<wml>
  <card id="order" title="Inventory">
    <p>
      <select name="Items" title="Items">
		<option value="1">Books</option>
		<option value="2">Music</option>
      </select>
    </p>
    <do type="accept" label="Query">
		<go method="post" href="...">
		  ...
    </do>
  </card>
</wml>
http://www.wirelessdevnet.com/channels/wap/

WML: The Good Parts 

<input name="zip" format="NNNNN"/>
You must enter 5 numeric character
http://www.developershome.com/wap/wml/wml_tutorial.asp?page=wmlInputFields3

WAP 2.0 - Moving to XHTML: Markup Madness 

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
  "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

The Rise of Gala-Kei (Galápagos Keitai)

CSS for WAP

-wap extension for WCSS

<input type="text" style='-wap-input-format: "5N"'/>
<input format="5N"/>

<a> tel and sms protocols

<a> does more than hyperlink and email:

Initiate a phone call

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

Initiate texting

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

HTML4: Smart Phones

HTML5

WAP Input format to HTML5 Input type Attribute

456 Bereastreet: http://www.456bereastreet.com/archive/201004/html5_input_types

Useful HTML5 Attributes for Mobile 

<input type="number">		<input type="email">			
<input type="tel">		<input type="url">		
<input type="date">		<input type="search">
<input type="text" required>
<input type="text" readonly>
<input type="text" autocomplete="off">	
<input type="text" placeholder="yourname@email.com">	
<input type="text" pattern="[0-9]{5}">

PPK's Compat Table

Pattern RegEx Exampls

http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html

iOS-specific Attributes 

<input type="text" autocapitalize="off">	
<input type="text" autocorrect="off">
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/InputTypes.html#//apple_ref/doc/uid/TP40008055-SW1

Media Type: An Old way to differentiate mobile (HTML4/CSS2.1) 

<link rel="stylesheet" type="text/css" media="handheld" href="m.css">
Only supported by: Opera Mini, OpenWave, Obigo, and partially by PIE

Meta viewport and media queries: Modern way (CSS3)

<meta name="viewport" content="width=device-width"/>
@media all and (max-width: 600px) {
  body {// extra styles for mobile}
}

@media all and (min-width: 600px) {
  body {// extra styles for desktop}
}

Proprietary: When viewport is not supported

Blackberry (4.6+)

<meta name="HandheldFriendly" content="true">

Windows Mobile (6.5)

<meta name="MobileOptimized" content="240">

Media Queries

HTML <link> media Attribute 

<link media="only screen and (min-width:680px)">

CSS 3 @media rules 

@media all and (min-width:680px) {...}
@media all and (orientation: portrait) {...}
http://www.w3.org/TR/css3-mediaqueries

Media Queries: Media features

  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid
Print, TV and old mobile devices

High Pixel Density Displays

The "high DPI" problem

When a browser maps one pixel to one hight DPI screen pixel, text and images become too small

solution
➡

automatically magnify the UI and content (fit to HVGA)

1 CSS pixel != 1 device pixel

Pixel in CSS is relative!!!

So how can I make images look better?

Scale an image with device pixels and not CSS pixels!

Webkit.org: High DPI Web Sites (2006)

Media Queries: Targeting High Pixel Density Displays

iPhone 4 Retina Display

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

When the high-DPI devices with a zoom factor of 150% (e.g. 320px to 480px)

Android

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

Opera Mobile

@media only screen and (-o-min-device-pixel-ratio: 3/2) {...}
http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

Pixel Density in DOM

DOM property

window.devicePixelRatio

Android users, hit http://girliemac.com/sandbox/viewport.html on your device to see the value!

Controlling Browser Scaling on Android 2.0

set the viewport property, target-densitydpi to prevent from scaling pixels

e.g. HDPI WVGA 480x854 Motorola Droid and 480x800 Nexus One.

<meta name="viewport" 
  content="width=device-width, target-densitydpi=device-dpi" />
device-dpi use the device's native dpi as target dpi
low-dpi 120dpi
medium-dpi 160dpi (default)
high-dpi 240dpi
[number] 70 - 400dpi
http://darkforge.blogspot.com/2010/05/customize-android-browser-scaling-with.html

Controlling Browser Scaling on Android 2.0 

                                  target-densitydpi=device-dpi
http://girliemac.com/sandbox/viewport.html
http://girliemac.com/sandbox/viewport2.html

Media Queries: Mozilla-Specific (Fennec)

https://developer.mozilla.org/en/css/media_queries

Media-queries and Viewport: Opera Way 

@viewport {
   width: device-width;
   zoom: 1; // NO! This is not THAT zoom you know for IE
   user-zoom: zoom;
}
equal to: 
<meta name="viewport" content="width=device-width, 
      initial-scale=1, user-scalable=1">

W3C Draft: CSS Device Adaptation

Device API

  • Phone - tel: protocol
  • Location
  • Compass
  • Accelerometer and Gyroscope
  • Camera access
  • Microphone access
  • Accessing contacts, calendar and other info

Geolocation on Mobile

  1. GPS satellites
  2. GSM/CDMA cell IDs
  3. A-GPS
  4. Wi-Fi base stations
if (navigator.geolocation) {
  // yes, browser supports geolocation. so do something!
  navigator.geolocation.getCurrentPosition(successCallback, error);
}

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

Coming soon: DeviceOrientation API

W3C Draft: DeviceOrientation Event Specification

  1. Accelerometer
  2. Gyroscope

Events

deviceorientation
compassneedscalibration
devicemotion

window.ondeviceorientation = function(event) {
  // event.alpha, event.beta, event.gamma
};

Coming soon?: Camera Access

<device> element and getUserMedia API proposed by WHATWG

The <device> spec is no longer maintained: http://dev.w3.org/html5/html-device/

Opera's Experiment with getUserMedia

getUserMedia and Device Orientation adventures

if (navigator.getUserMedia){
	navigator.getUserMedia('video', v_success, v_error);
}
var video_element = document.querySelector("video");
...
function v_success (stream) {
 	video_element.src = stream; 
}

Test Page

This requires the experimental build and does not work on the current Opera Mobile 11.

QR Code Reader and AR with HTML5 in future?

Why not?

http://www.flickr.com/photos/59193518@N08/5869160119/sizes/z/in/photostream/

More from Device APIs and Policy Working Group

http://www.w3.org/2009/dap/

Thank you!

Tomomi Imura

http://girliemac.com/blog

@girlie_mac