Device Classification in the UCLA Mobile Web Framework

UPDATE: The device classifications covered in this article are now fully documented. As the UCLA Mobile Web Framework is rapidly evolving, you’re better off getting the information straight from the source.

The UCLA Mobile Web Framework (MWF) classifies devices into three basic categories: basic, standard, and full. These categories are hierarchical (a “full” device can do everything a “standard” device can) and serve an important purpose within the framework by determining what JavaScript and CSS are dynamically loaded by the framework.

While these categories are not fully documented yet, we can peek at the source code and see how the framework classifies each device:

Basic

Every device (including a modern smart phone, an old Nokia phone with rudimentary Internet access, and a desktop computer) is considered basic. Basic devices will load the basic stylesheets, the core JavaScript libraries, and any custom JavaScript or CSS specified for basic devices. Unless disabled, the utility libraries will also load (Google Analytics and the script for enabling the favicon), although they may not work on basic devices.

Standard

A standard device supports:

  • Cookies
  • JavaScript DOM modification
  • JavaScript events with addEventListener

A standard device will load everything that a basic device will load, any custom JavaScript or CSS specified for standard devices, and any of the standard framework libraries (if you enable them). Right now, the only standard framework library is the geolocation library.

Full

A full device supports all of the things a standard device supports and:

  • Ajax
  • CSS3 border radius
  • CSS3 box shadow
  • CSS3 gradients

As you can probably guess, a full device will load everything that a standard device loads, any custom JavaScript or CSS for full devices, and any enabled full framework libraries. The full libraries include the transitions library, the touch transitions library, and a script for including the Apple touch icon.

Other Classifications

Beyond these three categories, the framework also uses two additional categories: iPhone and preview. If the framework determines a device is an iPhone, then two additional scripts are loaded: one for hiding the Safari address bar and another for resizing the page on orientation.

Finally, if the User is in preview mode, the device loads additional scripts for displaying a preview menu that allows the User to manually switch among these device categories.

How It Works

If you’re wondering how all of this device detection works, it’s a pretty clever little process:

  1. User visits a page generated by the UCLA MWF
  2. Framework determines that a device information cookie has not been set
  3. Framework JS library detects the device’s capabilities (using Modernizr), and determines the device category
  4. Framework JS library stores this information in a cookie and reloads the page
  5. Server-side framework library pulls the information from the cookie and uses it to serve dynamic JS and CSS

Example

Let’s wrap up all of this up with a quick example. Let’s say you have the following:

<script type="text/javascript" src="http://m.ucla.edu/assets/js.php?
	standard_libs=geolocation
	&full=http%3A%2F%2Fwww.treasure.loganfranken.com%2Fscript%2Fmain.js
	"></script>

In this example, the geolocation library will only load up for standard and full devices, while the external script (main.js) will only load for full devices.