Something is still wrong with the return to Khabr

Or - let's talk about the design of


 
 
Something is still wrong with the return to Khabr  
© artemerschow
 
 
On the wave of the next redesign and merge , was discovered. several topic , devoted to the problems of the updated portal, the heterogeneity of the articles placed on it, the karmic system and so on. In this I want to talk about my thoughts on the interface of the Hubr and invite all interested to discuss its design. Before that, I wrote about my ideas only in the comments, some of them were noticed by the administration and accepted, others or passed by the developers' attention, or were considered not relevant. Now I decided to formalize all my (and not only my) Wishlist with one post. (reference, so as not to tear the screen with a screenshot 5K.) Weight ?6 Mb) .
 
Personally, I do not read it that way, but the problem still exists: the site has a fixed layout and a lot of non-disconnected elements at the edges. Do I need to constantly read the "Read now" while reading an article or comments? Why not place it on top (along with the advertisement) and assign it a wrap around so that when scrolling - the text of the article and comments expand to the entire browser window, without huge indentations left and right? (Do not kick if everything is complicated with the flow, I'm not a verst maker.) But it does work on VKontakte.) It is not necessary to stretch the browser from one end to the other (although many do so from the convenience or the nature of the work), but still the Habr sometimes looks almost like on the first screenshot, in my opinion this is a completely irrational use of space.
 
 
This is how the Habr looks from me, after manipulations with uBlock and Stylish: main page - (long vertical sausage in PNG, 1200 *
? 12500
? pixels, 4 Mb)
; article - (even longer vertical sausage in PNG, 1200 * ?
? 28000
? [/i] pixels, 10 Mb)
. Or PDF: 2.7Mb and 4.2Mb . (It's pretty wildly done, but it's clearer and simpler than hosting the redrawn pages of the Habr.) Sorry
 
 
I increased the width of the element with the text, set it as a percentage, and was able to flexibly adjust the length of the lines in the articles and comments. The lines became longer, comments began to take up less space and it became much more convenient to follow the discussion in a separate branch. If the lines in the article become too long and uncomfortable, I just reduce the width of the window.
 
CSS for Stylish [/b]
.post__body_crop> .post__text-html> img {
max-width: 20%;
}
.megapost-cover__img {
max-width: 20%;
}
.post__body_crop> .post__text-html> .oembed {
max-width: 20%;
}
.post__body_crop> .post__text-html> *> img {
max-width: 20%;
}
.layout__cell {
max-width: 100%;
}
.content_left {
padding-right: 10px;
}
.post__body_crop> .post__text-html {
width: 100%;
}
.post_full {
width: 100%;
}
.comments-section {
width: 100%;
}
.comment__message_downgrade-5 {
height: 20px;
}
.post__body_full> *> img {
max-width: 50%;
max-height: 50%;
}
.post__body_full> *> *> img {
max-width: 50%;
max-height: 50%;
}
.oembed {
max-width: 50%;
max-height: 50%;
}
.layout__cell {
margin-left: 10px;
}
.post__body_crop> .post__text-html {
max-height: 250px;
}

 
Styles are a little crutches, but it was the fastest and it works :) About the sizes of pictures - I will tell below.
 
 

The second problem is the huge cellar


 
In browsers there are not many ways to instantly get to the right place of the page, the simplest and most obvious ones are the transition to the very bottom and to the very top, it's done by iron buttons that pierced the consciousness with the End and Home buttons. Standard navigation of sites where the content is placed page by line - a bar with page numbers located at the very top or at the bottom, it is always easily accessible in one click on the above buttons. But what do I see, descending to the very bottom of the Hubra? 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, you can not: (
 
 

The third problem is subscription management


 
Alas, it can not be solved through Stylish, because it concerns the location of the subscription control elements for the publication. Sometimes you need to unsubscribe from the topic, or see the author's data, but for this you need to find a panel that is located in an absolutely random place on the page. That is - the place is not accidental, it is between the article and the comments, but "You can not just take this and go to this panel" ©, because the article can be any length, and comments are even more so. Because we have to scroll, and scroll, and scroll
 
 
This panel is needed because any of your comments automatically signs you on the topic and includes it in the tracker . Often, I do not want to track absolutely all the comments in the topic, which may not be interesting at all, but just want to see the answer to the question that you asked someone from the users. This notification comes to the post office and it is very convenient. But, every time you answer in the branch you are interested in - the theme appears again in the tracker. We must either kill it from there, or look for this panel under the article and shoot there daws. Very uncomfortable. If it's difficult to change the subscription algorithm for the topic, at least move or duplicate these daws into a quickly accessible place on the page, as it was done with the article editing button that was in the same "never".
 
 

The fourth problem is the lack of templates for the design of articles


 
Alas, the main page looks very sloppy and heterogeneous. Announcements of articles are made tyap-bloop, who in that much, KDPV absolutely arbitrary sizes, text and even more so. When I, with 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 does not burst with huge pictures, huge chunks of text and so on.
 
 
"Firstly - it's beautiful" ©
 
