Changing the browser tab title – reminder

In this article I’ll show you how to grab your user’s attention by changing the title text in the browser tab.
Since typical titles are a dime-a-dozen, this useful little trick will make your tab stand out from the crowd.

I was pretty impressed with this nifty effect when I first stumbled upon it while going through my RSS feed, opening multiple links in my browser.
The website that had this little piece of pure awesomeness implemented was the Invision blog.

Their tab title shows the “Don’t forget to read this” message whenever the focus shifts away from their page.
That means, whenever someone that visits their blog article switches to a different tab in the browser,  the page title gets swapped out with the “Don’t forget…” message.

Setting up

Setting this up is pretty straight forward.
You just need to include this little piece of jQuery code on your page:

Although this effect looks really nice (in my opinion), there are a few potential drawbacks that you’ll have to be aware of.

For example, if the user opens two or more pages/posts from your website in new tabs, all tab titles will show the same “Don’t forget…” message.

This makes navigating around a bit tricky, and can apparently cause a few problems when using some bookmark apps (check out this post to learn more).

The easiest way we can address this is to include the original tab title after our reminder message.

The tab will have the same reminder message shown (since the full text doesn’t fit), but when you hover over it, you’ll be able to see the reminder plus the original title in the tooltip bubble.

Another potential drawback is that the user can mistake your tab for some kind of spam and automatically close it, since he doesn’t know what the tab contains. This can especially be the case when the user isn’t familiar with your website.

Conclusion

That is basically it. Just a few lines of code, and you got yourself a neat little feature for your blog or website.
Be aware of the potential drawbacks I mentioned and be sure to weigh in the pros and cons before you implement this feature.

Have fun!