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.

browser-tabs-focus
Invision blog tab focused
browser-tabs-no-focus
Invision blog tab out of focus

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.

Invision blog - multiple posts opened in new tabs
Invision blog – multiple posts opened in new tabs

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.

Browser tab reminder + title
Browser tab reminder + title

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!

About Luka Čavka

I’m a front-end developer from Split, Croatia, with a passion for responsive web development, especially HTML and CSS coding. During 7+ years of professional experience I have worked with clients from various fields and have published more than a few hundred websites. In my spare time I enjoy tinkering with new front end tools/techniques and having a beer (or two) at the local pub.

  • Алексей Иванов

    Hi, thank you for your guide!
    Could you explain to me, please. How can I actually add this code to my page? It differs from html-coding and it puzzles me severely. Thank you in advance for your answer!

  • Andre Esteves Perrone

    Awesome tutorial Luka! Thanks a lot for sharing this information! 🙂

  • ohbothersaidpooh

    So glad you posted this — I’ve been wondering how they got it right for a while now. Love it 🙂