A Weblog entry posted on Tuesday, December 04 2007

Mobile web design considerations by Nate

I recently finished Cameron Moll's book, Mobile Web Design, and came away very inquisitive and inspired. Personally I have not had the opportunity to develop an application for a mobile device, but I hope to in the near future. As I began planning my approach I found myself asking a few questions related to mobile web design.

The mobile context

There are several approaches we can take when designing for mobile devices, and this is by far the biggest thing that excites me. The mobile platform opens up an array of new tools based on the context. The mobile platform does not bring with it the same experiences of the desktop platform. I believe that if you designed for one and tried to apply to both (the Do Nothing approach), then you are doing yourself and your users a great disservice. Mobile devices give us new technology to work with and better ways to engage with our users. These are mentioned in Cameron's book, but here is a quick breakdown:

• SMS allow you to let users update information or communicate with your application without having to constantly deal with web forms. Users could do things like update a to-do list or send a message updating their favorite social networking application.
• GPS allow you to be aware of the location of the user and serve them with geographical information. I think the potential here is obvious as you now have the ability to be location aware.
• Microformats, APIs, and RSS each allow you to interact differently with the device. Having the ability to markup your pages accordingly and instantly adding a user to your phone contacts list. The advent of the iPhone introduced several new protocols for making calls directly and linking to maps.

There are many more to be added to this list, but each of these address the contextual needs of the person on the other end of the mobile device. This list could also be used for the desktop environment, which takes advantage of the operating system and the browser to do things like save pages, print pages, and interact (with permission) with your operating system. It is very important to realize the mobile context and how users engage with the Internet on their mobile devices.

The markup and style

With the advent of the web standards hype we were told that it would be easy to have one markup and switch media types based on the device or situation. media="handheld" seemed excellent in theory. All you would need to do is add this to a stylesheet specifically designed for your mobile device and you were done. I believe this to be a myth for several reasons:

• Simply re-arranging content does not fix the issue of serving up contextual content. I believe pages need to be optimized for their devices and context. This takes things like screen size, speed, and technology into consideration.
• Typically you would use the CSS to re-arrange and toggle the display of specific sections, much like you would do with a print stylesheet. This doesn't take the user's connection speed into account. They could be on a slow connection, and just toggling things like images still requires the HTML page to load them, even if they are set with display: none. The end user would experience a longer load time, even if they only see half of the content
• Sites with mobile versions like Flickr also add accessibility cues for the devices to quickly navigate with the mobile keyboard. These accessibility cues make it easier for a user to navigate through the site where they don't have a large screen and reasonably sized clickable areas.

We still have the ability to stick to XHTML standards when creating the pages for mobile devices, but we have a richer interface designed specifically for the needs of the user.

It is also important to note that the canvas you have to work with is reduced to a much smaller viewport. This leads to usability implications as you design the interface for 320px (approximate) wide versus 1028px or above. You have a smaller space to provide the user with just the right actions to complete the necessary tasks.

The browser

The toughest part to all of this is assuring your mobile version works as intended on all devices. The only surefire way is to test it on the actual device, which could get rather expensive. Browsers on mobile devices seem to remind me of the browser wars of the past. Browser rendering of HTML and support of CSS seems to vary. Devices like the iPhone render pages in Safari, a full blown web browser, and have support for new CSS features. I cannot list the nuances of other browsers from first-hand experience, but reading the research leads me to believe there are other quirks involved.

In conclusion

A mobile device has a different context, and a mobile user has different needs. Each individual and company will need to decide for themselves based on their needs or business model. For me, I believe that context is king and that we should develop with that in mind.

Admittedly I am new to this. I am still doing more research and testing. I would be interested in hearing the thoughts of others who are venturing into development on a mobile platform. So, what are your thoughts?