A Funnelweb World

Well, since the relaunch a couple of months ago of the main London For Free site, this has been at the top of my list of phase 2 stuff to do. Then last month, there was an excellent article in .Net magazine, describing the basics of making your site mobile.

So finally today, I started creating the mobile version of the site.

Now the fact is, my current site is already accessible via mobile. I’ve checked it on a blackberry and also on my new phone, and it doesn’t look too bad. But it’s not optimised for mobile use.

After all, there’s a load of stuff on there that you probably wouldn’t want to try and read on your mobile. Or can’t view at all even if you did want to - e.g. the YouTube video clip on the home page.

So I did a bit of thinking about the sort of content on london for free that someone on the move might want to see. And I figure that’s basically directions and info for the most popular walks and bus tour, and links showing the locations of landmarks on them. Content they can refer to while they are actually doing the walks or tour.

Then I needed to rethink the current page layouts from a mobile angle. The average mobile screen size is - doh - loads smaller, and anyone who’s tried to navigate around a website on a mobile knows its not easy, so I knew I needed to create narrow content and lots of internal site links that are easy to get to.

And, of course, I had to consider page weight. No one probably gets the promised 3G speeds touted by mobile phone companies, so I needed to provide lots of pages with tiny bits of content, making them quick to download.

Putting it altogether, it meant identifying the most popular walks (via google analytics), chopping their content up into pieces, embedding style info within the xhtml pages (rather than using separate css files), shrinking the image sizes and including lots of nav links.

But using the same London for Free logo to try and retain the relationship with the main site in case anyone wanted to check out the full site on their computer.

Finally, like any good web site, it had to be accessible - so the code had to be totally validated.

Here’s my first attempt. I based it on the templates provided on dev.mobi.

Though the normal W3C Validator works for validating mobile sites, there is a much better alternative called readi.mobi.

It not only validates your mobile pages but it also gives you info like the speed of download to an average mobile, the cost of download in various countries, and crucially screenshots of what the page looks like in different mobile phones. For example, here’s the info they gave me for my mobile index page.

I’ve still got a way to go to get the site fully up and running for mobile - lots of content to modify, for starters. But at least I now know what I need to do.