HTML is not merely a set of tags: it also encompasses dozens of new JavaScript “hooks”, broadly referred to as APIs. These provide easy methods for developers to gain information and deliver services that were previously impossible on web pages.

While they are strongly associated with HTML5, strictly speaking many of the new APIs are not part of “HTML5” at all, as they do not require or directly interact with any of the elements in the spec. Most could be applied just as easily to an XHTML page: the programming only requires a supportive browser and/or device in order to work.  For technical accuracy, I’ll refer to these APIs as part of HTML, rather than HTML5.

Where Am I?

The Geolocation, Orientation and Acceleration APIs seek to answer three basic questions of a device:

• Where is the device located?
• Is the device moving in a particular direction?
• What angle is it being held at?

Geolocation covers the first question, with each API tackling different aspects of the second and third. It’s worthwhile taking a look at the limitations of each API to avoid confusion between them, and to ensure you use the right one for your project.

Orientation & Acceleration depends on hardware

Both Orientation and Acceleration rely on the presence of a miniature gyroscope, accelerometer and compass that are physically built into a device. Most modern smartphones and tablets support such features, but they are rarely found in laptops, and not at all in desktop computers. The exclusion of the latter makes sense: it’s unlikely that you’ll be waving a 27″ iMac through the air anytime soon to play a game or interact with a site.  However, the miniature devices may be part of a mouse or other input that are used with a desktop computer.

Geolocation is permission-based

To safeguard privacy, the Geolocation API asks for the user’s permission before sharing their location with a requesting service; Orientation and Acceleration do not, and can be called on at any time in a web page without informing the user. Geolocation permission must be granted once per session (i.e. when visiting a website), after that, the device’s location might be written to a database^*.

Geolocation does not require GPS hardware

While satellites might be used to pinpoint the location of a mobile phone in remote areas, the Geolocation API has a suite of methods to determine where a device is. No GPS chip is required, and the API will work equally well on desktop computers.

Geolocation provides latitude and longitude, not locale

A fully-compliant device will return seven pieces of information to a Geolocation API request:

• The device’s latitude and longitude
• The device’s altitude (meters above or below a projected ellipsoid of the earth’s surface).
• Accuracy ratings for these values.
• The direction the device is heading in (in degrees), and its speed (in meters per second).

Note that this does not include street names, city, or country. To get that information, you will need to reverse-engineer it from the supplied latitude and longitude, usually with a reverse geocoding service.

Acceleration, Orientation and Geolocation have differing frames of reference, accuracy and support

The orientation of a device is measured relative to the earth’s surface: if the device laid flat on a table pointing north, its offset angles (referred to as alpha, beta and gamma) are 0. The Acceleration API only picks up that the device is under acceleration, taking gravity into account: that is, the device is being pushed or pulled with increasing force in some direction. In theory, a device thrown from a sufficiently tall building would have no acceleration after a few seconds, once it reached terminal velocity.  However, its position, as measured by repeated measurements by the Geolocation API, would change.

The tiny gyroscopes, accelerometers and compasses in modern mobile devices are relatively “noisy”. The information they provide is acceptable within a certain range of error, but trying to integrate the data to provide position or velocity can result in wildly imaccurate values. For most non-gaming applications, I would suggest using the GeoLocation API to gain position or velocity information.

Geolocation has great support in all current browsers (IE support goes back to version 9) but acceleration and orientation are trickier: support is good in most mobile browsers (iOS, Android, etc.), but poor to non-existent in the desktop version of the same (no support in IE or Safari, for example). These gaps are understandable, if a little frustrating if you’re after consistency.

Don’t forget Media Queries

If you’re only switching between the display of your site between horizontal and vertical orientation, you don’t need to wade into the depths of the Orientation API; you can use media queries for that:

@media screen and (orientation:portrait) {
	/* CSS for portrait mode of devices */ }
@media screen and (orientation:landscape) {
	/* CSS for landscape mode of devices */
}

Taking all these distinctions of the Geolocation, Orientation and Acceleration APIs into account is very important when choosing the most appropriate technology for your next project. Now that we’ve addressed the basics, we can move on to implementation, which I will cover in future articles.

^* If you intend to store location information, be sure to mention this fact in the site’s privacy statement. Encrypting this data should also be considered.
Banner photograph of downtown Beijing by Trey Ratcliff. Floating iPhone image by Michael Theis. All images licensed under Creative Commons and used with permission.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.