Developing a mobile website strategy / by Mike Takahashi

Screenshot of UCLA Happenings website on a mobile phone

As applications continue to migrate toward the web, mobile devices are an even more integral part of our everyday lives. According to The Mobile Internet Report released by Morgan Stanley in December 2009, the mobile internet will be twice the size of the desktop internet. More users will connect to the web through mobile devices than desktop computers within 5 years. With the emergence of the iPhone and Google's Android platform now able to create quality user experiences on the web, these findings shouldn't come as much of a surprise.

At UCLA, we recently launched a mobile version of the UCLA Happenings website, our campus events calendar at http://m.happenings.ucla.edu. If you haven't thought about it already, then it's only a matter of time before you'll need to consider what you're mobile strategy will be. Here are a few things to consider.

Understand your audience

These days everyone seems to be creating an iPhone specific application for their website. However, it's important to think twice before you spend time and resources developing one. First, ask yourself who your target audience is. Take things into consideration. For example, business people are more likely to use a Blackberry, whereas more technically savvy and creative people use the iPhone. If you create an iPhone application for your website, what happens to the rest of your audience who don't have one? Will you be developing and maintaining two different platforms? For UCLA Happenings, we chose to be platform independent so we could reach the widest possible audience. As a result, our website works well across all platforms and browsers.

Don't copy

Your mobile website shouldn't simply copy your existing website, it should complement it. Users to mobile websites are typically on the go and they want to find information quickly and easily. Think of the context of your website and what you need to deliver to your audience. A successful mobile design will deliver the most important information quickly, easily and intuitively.

Best Buy's mobile website (http://m.bestbuy.com) does this well. They have two main options: Search Products and Find Store.

Screenshot of Best Buy mobile website

Urban Outfitters (http://m.urbanoutfitters.com) is also very similar.

Screenshot of Urban Outfitters mobile website

For UCLA Happenings, we stripped out many additional features of the desktop website and concentrated on the delivery of events. Two functions we've concentrated on are search and finding events by date.

Keeping it simple

You should always separate content from presentation as much as possible while using semantic markup. Take into consideration that each device will differ in aspects such as the speed of connection, layout, screen size and color depth. Many devices may not support CSS, or have it disabled by default, such as Blackberry.

Here is how UCLA Happenings looks with CSS diabled.

Screenshot of Happenings mobile website with CSS disabled

By keeping the markup simple and semantic, even with CSS disabled, the site is still quite usable.

Browser Compatibility

There are so many different phones and browsers that you'll never be able to support them all. One approach is to start off by looking at the statistics of visitors to your website to see which browsers are the most popular. As your website gains more users, you can always add additional browser support in the future as needed. For UCLA Happenings, we implemented a progressive enhancement strategy to give the best possible experience regardless of what mobile device the user is on.

Testing and more Testing

Many of the popular devices such as iPhone, Blackberry and Android allow you to download emulators for your desktop. However, there can be inconsistencies between emulators and real devices as we found. When we were testing for Blackberry, the emulators were correctly displaying the website. However, some of our co-workers who had a Blackberry weren't rendering the website correctly. After some more testing and research, we found that many Blackberry devices have CSS disabled by default. To get the best experience possible, you should try and use the actual device. If you don't have access to certain devices, you can always go down to the local cell phone providers store and test them out.

Resources

Mobile Design and Development by Brian Fling - This is an excellent resource that provides great insight, background and information on creating mobile websites and applications. The book is very thorough and covers everything from basic design and development principles to more advanced topics such as markup and and styling techniques.

Mobile Web Design Trends for 2009 - A great article that details mobile web design trends and strategies.

Other posts you might like...