Web Tricks: New Message Indicator

In continuation of the series “Web Tricks”, in which I share bits of the webmaster’s experience gained over the more than five-year history of support and development of the author’s project “English without fools”, today I will talk about a relatively simple and very effective solution to quickly inform site visitors about new materials, whether it is freshly published articles, blog entries, comments or forum posts.

As you can guess, to implement such a mechanism, we need something like a continuous feed of messages of different types, and the specific solution will largely depend on the capabilities of the engine you are using. However, even if your engine does not allow you to achieve the desired result with a little blood, try to simply understand the idea, and then screwing the indicator described here to any cash flow of income will not be too difficult for you.
')
So, imagine that we have a page with the address relative to the root, say, / latest / , which displays some new materials in reverse chronological order. For simplicity, we assume that all the records are of the same type, and they can be displayed in the form of a brief announcement - well, just like in our Habré.

It must be said that the presence of such a page in itself significantly improves the quality of navigation, and, alas, not all websites can boast with such a chip. But suppose we strained our mental, temporal and / or monetary resources, and got a tape of income. And all at once it became good!

Now regular visitors may not climb into all sections in search of something new (and it’s not a fact that they will be able to find it!), But go straight to the “New Messages” page to be able to take a look at everything that appeared on the site since last visit. And for the administration and moderators of the site, the convenience of such a tape is simply impossible to overestimate!

To provide access to the tape in one click from any navigation depths, it is convenient to provide the corresponding link in the site template, placing it in a prominent place somewhere. We write down:

<a href="/latest/" class="latest"> </a>

Along the way, we note that the link has been assigned a certain class name (in this case “latest”), which will allow us to further easily modify the appearance and dynamic behavior of the link using CSS.

So, we now have a link to the tape, new materials are available in one click, but one small inconvenience remains: we cannot say if there is really something new at the address of the tape, and there’s no other way to satisfy our curiosity. poke at once in the provided link, as if in general, and we do not.

But if you think? Is there some simple solution here? Looking ahead, I will say: there is! There is a solution, and it is as simple and elegant as it was older: with its help, the webmasters of the 90s supplied their message boards with indicators of new acquisitions at a time when no sophisticated engines were yet to speak.

The idea is to use the property of the browser to distinguish between visited and unvisited links. To make this chip work, all we need is to change the URL leading to the tape with the addition of new material. One simple way to achieve this is to assign a variable shank, or query, in HTTP terms to the permanent address of the page:

<a href="/latest/ ?12345 " class="latest"> </a>

As the value of the shank, you can use the ID of the last post, its timestamp, the global counter variable - it does not matter. It is only important that this value is updated with the arrival of the next message. And then the visitor will see his favorite reference in the next entry to the site in the form in which we find it in CSS: for example, we will highlight it in red:

a.latest:link {
color: red;
}

a.latest:visited, a.latest:link:visited {
color: black;
}

As you understand, our possibilities in the design of the indicator are limited only by our imagination. Nothing prevents us from using for this the font parameters, color, background pictures, animated images and much, much more. The main thing is that the indicator performs its task and signals the appearance of new messages.

Personally, I use such a flashing ball for my tape in English without any fools : , but, naturally, you can arrange all this to your taste. The code for this design might look something like this:

a.latest:link {
background: transparent url('/img/blinker.gif') scroll no-repeat 0px 50%;
padding-left: 20px;
}

a.latest:visited, a.latest:link:visited {
background-image: none;
}

That's all. An experienced webmaster in this place will frown and say, they say, a kindergarten. Do not rush to judge, dear. Given that this method is really old and well-known, which I directly stated at the beginning of the article, not everyone is aware of its existence, so if you personally have everything said here without special need, this does not mean that someone else is will benefit from it. And I, as a user of the world wide web, will only be glad if sometime in the future I’ll see an indicator made using this recipe on one of the sites.

For it is convenient!