Looking for an approach to program a mobile website for any device. Are there any?

My wi开发者_Go百科sh is to know how I can program a mobile website, that fit to all mobile phones.

Are there any special approaches to recognize a device and render the code according to it?

Which tools and coding languages are required?

My first thought was to hold the website in XML, which would be parsed depending on the device.

You have to consider old phones, even devices with only wap support.

For example: The mobile website has to recognize Nokia N75 and render/send the code that looks optimal for this device. Same thing with an iPhone or a Motorola Razr.

There are all sorts of problems associated with developing mobile websites. Doing it well takes a lot of time and effort, as phones have such varying support of web standards. There are tools that do it for you, such as the Mobile Web Toolkit and Vodafone's PartnerMl. These tend to force you to write your pages using dedicated XML tags which describe a limited set of elements and styles that can be rendered on the page. The phone requests these xml pages, and the server side software intercepts the request, examines the type of phone (the User Agent), and serves back markup appropriate to that phone. The disadvantage of this system is that it is very inflexible; you are limited to the set of XML elements that the tool supplies, rather than the full flexibility of HTML.

If you want to do it yourself, essentially, you have to do the following.

1. Using server-side code, examine the User Agent in the Http Header. This tells you what kind of phone/browser made the request
2. Output appropriate markup and CSS for that user agent.

Useful tools are the User Agent Switcher add-in for Firefox. Using this, you can, for instance, visit the BBC's website, pretending to be various devices. You will see that the BBC outputs 3 or 4 versions of its markup, as well as 3 or 4 different versions of the CSS, depending on the user agent.

mobiForge contains useful information. WURFL and DeviceAtlas are databases that allow you to determine the capabilities of the device that has made the request.

You will quickly realise that you will have to keep your design simple, and it's best not to rely on Javascript, as only the most modern phones can handle it well.

XML is the way to go.

From there, you mosey on to parsing out and acting upon the Agent tags in the request.

From there you can choose (assuming the device supports it), having the device render it via XSLT, or you can apply the XSLT on your end and stream down the appropriate markup language for the device.

In the end, you end up with a specific "rendering" per device. Ideally, the more compatible the devices are with normal browsers, the close the final XSLT is to each other. But you'll still likely have a version for each device that you support.

The beauty of this is that you can add devices incrementally, as time and demand permits. And as devices converge, you gain value by being able to converge your renderings. Also, your back end stays the same no matter what.

Finally, it also works great for non-mobile as well.

Yea, it's a burden to support the different devices, but that's just a truth of the marketplace.

One way is to use strict html with very clear semantics and minimum of css tricking. Do only use relative measures (for example em and %). Trust the browsers default values, because they are in one way optimal for every device, more or less.

Nowadays there isn't exist good tools to do this. A good practice is to respect the different W3C standards about the accessibility (like the WCAG, the XHTML, etc). If you made your web site the most accessible as possible it'll be more adaptable. (independently from device, screen size, with or without screen touch...)

If you want more information you can read one of my article about the web accessibility here if you want: Guideline to move a website on a mobile device.

However you can use some meta tags to allow the web browser of the phone to adjust the content like this for the iPhone:

<meta name="viewport" content="width=device-width">

You might wanna check out WURFL