The number of mobile phones being shipped world wide is estimated to hit the two billion mark within the next five years. And one of the most significant features of the new generation of phones is, of course, the convergence of voice, email and web communication in one handy device.
As memories of expensive, over hyped and weedy WAP browsers rapidly diminish, ensuring that web data can be viewed across a range of small-screen appliances is more important than ever before.
Of course, mobile access is not restricted to phones: various Pocket and Palm PCs have been offering some form of web browser for the best part of a decade, but the truth is that the PDA market is in decline compared to the rapidly expanding phone market.
Yet it is precisely this market that is creating the most problems. Whereas PDAs have quickly developed cut-down versions of popular browsers that can handle most well-designed web pages, phones are often caught up in proprietary systems that offer their own difficulties for a designer.
Back to basics design
It is because of such difficulties that the World Wide Web Consortium launched its MWI (mobile web initiative) earlier this year. Tim Berners-Lee explains that mobile access to the web has been a second class experience for far too long. While demand for such access continues to grow, web browsing from these devices has not become as easy as was anticipated.
Some problems associated with using mobile phones to browse the web - as well as practical solutions - have been identified by groups associated with MWI, and include:
- Keep data entry to a minimum Obvious really, but tapping in text on a numeric keypad is much harder than a qwerty keyboard.
- Design for a smaller screen Another obvious point - many sites are intended for 1,024 pixel screens, not 120 pixels.
- Dont waste data As users tend to pay by the minute or kilobyte, this is a back-to-basics move for any web developer - keep file sizes small and waste as little time as possible.
- Dont count on upgrades Processors and transfer speeds are much slower on mobile phones than PCs, and users cannot upgrade these functions.
- Realise user expectations Mobile users will have very different intentions when using the web than someone with a PC and a broadband connection. The most obvious point is that they usually want a specific piece of information rather than the ability to browse the web.
It's common sense
As the Openwave developer network points out, many of these points are common sense. A little forethought can help you implement usable pages for most mobile users.
Simplicity is key: such pages are accessed from the top down and it is better to design with lists rather than tables, which can slow down the device and display oddly in different browsers.
Nokias research center also offers some simple and practical advice. Keep your pages light and avoid large objects that need to be visible at a glance - or small text in images. When XHTML pages are converted to a narrow layout, too much information can be relegated to the foot of the screen.
The new browser wars
As well as usability issues, one key concern for the MWI is compatibility. Internet Explorer may dominate on the desktop, but on phones the main players include Java-based browsers from Nokia and Motorola, as well as the very popular Openwave browser for 3G phones.
Opera (which licenses its software to Nokia) has also recently launched Opera mini. This is an interesting app because a remote server processes a page before sending it to the phone, meaning that less powerful devices should be able to access the web.
For developers, this variety means that the number of toolkits that may be required is starting to proliferate. Microsoft, for example, also offers an ASP.NET mobile controls package (formerly known as the Microsoft Mobile Internet Toolkit) that can produce relevant XHTML and WML (wireless markup language) pages, and there are also relevant kits from Nokia and Openwave among others.
In general, XHTML appears to offer the best way forward, although many low-end or older phones still support WML only.
This is where initiatives that shift the processing of code away from the phone and towards a remote server will become much more important in future. Enabling web access from as many mobile devices as possible.
Site of the month
This month, rather than specify a particular site, we will recommend several sites that offer a very useful tool when developing pages for mobile devices: phone simulators. You can download simulators for the Openwave (http://developer.openwave.com) and Nokia (http://forum.nokia.com) browsers. Opera mini does not, as yet, offer a PC simulator, but there are several online WAP emulators available, including WapTiger (www.waptiger.com) and YoSpace (www.yospace.com).
XHTML for mobile devices
While WML has progressed since the limited, monochrome displays of the end of the 90s, it has largely been superseded by XHTML - Mobile Profile (XHTML-MP).
As XHTML enforces strict checking of syntax (so no sloppy HTML coding), one important feature is to include the DOCTYPE statement at the beginning of any code. This enables pages to be reformatted for mobile devices - and if you take the advice on not using such things as tables or large graphics, you can repurpose your data fairly easily.
A sample XHTML page would look something like the following:
<!DOCTYPE html PUBLIC -//WAPFORUM//DTD XHTML
<title>XHTML for mobile</title>
<h1>Links to XHTML for mobile devices</h1>
<p><a href=xml.html>XML and Document types</a></p>
<p><a href=xhtml.html>XHTML style guide</a></p>
<p><a href=openwave.html>Extensions for Openwave browsers</a></p>
As with all XHTML documents, important features of web design include strict standards. As such, an XHTML-MP document must be well formed, with a root element
, all other elements correctly paired with closing tags, and all attribute values to be enclosed in quotation marks. Single tags, such as
are simply no longer welcome.