Update: The Tour of California mobile site that I rant about below  no longer uses the  annoying meta-refresh!  Thank you, to whoever is responsible.

There’s a bit of html, a meta tag which you can add to a web page to cause the page to reload after a specified number of seconds. It looks like

<meta http-equiv="refresh" content="60">

Which means that every 60 seconds the page will reload itself. It even works on many mobile web browsers. In general meta refresh is a bad idea. But on a mobile web page it’s a terrible idea. Why? Because it takes control of the browser out of the user’s hands. When the page refreshes the user may be in the middle of reading it’s contents. The refresh will blank the screen and then redraw it – a process that can take anywhere from a few seconds to a minute on a mobile browser. If the screen is scrolled when it refreshes the browser may not return to the scroll point after the refresh so the user loses his place. Finally, if the user is paying for data by the kilobyte every refresh adds to the bill.

I was reminded of this today. I sent the afternoon watching the opening stage of the Amgen Tour of California cycling race here in San Francisco. It was beautiful day and local hero Levi Leipheimer won the event, a short time trial to the top of Telegraph Hill. I was about halfway up the hill – far from the PA and big screens at the start and finish but I was able to keep up with the race using the mobile web on my phone. But it was much harder to do than it should have been and the culprit was meta refresh.

The official Tour of California mobile web site (mobile.amgentourofcalifornia.com) is a single page with the latest updates appended to the end. By the time the stage was over the page was just under 10 KB or about 20 screenfulls on my phone’s 176x220px screen. The screen had a meta refresh tag that reloaded the page every 60 seconds. The phone’s Openwave browser took me to the top of the page every time it refreshed. By holding the down key this browser will scroll down one screenfull approximately every 2 seconds. Every time I tried to scroll to the bottom to read the latest updates, before I got halfway there the page would refresh and take me back to the top! Completely unusable.

Fortunately, I also had Opera Mini which ignores meta fresh, has a hot key (#,0) to manually refresh the page on demand and even remembers where you were on the page and scrolls back to that point after a refresh! Beautiful, thanks again Opera for Mini which made using the Tour mobile site a pleasure.

If you can’t use Opera Mini, which doesn’t work on all phones and carriers, something that seems to work is to view the Tour of California site using a mobile transcoder. I tried Google’s transcoder and it doesn’t pass the meta refresh though to the mobile browser which is good. Using Google is not perfect though – there seems to be some very agressive caching in the Google Transcoder. The transcoded page was at least 15 minutes behind the live one. I haven’t had time to test other transcoders but I’ve modified the Tour of California page at Yeswap.com (yeswap.com/toc.php) to give users a choice of viewing the Tour site directly or through the Google, AOL or Skweezer transcoders. If you’re a cycling fan and you find this useful, please leave a comment.

There’s also Cyclingnews.com‘s Tour of California coverage at live.cyclingnews.com/wap. It uses a refresh too but at least it’s only every 5 minutes. A more serious problem with the Cyclingnews site is that some of the pages have invalid markup, a missing </p> tag, and won’t even load on most mobile browsers.

Wow, I just looked at the Tour of California mobile site and it’s changed. The refresh is still there but the order of the entries has changed so that the newest is at the top. That should make it a little more usable unless you’d like to scroll down to the bottom to read the early entries. I’d still prefer it without the automatic refresh.

Incidentally, while automatic refresh is bad, a manual refresh button on the screen IS a good idea for this sort of live coverage mobile site. Many mobile browsers don’t have an easy or intuitive way to refresh the page manually so having a refresh button or link aids usability.