Designing for PC and Handheld Accessibility

It is becoming more and more important for web developers all around the world to provide for mobile access to their websites. This is because an ever-increasing number of individuals now regularly use their mobile devices - smartphones, PDAs and Pocket PCs - to access the Web, especially when on the move.

I have been a crusader of this cause for a while now, and see the need to provide tips and guidelines for those interested in making their websites future-proof, sort of (I really do believe that mobile devices are the future). Over 20% of traffic on my business site is from handheld devices. That's a lot of potential traffic for any webmaster to ignore.

Adopt XHTML as Document Type

XHTML is the future of HTML. By writing your codes in XHTML, you not only are making your web pages future-proof, but also automatically make them compatible with the new onslaught of mobile devices with XHTML browsers.

This means that WML (the initial standard for WAP) is on its way out and you do not necessarily have to create a separate WAP version for your site.

You may want to visit the http://www.w3.org site for more information.

For Layout, ditch tables; use Style Sheets instead

Most mobile devices (especially mobile phones) browsers are too small to accommodate table layouts, so forget tables and use CSS (Cascading Style Sheets) instead.

Besides for the purposes of accommodating mobile devices, using CSS for layout is now the standard practice in modern website design of any sort.

Width Specification Matters

Have you tried horizontal scrolling on a mobile phone?

Rather than use fixed width specifications e.g. 750px, use flexible/fluid width specs e.g. 100%. That way, your pages adjust themselves to the size of whatever device is used to access them.

Consider Using Media Specifications in CSS

You can specify two different style sheets for each page, one for PC displays and the other for handhelds.

Doing this displays the same page differently on PC and mobiles.

The PC CSS may create a more complex layout which large screens can handle easily, while the handheld-specified CSS presents a simpler layout for mobile devices.

To specify for handhelds, this is an example of the tag to place in the head section of your webpage:
<link rel="stylesheet" type="text/css" href="style.css" media="handheld" />

And here's and example of how to specify for desktops:
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

or simply:
<link rel="stylesheet" type="text/css" href="style.css" />

Design Semantically for Devices Without CSS Support

Structure your content such that it would still make sense to read through it with CSS disabled. That way, should a device that does not support CSS load your pages, they still make sense with all formatting lost.

Site interactivity: What scripting/programming language?

Websites are interactive these days, from simple submission forms to complex database functionality. The question is, ?What platform or language do you deploy to accommodate mobile devices??

Delving into the mobile browser scene, it is soon clear what a diverse array of browsers exist, with varying degrees of features and functionality. One thing you must avoid is to depend too much on client-side scripting.

Client side scripting depends on browsers having the particular functionality. Take JavaScript. That's client-side. Implementing JavaScript extensively on a site that's targeted at most mobile devices is mostly a waste. Where it is absolutely necessary necessary to use JavaScript on such sites, use it unobtrusively, such that where a user's device/browser has no support for the script, the web pages are not rendered useless. Either implement a fallback procedure with some server-side script or just have that particular level of interactivity be removed when mobile browsers access that page.

A lot of stuff people used to do with JavaScript, for example, can now easily be done with CSS. This includes: navigational buttons, mouse-overs etc. Using CSS, since mobile devices have no mouse etc, you can simply specify the navigation menu to be displayed as text links when mobile browsers load that page. Etc

Server-side applications, on the other hand, are executed on the server and the results simply sent to visitors' browsers. The browsers are not aware of what goes on behind the scene.

Server-side scripting is ideal when you want your site to have full functionality across a wide range of browsers. PHP is a particularly excellent and versatile server-side language. With PHP, you can implement solutions for web, WAP, and other browser platforms (yes; there are others, though in a strong minority).

Writing for Mobile

Writing for the web is not the same as writing for more traditional media. This is even more important to note when writing for a site that targets both PC and handheld users.

This article was written by Yomi Adegboye, a clergyman, mobility and web accessibility resource person. Yomi is based in Lagos, Nigeria from where his web-based business http://www.domainstandard.net is run. Visit Yomi's personal web pages at http://www.yomi.domainstandard.net.

By Yomi Adegboye