With smartphones becoming more prevalent with larger screen resolutions and more of a “desktop feel” to the browsing experience, it really is a good time to look at creating a mobile version of your website.

Designing websites for mobile phones

However, there are still a few things to bear in mind. Even with the increased bandwidth of 3G it is not universal, especially on the move. And typically, browsing will be more restricted to the core elements on a given website. That is why the best mobile web experiences offer a variant of their website optimised for the web. This should include thinking about:

• reducing file sizes
• removing unnecessary code such as Javascript
• thinking carefully about video type if targeting iPhone (no Flash)
• what is visible on a reduced physical screen size

Just because a 4 inch screen may have 800 pixels across doesn’t mean that text is legible when designed for that screen resolution. Key things to think about when designing for a mobile phone web interface include:

1. as a first step, create different web templates based upon modified CSS and XHTML to provide a simpler interface for mobile web browsing
2. identify the key things that users will come to the website for and dedicate most resources and screen space to this aspect
3. understand what browsers your audiences will be using and use a “browser sniffer” to identify the browser and deliver the appropriate web templates
4. and remember, even though you have optimised for a smaller handheld device, the user is king, give them the option to view the standard site on their phone with an obvious link

There are a number of technical and design specific issues as well around web design for mobile devices and if you’re interested about those, we’d be happy to have a chat and see how we can help.

Continue reading »