It’s hard to miss the number of portable devices out there these days and the huge number of people who are regularly using them to visit websites. You don’t want to ignore this part of the market so it’s wise to think about making your site work well on these devices.

There are a couple of problems here. One is the limited resources (small screen, limited user input, etc) and the other is the vast range of devices that you need to support. Most of these devices demand some fairly major changes to your site layout and content to make it work successfully. This can be the biggest headache for you and your site.

One solution here is to pay attention to the market – the iPhone and iPod Touch now account for at least 0.23 percent of web traffic in the US. That may not seem a lot, but it’s a growing number, and it’s larger than the share of any other mobile browser. So it may be a wise solution to target your site just to these devices.

The good news here is that the iPhone has improved the user experience massively. It’s a joy to use and includes support for many web standards, such as XHTML, CSS2 and Javascript. The iPhone is able to do this because its browser is based on the Webkit Open Source Browser Engine (as do the Nokia N95 and Android phones).

This means that you really don’t have to make many changes to your site to get it to work on the iPhone. Great news. Of course the iPhone brings some amazing capabilities for browsing full-sized websites, with easy zooming and scrolling using the touch screen display.

If you want you can take this further and target your site more towards the iPhone: change the site so it’s more ‘small screen friendly’, with button-style navigation and less use of zooming. This makes it more of an iPhone-like application (think of how iTunes looks different on the smaller display). Actually this can be a useful exercise in itself – can you distill your pages down into their key content, just focussing on headlines and titles?

The iPhone keypad is pretty good but still not as useable as a full-size keyboard, so it’s good to find ways to reduce the requirement for visitors to type in text.

Also why not explore some new capabilities that are unique to a mobile site? What can you do with an onboard camera? What about location information?

Even if you don’t dive headfirst into these fancy features, you should be able to create a good user experience for your site using the iPhone. By doing this you are making a decision not to target the older, less capable devices. In a way you are ignoring the long tail of multiple mobile browsers.

What does this mean for you as a website owner? It means that more of your visitors will be browsing your site on mobile devices such as BlackBerrys and iPhones. The recent release of the new iPhone will increase this number.

So what? Good question.

How does your website work on an iPhone, or a cellphone? Have you checked? The biggest difference is that these portable devices have a much smaller display than your average PC or laptop. This can mean that your nicely laid-out pages are squashed, stretched, and otherwise moved around [obviously this is less of a problem on the iPhone, but it's true for most other devices].

Mobile devices tend to be slower than PCs, so loading times are longer. If your site relies on large images or flash animations these can make the browsing experience pretty lousy.

Unless you code your pages properly, your CSS stylesheet can be ignored. This means your fonts can be messed up too, for example with oversized letters in headings.

So here’s a list of useful guidelines to follow to make sure your website works well for your mobile visitors:

1. Design for the smaller screen. Go for less columns, and ideally no horizontal scrolling
2. Use a separate CSS stylesheet and switch to a mobile version
3. Design your pages for input with a stylus/trackball, rather than a mouse
4. Reduce image sizes, or remove them altogether
5. Disable flash animations
6. Make fonts compatible with the smaller screen size (especially headings)

If you follow these guidelines you’ll provide a better browsing experience for your visitors. Hopefully they will spend more time on your site and come back in the future for more…