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.
- 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.
- Carriers spoof user agents so some report incorrectly.
- 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.