Designing for mobile devices comes with its own set of hurdles and considerations, just like designing for the desktop screen.

All mobile browsers are not created equal, and you’ll need to be aware of their positive aspects and failures alike. Some mobile browsers allow you to zoom in and out of a page for easy access to links, some don’t. Some allow you to change the aspect ratio and some don’t. And of course mobile devices have varying screen resolutions, and are nowhere near the same as their desktop counterparts. If you thought designing for 800×600 years ago was painful, try 640 x 320 or lower.

Some mobile browsers are operated by touch screen alone, some require moving pointer around the screen and some allow both. Which is most important to your audience?

Bandwidth restrictions play a big part in how you put your design together. 3G speeds are usually fast enough to render any page, but many mobile phone carriers charge insane amounts for bandwidth. On the subject of bandwidth, the Nokia browser, despite being a very capable piece of software, does not cache, so going back and forwards between pages you’ve already viewed will force a complete reload from the server, which means it can potentially consume 2 or 3 times as much cost as other mobile browsers. With this in mind you’re mobile web site is going to have to be as lean as possible.

And something I’ve seen overlooked is that not all mobile browsers can handle AJAX requests, so graceful degradation or something a little more extreme is going to play a role.

Combine all these variables with the fact that the user has the ability to change the default font size (and often does), you’ll soon find yourself stepping into a world of pain reminiscent of the old Netscape vs Internet Explorer development era – unless you’re prepared.

The check list

Before you even start writing any code you’re going to have to commit to a set of design outcomes.

* Fixed width or fluid?
* If you use fixed width, what will be the resolution you design for?
* Will you allow for the mobile device being rotated to a different aspect ratio?
* Will you need to reduce the number of primary menu items, and which ones will be used?
* How will you handle large images and flash video that is supposed to appear in the content?
* If it’s a blog, will you allow users to login and comment?

Obviously I cannot list every possible outcome here as there are too many unknown variables from one site to another, but as you know your site better than anyone else, you’re in the best position to decide how to proceed.

How to proceed

I use a fluid design with a minimum width of 240px.

240 pixels doesn’t allow for many root menu items across the top horizontal axis, so I select the most important and limit to 4. While you can add more, one of the goals should be to not have any horizontal scrolling on the mobile pages at 240 pixels wide.

Additionally, all JavaScript actions should be either replaced with a graceful equivalent or removed altogether.

Sizing the text

I’ve noticed mobile browsers seem to disagree on what the default size should be. This is by no means a technical certainty, but instead based purely on my observations of a handful of different mobile browsers.

With that in mind, I decided that using pixel values for the text was going to be the best way of making the design appear consistent across different mobile platforms.

If anyone can suggest a good reason why this might not be good idea, I’d love to hear it. But as this is a learning process I am happy to put it into practice for now.

Getting around a page

Many mobile web pages lacks care shown towards getting around a page. One of the goals should be to make sure that all links are easy to access and they aren’t so close to each other that one accidentally activates something was not meant to. One way to do that is to make the main menu items on the mobile version of your web site as big buttons.

Likewise, to reduce the amount of finger scrolling up and down the mobile device screen, consider strategically placed anchors on the page to allow users to jump up and down with ease. Things like “back to top”, “jump down to comment” and anything else that might be needed.

Usability considerations

One thing I noticed about Opera Mini, despite it being my favourite mobile browser, is for some unknown reason it will not underline hyperlinks. This means that a simple underline for a link will not suffice (as there is no way possible to notice it), so you’ll have to make sure to use a colour as well.

This might be a redundant point to raise as I suspect most designers change the default link colours anyway, but I thought to mention it just in case.

Conclusions

Just like desktop screen development it’s a lot of practice, trial and error. With this in mind, let this comment thread be dedicated to pointing out anything I may have missed or even gotten completely wrong.