boogdesign posts

The Boog Design Blog

16/10/07

03:02:19 pm, by robertc

, 755 words, 338 views

Categories: Web Design, Front End Web Development, Server Side Web Development

My First Website for Mobiles

At work we decided to purchase a few .mobi domains, not because we have any particularly compelling mobile content, but to boost the web presence of our mobile product and, mostly, to make sure no-one else snapped up the domain names we wanted. However this did give me the opportunity to build my first website explicitly for mobile devices.

I'd checked our main website on ready.mobi, because I have written a mobile stylesheet for it, but it got a pretty crappy score mostly because of the sheer size of the content. So my main goals for this first site were to:

Produce a website which validated
Get a 'Good' score on the ready.mobi evaluator

My first task was some background reading, I had a look through the DotMobi Mobile Web Developer's Guide and Luca Passani's Global Authoring Practices for the Mobile Web. Following that, I grabbed a page off the main website and broke the content up into three XHTML-MP pages. This was easy enough to do after reading the guides, not much different from creating regular XHTML pages. The only bit I wasn't too familiar with was sorting out the navigation and access keys. It was easy on the home page (actual links changed for brevity):

<ol> <li><a href="page1.php" accesskey="1">One</a></li> <li><a href="page2.php" accesskey="2">Two</a></li> <li><a href="page3.php" accesskey="3">Three</a></li> <li><a href="page4.php" accesskey="4">Four</a></li> </ol>

But on the other pages I wanted to avoid having a link to the current page, but keep a consistent numbering scheme, from 'page3.php':

<ol> <li><a href="page1.php" accesskey="1">One</a></li> <li><a href="page2.php" accesskey="2">Two</a></li> <li value="4"><a href="page4.php" accesskey="4">Four</a></li> </ol>

So that was the actual content sorted out, most of the issues I was seeing in the ready.mobi validator were to do with server side configuration. Some mobile browsers require a application/vnd.wap.xhtml+xml MIME type, which Apache isn't going to do by default, but is easy enough to configure. However, I wanted the website to display on my boss's desktop browser too and IE will have some difficulties with that, so I decided to use PHP to do some lightweight browser detection:

<?php header("Cache-Control: no-transform, max-age=86400"); header("Vary: User-Agent, Accept"); if (strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0) { header("Content-type: application/vnd.wap.xhtml+xml"); } elseif (strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/xhtml+xml')>0) { header("Content-type: application/xhtml+xml"); } else { header("Content-type: text/html"); } echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"; ?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

This works by looking to see what MIME types the browser says it can accept, then giving it the best one it can handle. Note that I'm also advising transcoding proxies not to transform this content.

The final setup step was to set appropriate cache headers on all the static content. This is easy to do in .htaccess:

<IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 day" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType text/css "access plus 1 month" ExpiresByType application/x-javascript "access plus 1 month" ExpiresByType text/html "access plus 1 week" ExpiresByType application/x-shockwave-flash "access plus 1 month" <FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$"> ExpiresActive Off </FilesMatch> </IfModule>

Note that I'm ignoring PHP files in this directive, as I'm already handling the headers in the PHP files.

One final note, as I discovered a few times while working on this, you need make sure your error pages also handle all the MIME type stuff and are valid XHTML-MP, otherwise the experience could be confusing for mobile users. This applies to 404 pages (I just made it a PHP page) and your formmail.php script (if you're using one).

And there you have it, my first real, live, mobile website!