A couple of days ago Si (@Si) and I spent a few hours in a mobile workshop with Dan Rubin (@danrubin).

During the break Si and I discussed a few updates we’d like to make on our Formula One season calendar, F1Calendar.com, and try out some of the new stuff we’d learnt. Over the past day or so, I’ve spent a little time making some minor (purely iPhone/iPod Touch/iPad) improvements for those who want to use them.

However we struck a problem when saving the site to the homescreen. I’d noticed that by default, Apple handhelds use the full page title to label the icon it creates - very good for search engines, bad for users of the iPhone. As a user, it can be very fiddly to shorten it down.

I couldn’t find anything on Google (though I didn’t look too hard), but it occurred to me that back in the bad old days, it was entirely normal to see horrific animations going on in the title bar, and wondered if a bit of JS couldn’t do the job of shortening it down for mobile users - and indeed it can.

One line of code that sniffs the user agent can alter the page title. It doesn’t affect desktop browsing users or people on other mobile devices, but just is a nice touch for the users of Apple touch devices.

<script type="text/javascript">
  if( navigator.userAgent.match(/iPhone/i) || 
      navigator.userAgent.match(/iPod/i) || 
      navigator.userAgent.match(/iPad/i)
    ) {
         document.title = "F1 Calendar";
      }
</script>

Schimples. (There was an earlier error in this code - some extra parenthesis - this has now been rectified.)

I’ve guessed the iPad string there; if that’s wrong let me know, but the other two will work for sure. A nice touch for any site you imagine will be used this way.

And so now, when you visit F1 Calendar on your iPhone, not only will you get a better handheld experience than before, you’ll also have a nice, short title to use immediately, whilst it won’t compromise the search engine performance.

Try adding F1Calendar.com to your homescreen and see the result.

Update: You might want to use this alternative version for a more robust future-proof version (basing the search on the browser rather than the device). It depends on your application. (Thanks Edd)

<script type="text/javascript">
  if( navigator.userAgent.match(/Mobile/i) && 
      navigator.userAgent.match(/Safari/i)
    ) {
         document.title = "F1 Calendar";
      }
</script>

Comments (7)