Developing Mobile Web Sites
Wednesday 27th May 2009
 We recently developed a mobile web site for A-Z-Animals.com enabling users to search the A-Z Animals encyclopedia for animal facts and information directly from their mobile phone. As part of the development process we gathered a good collection of resources which we hope will be useful for you when developing a mobile web site.
As with all web development, nothing is ever as simple as it should be, with traditional web sites there are always problems with compatibility testing and rigorous testing with the main web browsers such as Internet Explorer, Firefox and Safari is always required. When developing mobile web sites this becomes yet more complicated, as each mobile phone uses a variety of different light-weight browsers and have varying screen sizes, this affects how you must code the site and how you must design it so it is usable on all phones from the first WAP enabled mobiles to moderns internet phones like Apple's iPhone which has a screen size of nearly three times that of some of the older mobiles.
What is most critical is the quality of your HTML coding, or to be more precise for modern mobile browsers it is XHTML-MP. The quality of coding is far more critical than with traditional web browsers because most of the light-weight browsers don't have the same error handling functionality of desktop browsers which can result in totally unusuable or even invisible pages, as opposed to poorly formatted or disrupted layouts with desktop browsers.
Before you begin
Before you begin developing a mobile web site, make sure you are familiar with XHTML-MP and the differences from standard XHTML and HTML. You should find the following resources useful when learning the key differences between coding for desktop browsers and mobile browsers:
Before you start developing your site
Before you put too much work into developing your final mobile site, play around and develop a rough template, then test it! Using the various online emulators available (and your own mobile phone), and a code validator you will quickly find what causes problems and how you should write your code. Doing this at the beginning will save you time adjusting your finished site and will eliminate the number of common errors you have! You should find the following resources useful when testing your mobile web site:
When developing your mobile site
When developing your mobile site you need to consider how it will work with different phones, few mobile phones offer qwerty keyboards and simply use the traditional phone layout with three or four letters to a key, this makes data input difficult so you need to minimise the use of forms. Most mobile phone screens are small so you need to keep your pages short and concise with a minimal number of links and options. However, mobile phones like Apple's iPhone offer a far greater screen size which can make a mobile phone site look sparce and incomplete, it's worth considering the development of different versions of the site for different phones. You can use the browser user agent variable to detect what browser is being used so you can redirect users to a more appropriate site, for example redirecting desktop browsers to your main web site and directing general mobile phones and iPhones to different sites. A useful PHP script for doing this is available from detectmobilebrowsers.mobi:
When your mobile site is ready
When your mobile site is completed make sure you test it thoroughly using emulators and the W3C checker, if you can use as many mobile phones as you can lay your hands on. An extremely useful tool for testing your mobile site is ready.mobi which offers emulators, code validation and an array of other useful tools:
Other useful resources
You may also find the following resources useful when developing your mobile site:
Share this article:
|
<- Service Recovery
|
Integrating OpenCrypt's PHP Login Interface ->
|
|
