Frostbite - A Designers Blog: March 2011

The number of users browsing the Web from a mobile device continues to rise, yet a lot of mobile websites are less than ideal.
The thing is, creating a great web experience for users of mobile devices is much easier than you might think. Below is seven steps that, if followed will help you avoid the pitfalls which cause other mobile sites to fail.

1. Don't Mix Up Your Markup

A few different types of markup are available for building a mobile web site. You'll need to choose one that suits the needs of your customers and stick with it.
WML In the early days of mobile web devices, the only way to surf the mobile web was to browse WAP (Wireless Application Protocol) sites. A WAP site uses WML (Wireless Markup Language) as its primary markup language. One potential group of customers still using WML browsers, however, is those in developing nations. The Nokia 1100 and 1101, for example, are extremely basic, extremely cheap phones, of which an estimated 200 million units have been solid worldwide, making this phone the best-selling model to date, worldwide. If your site is targeted to this market segment, WML might be the best solution for you.

XHTML
For most sites, we can ignore WML and make use of a markup language with which you're probably much more familiar -- XHTML.
Most built-in phone browsers these days can handle XHTML just fine. A mobile phone recognizes two flavors of HTML:

XHTML -- the same, basic XHTML rendered by desktop web browsers
XHTML-MP -- the MP here stands for Mobile Profile

The difference between these two languages is that XHTML-MP consists of slightly fewer elements and tighter restrictions. These differences exist to make it easier for the mobile device to parse and render a web document, but writing XHTML-MP markup shouldn't introduce any significant changes to your process for writing regular XHTML.
Anecdotally, when my team and I develop mobile web sites we usually use regular XHTML, and this approach has served us just fine.

2. Know Your Phones

As plasma and HD TVs slowly hit the market, broadcasters have run into the problem of where to place their logo and news tickers. Previously, they knew that all TVs were the same 3x2 dimensions, so they knew the relative width of the screen. Now, they're beginning to feel the pain of dealing with a wide assortment of TV resolutions and dimensions -- an issue that web developers deal with on a daily basis.
Of course, the mobile world is even worse! Not only must we cater for different screen sizes and resolutions, but also different shapes, as Figure 1 illustrates. From rectangles that are short and long, to those that are tall and skinny, to perfect squares, the mobile world contains a rich tapestry of variation that almost makes you want to pull your hair out!
Figure 1. Overlays of major phone dimensions

Figure 1. Overlays of major phone dimensions

If you consider the most common phones available, they can be categorized on the basis of screen size -- give or take a few pixels:

128 x 160 pixels
176 x 220 pixels
240 x 320 pixels
320 x 480 pixels

Knowing these screen dimensions helps you optimize some of your content, however it's best to keep the shape and style of your site as minimal and linear as possible. There is no mouse on a mobile phone -- only an up-down feature -- so you can't demand that users jump around the page.

Figure 2. Sony Ericsson T630, Nokia 6600, Blackberry 8800, iPhone

iPhone/Internet-tablet versus old green-screen phones
There are a couple of exceptions to the norm in the mobile phone market. They are the really high-end devices like the iPhone or the Nokia Internet Tablet, and the very basic, old "green-screen" monochrome dot matrix devices such as the Nokia 3310, both of which are shown in Figure 3.
The Nokia N810 High-end Internet Tablet, and the most popular phone in the world � the Nokia 1100

The Nokia N810 High-end Internet Tablet, and the most popular phone in the world � the Nokia 1100

Low-end mobile phones have several limitations, including screen resolution and a severely limited ability to render XHTML documents. As I mentioned in the previous section, if a majority of your customers fall in this group, then maybe WML is still for you.
At the other end of the spectrum, high-end devices often have the ability to run a web browser that's comparable to one you might use on a desktop machine. Delivering a quality user experience to these devices can be tricky -- while the device may be perfectly capable of rendering a full, traditional web page design, it's probably transmitting data over a cellular network, which is much slower than standard broadband Internet speeds. So even though the device can handle a normal web site, the customer's situation and the reason why they're requesting your services may mean that sending them the normal version of your web site isn't the best solution.
We'll see in the next section what this means for the design of your mobile site.

3. Target the Right Customers

The goal for any web site should be to know your customers in order to deliver to them the most appropriate content.
This goal is even more important with mobile sites -- not only do you need to know your customers, but you need to know what they are likely to be doing on your mobile site, as well as where they'll be when they're doing it. Traditional web site customers are most likely sitting at a desk facing a large monitor that has a decent resolution. Visitors who are browsing your mobile site are unlikely to be in the same circumstances -- they might be waiting in line, riding on the train or the bus, running to the departure gate, or lost in an unfamiliar town late at night and trying to get somewhere.
Google is one company that has invested considerable effort into streamlining its web applications to suit mobile users. The web developers at Google have identified and focused on three main groups, and they attempt to target their applications to those customers' needs. These are three solid categories, and are worth examining for your own mobile site. Let's look at them now.