Friendly Reminder: How to get Users Interested After Leaving Your Tab

TL;DR Get people back to your site by showing an attention grabbing message in the tab title. Set it up with just a few simple lines of jQuery.

Picture this scenario: A user, let’s call him Thomas, browses the web for interesting news, articles, videos and so on. He usually has quite a few tabs open at any time, having WhatsApp in one, Dribbble, Feedly and Facebook in each another one, listening to music on Noon Pacific in the next one, and so on and so on. Surfing along he stumbles upon (no pun intended, initially) a bunch of interesting videos and articles, including the clever and enlightening blog post you had put so much effort into. He opens all of these in a new tab each and continues browsing, just to soon find himself with a bunch of tabs in his browser that he doesn’t even remember opening in the first place. He closes them one by one without even opening and surfs away through the interwebz.

“That’s not fair”, you’re now thinking. “I spent so much time on this and the info would have clearly be of benefit to Thomas, but he never actually got to read my words of wisdom!” I say: you’re right!

That’s why today I want to show you a nifty little trick that may be able to instead grab Thomas’ attention and bring him back to your article. You’re gaining a reader, Thomas is gaining wisdom, everyone’s a winner here!

To do just that, we will show a “Don’t forget to read this” message in the page title (which is displayed as the tab title) whenever the focus shifts away from our page. That means, whenever our visitor Thomas switches to a different tab in his browser, our page title gets swapped out with this. And while typical titles are a dime in a dozen, a message like this is (hopefully) more likely to grab his attention.

You can try this in effect right now, as I have it implemented on my blog myself. Simply deactivate the tab and see how the title changes. Activate it again and it changes back to the original. Pretty cool, he!?

Credit, where credit is due: Although I did write the code for my implementation by myself, I did not come up with the idea on my own. I first noticed it on an article on the InVision Blog. If you don’t know InVision, go check it out! It’s a great tool for quickly showing your designs like a prototype that can spare you some serious headache. Their blog is pretty awesome, too, with lots of great design related articles. Just go check out the app, and if you use the following link you even get 3 months for absolutely FREE.

Setting it up

So, lets get down to business. Setting this up is actually really simple. Let me show you how.

My implementation here uses jQuery, but you could just as well make it work in regular ol’ Javascript, I just don’t see a good reason why you would want to do that. Also, I’ll give you a few side notes on how to do this for a Ghost Blog (which is what I’m using).

So, go ahead and open up the HTML document, where you want the message to appear later, in your text editor. Usually this will be your index.html file or some sub page. In case you’re running a Ghost Blog on the default Casper theme, navigate to /content/themes/casper and open the default.hbs file. This will make your message work on any page of your blog.

Now, scroll to the bottom of your document and insert a <script> tag just before the </body> closing tag like this:

<script type="text/javascript"> 
</script>

Our script is, of course, going in between these tags. Now let’s add a few lines to change the title when Thomas moves away form our tab. For this, we’ll simply use the jQuery blur function. Put the following lines between the script tags:

/* * * Change title on blur * * */ 
$(window).blur(function() {
$("title").text("Don't forget to read this...");
});

Now this should work about fine. Only problem is, when you get back to the page, the title continues to show the “don’t forget…” message. So let’s change the title back to the original. Just copy and paste this snippet right underneath the first one.

/* * * Change title back on focus * * */
$(window).focus(function() {
$("title").text("{{meta_title}}");
});

In this case, I’m using the {{meta_title}} expression to fill in the appropriate title through Ghost. If you’re handling you’re pages differently, just replace {{meta_title}} with whatever you want displayed as the title. Or just get the page title in a document.ready function in the beginning and later use the corresponding variable. Here is a universally usable, complete snippet that should work for just about any page:

<script type="text/javascript">/* * * Get page title when the document is ready * * */ 
$(function() {
var pagetitle = $("title").text();
});
/* * * Change title on blur * * */
(window).blur(function() {
$("title").text("Don't forget to read this...");
});
/* * * Change title back on focus * * */
$(window).focus(function() {
$("title").text(pagetitle);
});
</script>

Yay, that was easy!

As I told you, getting this up and running is really simple and I think, for a blog or similar publication, really worth it. No, I don’t have scientific proof as I don’t have the number of visitors necessary to test it. However, even though I know the trick, i can catch myself falling for it over and over again, even on my own site. I’m also guessing I’m not the only one. In my opinion, you at least can’t do any harm in the worst case, but do some good in the best.

If you have an opinion on this yourself or just like to write comments in general, feel free to leave your two cents below!


Originally published at blog.thepascalbecker.com on March 10, 2015.

Pascal Heynol (Becker)

Written by

Designer, writer, researcher, engineer — computational product person. Loves art, paints all too rarely. Tries to talk to computers, but they just never listen…

The Pascal Heynol

Senior Strategic Designer, Consultant

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade