Change Site Tabs To Reminders when Users Lose Focus

Este artículo también está disponible en español.

I recently wrote about the HTML5 Visibility API in Smashing Magazine, showcasing it’s unique ability to detect when a web page is no longer visible to the user. Along with politely shutting down services that are not required when the site is hidden - pausing animations, muting or shutting down videos or audio, and more - it’s nice to remind the user that the page is still around, awaiting their return. Doing so takes just a few lines of JavaScript:

First, let’s say the title of our page is set as usual in HTML:

<title>Compelling Article - Site.com</title>

We can read and change this with JavaScript when the page loses focus:

var title = document.title,

newTitle = "Remember to read this " + title;

document.addEventListener("visibilitychange", function() {

document.title = ((document.hidden) ? newTitle : title);

});

title reads the page <title>, newTitle adds a reminder to it, and a ternary operator sets the appropriate version depending on the visibility of the current tab. You can see a version of the same script operating on this article when you turn to another tab or window.

Conclusion

This technique will be effective only so long as two things remain true:

1. The number of open browser tabs for a user is relatively low. This will allow the document title to be visible at the top of each tab. If the user is anything like your humble author, they may have 30 or more tabs open at a time, reducing visibility to just the favicons. In addition, most mobile users won’t see the tab change at all, unless they’re in browser overview mode.
2. A small number of sites use this technique. Features like this are akin to an arms race: there’s little advantage if everyone uses the same technique.

It’s important that techniques like this be used tastefully and politely: please don’t contribute to a noisy, pushy web by adding animated titles or favicons.