Mobilism: The Mobile in Mobile Web

by Luke Wroblewski May 17, 2011

In her How to put the Mobile in the Mobile Web presentation at Mobilism in Amsterdam, Netherlands Jennifer Hanen outlined three approaches to mobile Web feature detection and some pros and cons for each. Here are my notes from her talk:

  • When data plans are not cheap, people take advantage of proxy browsers like Opera Mini to view the Mobile Web content. Opera mini is a proxy browser (thin client on the phone). The rendering engine (Presto) lives on the server. The request goes to the server and sends back a highly condensed file to render the page. Feature phones are not capable of running a full rendering engine on the device.
  • There are three ways to approach device-specific development on the mobile Web: CSS, Javascript, and server-side.

CSS

  • CSS media queries can be used to select different style sheets for different viewport sizes. This flexible layout approach can be coupled with flexible grids and images to create Web layouts that work across multiple devices.
  • CSS is familiar to Web developers. If budget does not call for separate mobile Web site you can use CSS for a mobile solution.
  • Media queries do not take bandwidth or kind of connection into account. While there are some image reduction solutions, they are not quite there yet. Internet Explorer needs to be accounted for on the desktop. Most importantly all scripts and media objects are loaded by the browsers even if @media gives different layout & images for the small screen.

Javascript

  • Client-side Javascript can be used to detect the user agent of mobile browsers or check for features of a browser. Content can be loaded or adapted if it is appropriate for the device.
  • Detectmobilebrowsers.com provides code you can use to detect user agents in the client with Javascript. Modernizer can be used to test for the features of a browser like: touch, screen size, and beyond.
  • Not all mobile browsers are Javascript equal and some feature phones have little to no Javascript.
  • Carriers spoof user agents so some report incorrectly.

Server-side

  • Server-side device detection can work well if you need a mobile solution that works for devices that are not Javascript savy or where users are bandwidth sensitive.
  • Detectmobilebrowser.com has server-side scripts that use user agent string detection. From there you can re-direct to a mobile site. If you need more precision, you can use the WURFL open source XML database to determine info about devices and adjust things on the server.
  • WURFL released a new API for PHP and Java. There is a database where you can submit a user agent string and the capabilities of the browser.
  • Form a grassroots group to develop a hybrid, server/client side solution for mobile browsers and feature detection. Work with browser makers to get a more complete feature profile and to alert user preferences on data, media, and current context.