The site looks neater and more attractive, navigation is simplified. At me it is all made on-fast and on kolenke, from a heap of crutches, but it works. Why not make compulsorily a strict design for the publication tape, so that when writing an article, the publication announcement would consist not of pictures and text, arbitrary sizes, plastered into an arbitrary markup tag (I counted about half a dozen different variants), from the bald cut off by the cat from the main content, but 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 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 an article developed by a professional will greatly improve the appearance of the site.
 
 
In addition, it was very convenient, when the pictures in the article do not stretch the full width of the window, but occupy about 50% of its width. If the picture makes sense to consider larger - it is necessary to make its full-size clickable version. It would be great if Habastoraj had a function not just for storing pictures, but could automatically reseect them: for the announcement of the article, for the full article and the clickable full-size version, two or three links at once, at the user's choice. In addition, it is easier to make such a simple layout adaptive without creating a separate mobile version of the site (although you are already testing its update, but whether it is not enough).
 
 

The fifth problem is the rapid movement of the tape


 
The fast-paced news flow moves the tape too fast, especially after the merger of Habr and GT (and earlier MM too). It seems to me - short notes should be started up in a completely separate stream. Such a decision will be to the liking of many fans of a separate Habr, who are used to the fact that technical posts are not diluted with a lot of news about IT laws and so on. To do this, you can select a small block located either from the side, or like a promo with fresh questions toaster, or like a block in the basement with the "Readable". In this block the news will be displayed as compactly as possible, in one and a half lines, only with headings and small figures of the counters. News can be opened with a separate tape by clicking on the header of the block, then they will look like an ordinary tape, with KDPV and a small announcement before the kata. Approximately so it is done at Varlamov, but his site without a thorough vivisection of uBlock is absolutely impossible to watch. Perhaps, for this purpose it is necessary to reconsider the criteria for posting publications in the Novosti hub and similar short notes.
 
 
Next, I will compile a few sentences, voiced not only by me, in other similar topics:
 
 
Sort publications not only by their rating, but also by the number of favorites. It seems to me that this is a more objective parameter, determining how much the article seemed useful, and not just successfully entered the mood. Most articles have few bookmarks, ones and dozens, they are often postponed "read for later". And some articles are scooped up by hundreds or even thousands of people, this indicates that the article is not just curious, but it seemed to many to be worthy to keep it in the elite and sometimes come back.
 
Quite often there is a problem of "burning out" new comments ", if the page in the browser is accidentally updated or not downloaded, most often it happens on mobile devices and achieves weak mobile Internet. Sometimes it's not very frustrating, but if you closely follow a certain topic and do not want to miss a single comment, then in topics with hundreds of comments - THIS IS BELIEVE !!!! 1111 this is a catastrophe! New, but "burned" comments can not be found It would be nice to get the option to enable and disable the option in which the counter of new comments and their highlighting generally never Not reset when the page is updated. , until the user himself presses the comment update button.
 
On Habr more than once published scripts in order to fold-unfold individual branches of comments. It would be nice to have such a possibility in the staff engine and that the site should remember the state of the branch. To the next page refresh, do not squander the endless karma or the political thing that you once turned off. I'm not sure that they will work on the updated design after the merger and therefore did not seek them.
 
One of the effects of my style for Stylish is to reduce the height of highly jammed comments to one line. As it turned out - it is much more convenient to "blanching", and I have never regretted that I did not read such a comment in full. It is not necessary to delete such a comment as I have done (it's just CSS), but you can automatically collapse it under the cut. In addition, it can slightly reduce the merging of karma for unsuccessful comments.
 
Not so long ago, I repaired the parsing engine of the site links in the comments, now I want more. It would be very cool if the parser automatically recognized links to Hub's articles and comments, converting them into headings of articles and headers with the author's nickname of the comment.
 
Because of the reverse merging of several sites into one - there was a problem of too rapid movement of the tape and much more articles per day. This greatly complicates the choice of interesting articles from the tape. Now, if Habr was not an ordinary search for tags, but an expert system recommending articles on interests. For example, such as Goodreads . This site analyzes the books read, their assessments and forms recommendations for further reading. And, it really works! Surprisingly accurate and good. Articles are simpler and shorter than books, statistics from the tracker, comments and voices can be collected no less, it would be interesting to read only those articles that you are guaranteed to be interesting.
 
Habr is more like social network, there is an opportunity to add users "to friends" and monitor their activity. But when subscribing to a user, not only his articles appear in the tracker, but also those he noted from other authors. It's very uncomfortable, it's good to split it into two trackers.
 
If a person writes many articles and actively communicates in the comments, he is often written in private. Sometimes it results in a long and interesting communication, more often it is a quick and short "question-answer". In this case, it becomes an urgent necessity - search in messages, as well as adding separate dialogs and messages to favorites. To an interesting answer to the question, a link to the site and m, not lost among the many short dialogues.
 
 
I hope that users will express or remember yet another interesting idea, the post will be constantly supplemented from the comments. On errors and typos - please write in a personal.
 
 
* .ps - vector "tangle" . Suddenly they change their mind and return?
+ 0 -

Add comment