Setting a Custom Title When Adding a Website Bookmark to Your iPhone, iPod Touch or iPad Homescreen

Saturday, April 03, 2010

Pigeon-holed in “Web-Design”

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>

You are probably better off searching for /Mobile/ and /Safari/. It’s one less line and it can also pick up other ‘mobile devices’ and it future proofs you against device name changes. Other than that really nice tip.

Edd Sowden on 03 Apr 2010, 17:13

Good plan Edd.

Andy on 03 Apr 2010, 17:23

A very cool idea!

I wonder though… might there be a way to change the title as they save the page to their homescreen? Just because it would still be useful to have the title right up until that point (when switching windows on the iPhone for example). Probably much harder to do, but would be nice if it is possible.

Ian Storm Taylor on 03 Apr 2010, 18:50

@Ian - I doubt that’s possible as I’m not sure there would be any JS handler available to attach to, but of course I’d be intrigued if anyone can figure out a way to do it.

Andy on 03 Apr 2010, 22:20

Devils advocate: Isn’t this a case of SEO getting in the way of user experience? Then adding a fix to rectify it? From a purists stand point, I would forgo the potential benefit of SEO for better user experience.

Then again, can JS be disabled on Mobile Safari, if not, it’s probably a moot point. Also, why only target Mobile Safari, surely anyone bookmarking such a site should gain the same reduced titles, even for just their bookmarks.

trovster on 04 Apr 2010, 15:21

SEO isn’t getting in the way. On a desktop, where we have plenty of screen real estate, I would much rather have the full title. That becomes useful when you have multiple windows open from the same site. (Which is why I wanted to implement the JS at the last possible second to change the original title.)

But saving to the home screen isn’t like bookmarking. Generally you won’t be saving multiple icons per site. Instead you just want the site’s name to appear under the icon. So really Apple should implement another piece of meta data that could control the home screen text.

Ian Storm Taylor on 04 Apr 2010, 17:25

@trovster - I happen to agree with Ian on this; an icon title saved on an iPhone screen must be no longer than about 12 characters, and I couldn’t write my entire company name out in that space - abbreviating it to fit on one device for one purpose would be incredibly radical when your search engine representation would be so badly damaged as a result.

I do know what you are getting at, but I think this shiv is meeting a very specific need, and it is better to meet this need harmlessly in this way rather than compromise search engine relevance (remember the title is also a description in search engine results, and a way of summarising the content). I think this actually offers the best user experience for the most people.

JS can probably be disabled on an iPhone, but if it is, you would also forgo so many other more important things, that this is extremely minor in the greater scheme.

Regarding targeting more than just Mobile Safari users, there possibly could be a case for that, as it would make bookmarking neater generally, but by doing so, the other benefits of a longer title on a desktop browser (like identifying both the site and page title quickly) would also be forgone.

Andy on 04 Apr 2010, 22:57