Mobile Media

Shawn Van Every Shawn.Van.Every@nyu.edu

Week 3 - Mobile Web

WAP

WAP or Wireless Application Protocol is a protocol for accessing web like pages on mobile devices. It uses a similar language to that of HTML called WML (Wireless Markup Language) and can be delivered via HTTP (just like a webpage).

To create a WAP page, you merely create a page with the extension ".wml" and put it on a web server.

Here is a simple WML page: 
<?xml version="1.0"?> 
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> 
<wml> 
	<!--begin card--> 
	<card> 
		<do type="accept"> 
			<go href="#card2"/> 
		</do> 
		<p> 
			This is the first card.
			Press OK to go to the second card. 
		</p> 
	</card> 

	<!--begin card--> 
	<card id="card2"> 
			<p> 
				This is the second card. 
			</p> 
	</card> 
</wml>
You can see this by typing in this URL in your mobile browser: http://itp.nyu.edu/~sve204/wml/test.wml

WAP has never really taken off in the US due to several reasons: Carriers overstated it's capabilities, many devices can only see a few characters or words at a time, people were used to the normal web and this new limited web isn't very appealing and in general people weren't designing separate WML sites as would be required.

More Information:
Wireless Application Protocol - Wikipedia
WML Tutorial: Wireless Markup Language Introduction

Fortunately or unfortunately, modern mobile browsers are no longer offering good support for WAP/WML (Safari on the iPhone doesn't even attempt it) and have moved towards regular HTTP with XHTML MP or regular HTML/XHTML.

XHTML MP is the start of an integration of technologies meant for desktop web browsers and those on mobile devices.

WebKit

WebKit is an open source browser implementation which started out by Apple for use in Safari as a fork of Konqueror's rendering library (Konqueror is the webbrowser that exists as part of KDE, a GUI for Linux).

WebKit has quickly developed into the leading mobile browser technology, existing on the iPhone, Android, Palm's WebOS, Nokia/Samsung/LG (Symbian) and so on. (It is also the rendering engine for many other pieces of software and desktop browsers, including Chrome and of course Safari.)

Unlike mobile browsers of the past, WebKit based browsers generally render the webpages that are fed it as if they were being displayed on a full size computer. This opens up a vast majority of internet sites to use by those on mobile devices (unlike the past).

Of course, their are other mobile browsers that aren't webkit based that now do the same:
SkyFire
Firefox
Opera Mobile

More information:
Wikipedia: WebKit
WebKit.org
List of WebKit based browsers
Mobile Browsers Wrapup
From the "mobile Web" to "the Web" on mobile

Designing Pages for use in Mobile WebKit (iPhone and so on)

For the most part, if you use straight forward HTML/CSS without Flash, your pages will render just fine in mobile webkit based browsers.

Of course, there are some additional, phone based things that you may want to do in addition

Alternative CSS for use by phone browsers:
<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />

Viewport:
Set the width and scale of the view of the page. A view port is a window that sits on top of the rendered page showing only a portion of it if the page is bigger than the viewport.
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport" />
Reference

Linking to a phone number:
<a class="call" href="tel:1-212-555-1212">Call Information</a>
Call Information

Linking via a mailto command:
<a href="mailto:foo@example.com?subject=A%20Mail%20Message&body=Hello%20World">Send Mail</a> Send Mail

Geolocation API:
The iPhone and Android browsers both support the W3C's Geolocation API. Example (View Source)

Basic HTML/CSS Example

More Information:
Best Practices to develop sites for iphone
A List Apart: Put Your Content in My Pocket
Mobile Safari Advanced Features
WebKit Styles Attributes
Mobile Compatibility tables
Accessing GPS in iPhone Safari
iPhone 3.0 Geolocation Javascript API

Phone Specific HTML/CSS/JavaScript Libraries

There are quite a few HTML/CSS/JavaScript libraries that make mobile web development for iPhone and the like easier. In many cases they do the hard work for you in making your web app look like a standard app:

iui
iphone-universal
WebApp.net
iWebKit
jQTouch

Turning a web app into a full-fledged app

One of the nice things about phones supporting WebKit is that they generally make it easy to use the WebKit libraries in applications. A full fledge application can simply instantiate webkit and load HTML/JavaScript/CSS into it and call itself an app.

There are a few frameworks out there that make this easy on both iPhone and Android:

Appcelerator
rhomobile
PhoneGap

Many of the other phones/OS support these types of things as well:
Nokia Web Runtime
Palm webOS

More information:
iPhone and Android Web Application Frameworks

m.url

Notice that on your phone you are often browsing sites that start with "m" instead of "www" in their domains. That is because these sites are "detecting" your browser and redirecting you to their site designed specifically for mobile devices.

The following PHP will help you accomplish that as well: 

	
<?
	if ((strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') !== FALSE || strpos($_SERVER['HTTP_USER_AGENT'], 'iPod') !== FALSE || 
		strpos($_SERVER['HTTP_USER_AGENT'],'Android') !== FALSE) && !isset($_GET['nomob'])) { 
			header("Location: " . "mobile/");     
	} 
?>
If this PHP code is included in a PHP page and the page is visited by an Android, iPhone or iPod Touch it will redirect the user to a directory called "mobile" which may contain an mobile friendly version of the site. The code will need to be at the top of the page before anything is output to the browser.

It allows users to by-pass this redirect by adding ?nomob=1 on the end of the URL. This way you can provide a link to your normal site from your mobile site for users wishing to just access the normal site.

It works by looking at the "user agent", or how the browser identifies itself to the webserver.

More information:
Mobile Browser ID Strings
List of user agents for mobile phones