StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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 <a href="http://wurfl.sourceforge.net/utilities/mwt.php" rel="nofollow noreferrer">Mobile Web Toolkit</a> 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.</p> <p>If you want to do it yourself, essentially, you have to do the following.</p> <ol> <li>Using server-side code, examine the User Agent in the Http Header. This tells you what kind of phone/browser made the request</li> <li>Output appropriate markup and CSS for that user agent.</li> </ol> <p>Useful tools are the User Agent Switcher add-in for Firefox. Using this, you can, for instance, visit the <a href="http://www.bbc.co.uk/" rel="nofollow noreferrer">BBC's website</a>, 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.</p> <p><a href="http://mobiforge.com/" rel="nofollow noreferrer">mobiForge</a> contains useful information. <a href="http://wurfl.sourceforge.net/" rel="nofollow noreferrer">WURFL</a> and <a href="http://deviceatlas.com/" rel="nofollow noreferrer">DeviceAtlas</a> are databases that allow you to determine the capabilities of the device that has made the request.</p> <p>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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload