Month: December 2010

Basic Mobile Device Detection

These days, there are many ways to browse the internet.  There are desktop browsers, mobile phone browsers, tablets, tablet/phones (e.g. Dell Streak), etc. all with different screen sizes, resolution, and capabilities.  How do you render an appropriate view optimized for the device accessing your site?  The answer is device detection.

The two main approaches for device detection are server-side detection and client side detection.  Server side detection involves determining the device at the time of the request and then presenting the appropriate view.  Client side detection involves manipulating the view after the content has been sent to the browser.

Client side approaches include: feature detection via JavaScript, CSS media types, and CSS media queries.  This approach, while simpler, is subject to the capabilities of the rendering browser.  Some browsers have little or no support for JavaScript, while others only support older CSS standards.  With the myriad of devices and their associated browsers, this can be a significant challenge.

When it comes to server-side detection, the main approach is to rely on the USER_AGENT (UA) HTTP header string that comes in each web request.  There are many frameworks and tools to help interpret the UA string, and I will present some of those options in a subsequent blog post.  For now, it is a safe assumption that classifications of devices (e.g smart phone, feature phone, etc.) can be determined via the UA string.

There are many ways to use one or both of these approaches.  As always, it depends upon your requirements.  Many times, a simple approach will work best.  WebKit based browsers, such as those found on iOS, Android, and some Blackberry devices, are the most capable mobile browsers today.  These devices have excellent support for JavaScript and CSS.  It may be perfectly acceptable to focus on devices with these browsers and render a touch based, optimized experience for those requests, while presenting a basic HTML only view for any other mobile devices.  Using server-side detection, the browser type can be determined and the appropriate content can be sent to the browser for rendering.

Is that enough?  Today’s mobile landscape is rapidly changing, with new phones and tablets coming out each month.  All these devices have different screen sizes, resolutions, etc.  Is one mobile touch based user interface design enough?  Would the same view be appropriate on a 3.5 inch iPhone screen as a Galaxy Tab 7 inch screen?  What about a 9.7 inch iPad screen?  Probably not.  This is where client side detection can come in handy.  Through the use of CSS and JavaScript, content can be altered, adapted, and enhanced to take advantage of the larger screens when appropriate.

While this combination of server and client side detection may not be appropriate for your circumstances, it is a simple approach that is valid for many situations.