Mobile Web Development Thoughts – Browser Detection

A lot is being made of the mobile web, and for good reason. Depending on where you get the information, mobile web use could well outpace traditional (desktop) web use very soon. It is certainly an area of rapid growth in website development.

With such rapid growth, there are a number of issues that developers must overcome. With the mobile web being still relatively “new”, developers are still trying to figure out the best ways to account for getting the content to the user in the best way. With a more compact viewing area (in most cases), the lack of a mouse due to touch input, and a constantly expanding range of devices, it is easy to see why web development for mobile devices can be difficult to say the least.

There are a number of methods that have been used to help the developer determine what device they may be on.

Browser Detection Scripts

One of the first methods was to use scripting to determine what browser the user was using. This could be done using a server side script (such as PHP or ASP) or a browser side script, typically javascript. There are a couple issues here though. First, using a browser side script could fail if the user does not have javascript enabled (not uncommon on older devices.) Second, you are counting on the browser to identify itself.

This is the method one of the most popular WordPress plugins uses. However, this does not seem to be fail safe. For example, using my phone (MyTouch 4G, an Android based phone), I do not get the mobile version of a site with this scripting. That is because the browser uses a very generic User Agent String to identify itself. (Actually, since this is a Google Android phone, I was shocked to see that it identifies itself as a OS X baseed browser!) Since my phone is one of the more modern phones, this shows us that browser identification can not be trusted.

MyTouch 4G – Native Browser User Agent String:

User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_7; en-us) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Safari/530.17

CSS Media Queries

This is a newer method that shows some promise. As part of a responsive web design approach, the media queries used CSS to determine the overall size of the screen to determine what is displayed on the screen. Using CSS, some items can be changed, made smaller or even hidden from view for a better mobile experience.

There are some issues with this method as well. The primary issue relates to bandwidth. You see, with most media queries approaches, developers start with a full desktop version and then begins to eliminate items for the mobile view. However, in most cases, even the items being hidden are still being downloaded by the browser, which can make for a slower download speed, where bandwidth may be an issue.

My Thoughts

I am coming to the conclusion that there is not one “silver bullet” to this mobile development need. I do think that having backups and failsafes are a good idea. So with that in mind, my thought is to start with the browser detection and follow that up with css media queries. If the browser detection works and detects a mobile platform, then we can serve content geared towards that browser. In the event that none is detected, then the media queries can be there to correct based on the screen size.

Additionally, I am also finding the start smaller approach to offer the best options for media queries. You start with the miminal needs for a smaller screen, and then using css media queries, add more css items for larger screens (such as background images, larger icons, multiple columns, ect). This allows for a smaller download package for mobile devices, but still giving the user a fuller experience for desktop / larger screens.