It is officially 2009. I am proud to say I was awake to watch the ball drop. Generally I end up in bed long before it is time to ring in the New Year. In preparation for 2009 I have read about 50, what is coming in 2009 prediction posts. Almost all of them had mentions of social media and increased mobile web browsing. Mobile web design seems to be something that most developers are avoiding. I have worked on a couple mobile websites, during this process, I have made some discoveries which I thought I would detail to help out others who may be jumping into mobile web design in 2009.

Mobile Browsers and Screens
The biggest problem with mobile web design is the variation in browsers. If you think the differences between IE6, Firefox, and Safari are extreme you haven’t experienced anything. Mobile phones vary greatly in both size and ability. Common screen sizes range from 128 x 160 to 320 x 480. Other common screen sizes are 176 x 220 and 240 x 320 but often the actual resolution will vary slightly. The browsers have greatly varying abilities. Modern smart phones like iPhone and phones running Google Android have fully functional browsers. (At the time of writing this Flash support is not included) Other models like the Nokia 1100 or the Nokia 1101 have very simple browsers. Unfortunately these Nokia models are the best selling phones of all-time with many units still in use. Thankfully, these users are less likely to be taking advantage of the mobile web.

Mobile Phone Mark-up Options
There are two main ways of writing mark-up for mobile browsers. The first is WML. WML is XML mark-up designed for mobile phones. It has been around for some time and is the best way to go if your audience is likely using older or less featured phones like the Noikia 1100 or Nokia 1101. The other, more common option is XHTML or XHTML-MP. XHTML is a mark-up language much more familiar to most web developers. Most modern phone browsers are capable of using XHTML or XHTML-MP and I have had great success using XHTML. When creating your XHTML it is important to make sure you create valid mark-up as mobile phones are not nearly as forgiving as traditional browsers.

Determining What Information to Include in your Mobile Website
One of the most important factors when designing a mobile website is determining what information to include. Browsing the web on a mobile device can be difficult even for users of advanced devices like the iPhone. Although the iPhone and Android phones have made huge strides in web usability, it is still tedious and time consuming to browse the web using these devices. Users of older phones have even more problems because their devices often lack certain abilities like left and right scrolling which make it impossible to browse most traditional websites. In addition, many phones require you to navigate by tabbing and clicking. This makes it very difficult to navigate through a site with a large number of links or form fields.

While some mobile phone designers try to provide alternate versions of the website CSS for mobile phone browsers I prefer to provide a totally separate website designed specifically for mobile phones. In my experience trying to force a full featured website into a mobile phone browser does not work well. I prefer providing mobile users with a modified version of the primary website that focuses on the primary features mobile visitors are likely to use. These could include features like store locators, product searches, and contact information.

The screenshot examples below illustrate the massive difference between the Target.com website and the Target Mobile websites. Target has minimized their website down to a simple product search for mobile users. Users using more advanced browsers like the iPhone can browse the full website but users on simple phones can easily search for and locate products.

How to Add a Mobile Version of a Website
There are various ways to add a mobile version of a website. You can create a separate domain or subdomain from your primary domain like mobile.yoursite.com and yoursite.mobi which are both common locations mobile websites reside. What I have found is most users on mobile devices still reach the primary domain either through direct typing or search results. Due to this I find it useful to use browser detection to direct the user to the proper website format for their phone. Many developers discourage browser detection because it can be problematic but until a standard for mobile version of websites develops I believe browser detection is a requirement.

There are various methods of browser detection available. Here is a PHP script that can be used to detect mobile browsers: http://www.russellbeattie.com/blog/mobile-browser-detection-in-php. Another example of PHP mobile browser detection can be found here: http://mobiforge.com/developing/story/lightweight-device-detection-php.

On the mobile websites that we have created we usually setup mobile.site.com to redirect to site.mobi and the browser detection on site.com will also redirect mobile users to site.mobi. This technique seems to work well for the majority of visitors.

How to Test Mobile Websites
Testing mobile devices is difficult. Unless you’re interested in purchasing dozens of mobile devices there are limited options for testing your code to see how it will perform on mobile devices. For some devices there are online emulators (http://mtld.mobi/emulator.php) that will allow you to see a depiction of what your website will look like on those devices. These devices can also help you test your browser detection. Unfortunately, there are many mobile devices I have been unable to locate emulators for.

I hope this information will help you jump into mobile web development. This is certainly not an all inclusive guide. These are generalizations and tips based on my experiences in developing mobile websites. If you feel anything is left out or if clarification is needed please leave a comment!