Designing websites for mobile users

Judging by the emails I receive, quite a few readers are clearly interested in mobile websites.

We’ve talked about how to optimise sites in various ways, along with some of the dos and don’ts.

One aspect of mobile site optimisation is whether or not you should do it at all ­ – a topic that’s discussed in ‘To mobi or not to mobi?’ below.

Arguments can be made either way, but below I’ll be looking at how to handle the practical aspects of updating your site.

Where we are
The particular set of pages that I’m considering updating allow visitors to my site to remotely program their digital TV recorder, either to search the EPG (electronic programme guide) for a specific programme or to set a recording for a specific date, time and duration. It’s the only section of the site that’s designed for mobile use, because it’s the section most likely to be used when you’re mobile.

The site’s coded in PHP and all the pages in the section rely on a function that’s in a library file called moblib.php, which is where I’ve put things relating to mobile access.

But iPhone users need something a bit more sophisticated; the text links might not be so easy to see and, further down the screen, larger options on the form will be useful as well.

How do we get this far? Well, this is part of what’s in our mobile library:

function isMobile() {
returnpreg_match(‘/Symbian|MIDP|Nokia|SonyEriccson|UP.Browser|Smartphone|iPod/’,$_SERVER[‘HTTP_USER_AGENT’]) ;
}
function brokenMobileBrowser() {
// some browsers don’t seem to populate hidden form fields
returnpreg_match(‘/SEMC-Browser/’,$_SERVER[‘HTTP_USER_AGENT’]) ;
}

In the pages within this section of the site there are a few simple tests. The isMobile function is used to choose which style sheet to load, and reversed to turn on the <DIV> tags that are needed for the main layout and to load the contents of the side navigation panels, like this:

<?php if ( ! isMobile() ) { ?>
<div id=”masthead”>
<div align=”center”><ahref=”../index.php”>< imgsrc=”../images/timerbar.jpg” alt=”Go back to home page” width=”700” height=”100” border=”0”></a></div>
</div>
<div id=”mainnav”>
<?php require(‘../navleft.php’) ; ?>
</div>
<div id=”bodytext”>
<?php } ?>

Like this story? Spread the news by clicking below:

 del.icio.us     Digg this     reddit!