October 16, 2012 at 10:14

New HabrAjax Theme

    HabAjax - a script that has existed for about a year, does a lot of small and large work on the design of the site pages. Starting with approximately 20 page processing functions, it developed and gained new features. It is supported by 3 main browsers - Firefox, Opera, Chrome and has somewhat moved away from support for the 4th browser - Safari. Its main goal is to present pages more compact and with less graphic garbage - elements that can be dispensed with.

    Following some changes in the layout and content of the site, the next version of the user script was released (0.892). This time with a number of changes regarding appearance. There is already a standard theme and another, ZenComment, in the “compact” version. But then the idea arose to ennoble the combination of standard layout and the HabrAjax script to eliminate a lot of small design flaws that make up the overall impression of convenience. And it turned out that the standard theme is pretty much transformed, although this time without ZenComment styles. Many ZenComment style elements were copied to HabrAjax, and other CSS enhancements complement minor design inconsistencies.

    In close-up, the designer’s hand didn’t adhere to the styles, despite the fact that already more than 3 months ago the cry was thrown: “All to fight for design!” (There is a section on this on the official page of the script ). Therefore, perhaps the global design of the site will remain in some way affected. But in the joints of small details (elimination of graphic garbage, excessive protrusions, microscopic sizes of links, elephant buttons) there is progress. Elements that are added by scripts are processed with styles whenever possible.

    What happened is visible from the screenshots. If before 90% of readers liked the old design, then among their ranks a new (very similar to the old) design should gain a lot of fans. At the same time, more than 30 script functions are supported, to which new ones continue to be added.

    In the first screenshots: the entire tape:


    , question-answer


    , the beginning of the comments in the article:

    Here - relatively small application styles, the newest form of pure HabrAjax .

    For comparison, it’s with additional styles, a series of screenshots with the applied ZenComment styles .


    The latest changes, in 1-3 days


    Of the latest additions, you can list such.

    * in the left corner of the menu is now not uninformative "le [nta]", but the page load time and day of the week; the link leads to the same feed; the moment of reading a single page is located on the left of the site menu. There is the day of the week, while the days of the week for the dates “today” and “yesterday” are not indicated anywhere else (fight against informational garbage); the moment of reading articles on Ajax (uploading of articles) is shown at the bottom of the article in the panel for collapsing articles or comments;
    * input of image arguments: Ctrl + click on the button above the input field - with argument align = right, Shift + click - with argument align = left, Ctrl + Shift + click - with argument align = center;
    * air is released from the dates: from the clock you don’t need to know what they show “today”, from the yesterday’s date the word “yesterday” is enough, from the current year you don’t need to know what it is every time, but it’s useful to know the days of the week from old dates;
    * The headings of the questions are slightly reduced than the headings of the articles and are made oblique, so that in the general tape they can be easily distinguished from the articles and they do not occupy space;
    * giant headers have long been replaced by adaptive scripts - the longer the name, the smaller the font. But the small print starts to lose in readability if it is not contrasty. Improved heading contrast;
    * The names of the hubs are moved to the right, as in ZenComment, and are shortened (by setting); dates - there, because a line on a date is somehow very luxurious for a news feed; and hub names competing with article names are also out of place on the left side of the feed;
    * dates are duplicated in the signatures (info panels) - because it is useful to see the date both at the top and bottom of the annotation (and even more so, the full article), but in questions where there is no annotation, the dates above are removed, because there they interfere with the text of the question than in the info panel;
    * fewer words - more characters on the answer button. Numerous identical words tire on the site, where there is already a lot of substantial verbal information. It is better to see the words “2 answers”, and 2 checkmarks instead, but click not strictly on a word or sign, but on the area of ​​the entire answer button.
    * Not a link, but a button on comments on an article, highlighted button color. As for answers, switching to comments is better read if it also looks like a button. Well, and, of course, it’s more convenient not to aim at a couple of numbers, but to get into the larger button on which these numbers are written.
    * approximate dates based on the article number in the URL. Now you just need to mouse over the article link (including 3 random articles at the bottom of the page) to see the month and year of publication;
    * the same for questions and answers. Although the section exists for 2 years, it’s so convenient to see the date when a similar question was asked. And there is no official date for similar issues. Mouseover corrects this gap.

    Changes made a few days ago


    * “Similar posts” and “Similar answers” ​​blocks crawled to the new place that attracted attention - the button under the article, but above the comments. In September, this week 3 block was trying on officially at this place, but did not take root there. But during this time, a script was made that changes the block to a drop-down list, which seems successful - it does not take up space, it is not in the sidebar either, but it is always at hand for the only moment when you want to see similar article headings;
    * The title of all comments is highlighted in khaki, as in ZenComment; this helps to visually notice it when scrolling the page;
    * arrangement of buttons for entering tags in the input field and highlighting borrowed from ZenComent;
    * Languages ​​for the tag "source" are scattered on 2 buttons; all 216 colors are scattered on 3 buttons, 72 on each (not very good, but we'll see);
    * “Preview” and “Write” are placed at a certain distance, as in ZenComment;
    * Graphic garbage - underlining links in the sidebar. After all, there - all texts - links. With an unwavering hand, we retreat from the traditions of the official site; the same thing - in 3 links below
    * 5 types of flags on pure CSS: they allow you to flexibly adjust the sizes and colors and are made noticeably smaller than the basic site flags;
    * transparent "Next" buttons from ZenComment have been added to pure HabrAjax;
    * hiding redundant blocks on the right migrated from ZenComment and had the opportunity to choose script settings. For example, for those for whom the “Work” section is not relevant, they have the option to disable it;
    * processing of the representation of 3 links below - centering in height, unequal widths, depending on the volume of the text, soft design, approximate dates in the tips;
    * finally fixed panel at the top of some companies;
    * user menu - links are rearranged so that they do not jump when the menu is opened; removal of duplicate links during notification of messages and tracker; a click on the entire area of ​​the menu section performs an action (the area of ​​links is stretched without leaving dead areas);

    Changes in the last 1-2 months


    * All external links open in a NEW WINDOW ; as a sign of an external link - an up arrow after it; if there is no arrow, then this is a link to the site, which means that the tip has an approximate publication date;
    * the message about the event in the tape is minimized (if the setting is enabled) up to 2 letters - there is no block, no garbage, but by hovering over the line the title and date of the event are read;
    * footer glued to the bottom - changing the DOM so that the footer is stuck to the bottom of the window for short pages;

    A long-standing but characteristic change:
    * live links are a bit rearranged; because we don’t want to get to the commentator’s personal page, but want to read his comment: link - to comment. And by the name of the article we want to get to the article - link to the article;

    It has been written a lot, but it’s better to see it once and use it for 3 days to get an idea of ​​the amount of amenities.

    It would be nice to reduce the footer to 3 lines, as in ZenComment. But there are already so many borrowings ... This is in the plans.

    If the increased contrast of the headings still does not look good enough, or there is another comment on usability, please write constructively, especially with suggestions for improvement. So far, the vast majority of comments have been without suggestions, which did not prevent the author and some users from using the previous version of the script and styles for a year.

    In March of this year there was a survey about how many users the script had and on which browsers it was used. Using 60 answers as an example, the distribution pattern by browser is visible, and slightly by OS.pollservice.ru/p/dd12f28d55258167c83e/results

    If you used the script and want to take part in the survey, enter here: pollservice.ru/p/dd12f28d55258167c83e .

    UPD: I will immediately answer above: thanks for the criticism, but I would still need constructive proposals. In addition, the functionality is disabled - in the screenshots they are simply demonstrated in the usual and conceived form. I use these functions constantly and they are introduced consciously - each element performs its role. Much has been described in the innovations, part has already existed for a long time, about a year.
    Tags:

    Also popular now: