Web Tricks: New Posts Indicator

    image

    In the continuation of the “Web Tricks” series, in which I share some of the webmaster experience gained over more than five years of supporting and developing the author’s project “English Without Fools,” today I’ll talk about a relatively simple and very effective solution that allows you to quickly inform website visitors about new content, whether it's freshly published articles, blog posts, comments, or forum posts.

    As you can guess, to implement such a mechanism, we will need something like a through feed of messages of different types, and the specific solution will largely depend on the capabilities of the engine you use. However, even if your engine does not allow you to achieve the desired result with little blood, just try to understand the idea, and then screwing the indicator described here to any cash receipt stream will not be difficult for you.

    So, imagine that we have a page with an address relative to the root, say, / latest / , which displays some new materials in reverse chronological order. For simplicity of presentation, we assume that all entries are of the same type, and they can be displayed in the form of a brief announcement - well, approximately as we have on Habré.

    I must say that the presence of such a page in itself significantly improves the quality of navigation, and, alas, not all websites can boast of such a chip. But suppose we have harnessed our mental, temporary and / or financial resources, and acquired a revenue stream. And right away everyone felt good!

    Now, regular visitors can not climb 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 site moderators the convenience of such a tape is simply hard to overestimate!

    To provide access to the tape in one click from any navigational depths, it is convenient to provide the appropriate link in the site template by placing it somewhere in a conspicuous place. We write:

    Новые сообщения

    Along the way, we notice that the link is assigned a certain class name (in this case, “latest”), which will allow us to easily further 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 there is one small inconvenience: we can’t say if there is really anything new at the address of the tape, and there’s no other way to satisfy our curiosity at once to poke into the provided link, as if in general, we don’t.

    But if you think about it? Is there any simple solution here? Looking ahead, I’ll say: yes! There is a solution, and just as simple and elegant as the ancient one: with its help, webmasters of the 90s supplied their message boards with indicators of new arrivals at a time when no sophisticated engines were in sight.

    The idea is to use a browser property 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 page address :

    Новые сообщения

    As the value of the shank, you can use the ID of the last post, its time stamp, 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, in his next visit to the site, will see his favorite link in the form in which we put it using CSS - for example, highlight in red: As you know, our ability to design the indicator is limited only by our imagination. Nothing prevents us from using font settings, 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 am for the income stream in my English without fools

    a.latest:link {
    color: red;
    }

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




    I ’m using this flashing ball: but, of course, you can make it all to your taste. The code for this design might look something like this: That's all. An experienced webmaster frowns in this place and says, they say, a kindergarten. Do not rush to judge, dear. Despite the fact that this method is really old and well-known, which I directly stated at the beginning of the article, not everyone knows about its existence, so if you personally said everything here without any special need, this does not mean that someone else doesn’t will benefit from this. And I, as a user of the global Internet, will be only glad if someday in the future I see an indicator made according to this recipe on one of the sites. For convenient!

    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;
    }





    Also popular now: