Something is still wrong with the return to Habr

Or - let's talk about design

© artemerschow

In the wake of the next redesign and merger , several topics were opened on the updated portal, the diversity of articles posted on it, the karmic system and so on. In this, I want to talk about my thoughts on the Habr interface and invite all those interested to discuss its design. Before that, I wrote about my ideas only in comments, some of them were noticed by the administration and accepted, others either passed by the attention of the developers, or were considered irrelevant. Now I decided to issue all my (and not only my) Wishlist in one post.

Problem one - fixed layout

This is what Habr looks like on my desktop monitor (link, so as not to tear the thread with a 5K screenshot. Weight 1.6 Mb) .

Personally, I don’t read it this way, but the problem is still there: the site has a fixed layout and many non-disconnecting elements around the edges. Is it necessary, while reading an article or comments, to constantly see the “Read Now” tab? Why not place it on top (along with advertisements) and assign wrap to it so that when scrolling - the text of the article and comments expand to the entire browser window, without huge indents to the left and right? (Do not kick, if everything is difficult with wraparound, I’m not a real make-up man. But VKontakte it works) You don’t have to stretch the browser from one edge to another (although many do it from the convenience or the nature of the work), but still Habr sometimes looks almost like in the first screenshot, in my opinion this is a completely irrational use of space.

This is what Habr looks like for me, after manipulating uBlock and Stylish: the main page is (very long vertical sausage in PNG, 1200 * 12500 pixels, 4 Mb) ; article - (even longer vertical sausage in PNG, 1200 * 28000 pixels, 10 Mb) . Or PDF: 2,7Mb and 4.2Mb . (Pretty wildly done, but visually and easier than hosting somewhere converted Habr's pages. Sorry)

I increased the width of the element with the text, set it as a percentage and got the opportunity to flexibly adjust the length of lines in articles and comments. The lines became longer, comments began to occupy less space and it became much more convenient to follow the discussion in a separate thread. If the lines in the article become too long and inconvenient, I simply reduce the width of the window.


Styles are a little crutch, but it was the fastest and it works :) About the size of the pictures - I'll tell you below.

The second problem is a huge basement

In browsers there are few ways to instantly get to the right place on the page, the simplest and most obvious ones are to go to the very bottom and to the very top, this is done with the End and Home buttons that are sewn into the mind. Standard navigation of sites where content is placed page by page - the bar with the page numbers located at the very top or at the very bottom, it is always easily accessible in one click on the above buttons. But what do I see, dropping to the bottom of Habr? A block with sections of the site and ... two more hefty blocks of “Readable” and “Interesting”, no interface for paging. In order to see it, you need to go up the page. Guys ... well, so it is impossible: (

The third issue is subscription management.

Shortcuts will save everyone!

Problem Four - Lack of Article Design Templates

Alas, but the main page looks very sloppy and heterogeneous. Announcements of articles are made by anyway, who is in that much, KDPV completely arbitrary sizes, the text and even more so. When I, by the above styles, limited the size of the images and the height of the post in the tape - I realized how comfortable it is when everything looks the same, parallel and perpendicular. The tape is not torn by hefty pictures, huge chunks of text and so on.

“First is beautiful” ©
The site looks neater and more attractive, navigation is simplified. I have it all done in a quick way and on my knee, from a bunch of crutches, but it works. Why not make forcibly strict design for a tape of publications, so that when writing an article, the announcement of the publication did not consist of pictures and text, of arbitrary sizes, filled into an arbitrary markup tag (I counted about half a dozen different options), from the baldies cut off by the main content from the main content, and it was created through a special form, so that later its contents were placed in a specific place of the tape, with a picture of a predetermined size, with a certain number of lines in the text, and not as horrible, at the whim of the author of the publication. Let's be honest, not every author of the article is a designer, but a single standard for displaying the announcement of the article,

In addition, it turned out to be very convenient when the pictures in the article do not stretch across the entire width of the window, but occupy about 50% of its width. If it makes sense to consider a larger image, you need to make its full-size clickable version. It would be great if Habrastoraj had the function of not just storing pictures, but could automatically re-store them: for the announcement of the article, for the full article and the clickable full-size version, generating two or three links at once, at the user's choice. In addition, such a strict layout is easier to make adaptive without creating a separate mobile version of the site (although you are already testing its update, but it is not enough).

The fifth problem - the rapid movement of the tape

The early news flow moves the tape too quickly, especially after the merger of Habr and GT (and earlier MM also). It seems to me that short notes should be allowed in a completely separate stream. This solution will appeal to many lovers of a separate Habr, who are used to the fact that technical posts are not diluted with a lot of news about IT bills and so on. To do this, you can select a small block located either on the side, or like a promo with fresh Toaster questions, or something like a block in the basement with “Readables”. In this block, the news will be displayed as compactly as possible, in a line and a half, only with headlines and small numbers of countermen. News can be opened with a separate tape by clicking on the block header, then they will look like a regular tape, with CDRV and a small announcement before the kata. Something like this done at Varlamov, but his site without thorough vivisection of uBlock is absolutely impossible to watch. Maybe this will have to revise the criteria for posting publications in the hub of “News” and similar short notes.

Next, I will compile a few sentences, voiced not only by me, in other similar topics:

• To make the sorting of publications not only by their rating, but also by the number of bookmarks in favorites. It seems to me that this is a more objective parameter that determines how much the article seemed useful, and not just went well in the mood. Most articles have few bookmarks, units and dozens, they are often set aside “read for later”. And some articles take hundreds and even thousands of people to their favorites, which means that the article is not just curious, but it also seemed to many people worthy of keeping it in their favorites and sometimes returning.
• Often there is a problem of “burning” of new comments, if the page is accidentally updated or the page is not loaded in the browser, it most often occurs on mobile devices and is driven by weak mobile Internet. Sometimes it is not very frustrating, but if you are closely following a particular topic and you do not want to miss a single comment, then in topics with hundreds of comments - IT'S BRAZY !!!! 1111 is a disaster! New, but “burnt” comments are no longer to be found ... It would be nice to be able to turn on and off the option in the settings where the new comment counter and their highlighting would never be reset when the page is refreshed until the user clicks the update comment button.
• On Habré, scripts have been published more than once in order to fold and unfold individual comment threads. It would be nice to have such an opportunity in a regular engine and for the site to remember the state of the branch. So that when you next refresh the page, do not squander the endless karmylye or politotyu that you once turned. I'm not sure that they will work on the updated design after the merger and therefore did not look for them.
• One of the effects of my style for Stylish is to reduce the height of strongly mined comments to one line. As it turned out, this is much more convenient than “obscurity”, and I have never regretted that I had not read such a comment in full. It is not necessary to delete such a comment, as I have done (this is just CSS), but you can automatically fold it under the cat. In addition, this can slightly reduce the flow of karma for unsuccessful comments.
• Not so long ago, we fixed the parsing with the links site engine in the comments, now I want more. It would be very cool if the parser automatically recognized links to articles and Habr's comments, transforming them into article titles and titles with the comment author's nickname.
• Due to the reverse merger of several sites into one - there was a problem of too fast movement of the tape and much more articles per day. This makes it very difficult to select interesting articles from the feed. Now, if on Habré there was no ordinary search for tags, but an expert system recommending articles on interests. For example, such as on Goodreads . This site analyzes the read books, their evaluation and makes recommendations for further reading. Moreover, it really works! Amazingly accurate and good. Articles are simpler and shorter than books, statistics from the tracker, comments and votes can be typed no less, it would be interesting to read only those articles that you are guaranteed to be interested in.
• Habr is more and more like a social network, here you can add users as friends and monitor their activity. But when you subscribe to a user, not only his articles appear in the tracker, but also other authors noted by him. This is very inconvenient, it would be good to divide it into two trackers.
• If a person writes a lot of articles and actively communicates in comments, he is often written in private. Sometimes this results in a long and interesting communication, more often it is a quick and short “question-answer”. In this case, it becomes an urgent need - search in messages, as well as add individual dialogs and messages to your favorites. To an interesting answer to the question, the link to the site and TP, not lost among the many short dialogues.

I hope that users will express or recall more than one interesting idea, the post will be constantly supplemented by comments. Errors and typos - please write in a personal.

* .ps - vector "tangle" . Suddenly, they will change their mind and return? ..

I will add here the list of editorial staff taken from here . It's great that these guys joined the discussion and it would be nice to know who is who :)
deniskin is a project publisher who has just returned from a week's vacation and is full of energy to answer questions, but will soon leave for Zen-Friday;
buxley - technical director of the company;
boomburum - head of user department;
bionicman - system administrator;
illo - art director;
daleraliyorov - project manager;
karaboz - the main for "My Circle";
nomad_77 - the main for "Toaster".

Sisadmin Habra loves the first Deus Ex;)