Or - let's talk about design
©
artemerschowIn the wake of the next
redesign and merger ,
several topics were opened on the issues of the updated portal, the heterogeneity of the 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 that 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 clearly 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.
CSS for Stylish.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;
}
, :) — .
—
, — , End Home. , — , . , ? … “” “”, . , , . … :(
—
, Stylish, . , , , . — , , “ ” ©, , . , , …
, . , , , - . . , , — . , . . , , , “”.
!
—
, . -, , , . , , — , , , . , .
“- — ” ©
, . - , , . , , , , ( ), , , , , , , . , — , , — .
, , , 50% . — . , , : , , - , . , , ( , — ).
—
, ( ). — . , , . , , “”. , , . , , . , uBlock . , “” .
, , :
- , . , , , , . , , “ ”. , , , , .
- “” ”, , . , , —
!!!!1111 ! , “” … , , . - , - . . , , - . , .
- Stylish — . — “”, , . , ( CSS), . , .
- , . , , .
- - — . . , . , Goodreads. , . , ! . , , , , , .
- , “ ” . , , . , .
- , . , “-”. — , . , , .
, , . — .
*.ps -
«». ?..
,
. , — :)
deniskin — , , -;
buxley — ;
boomburum — ;
bionicman — ;
illo — -;
daleraliyorov — ;
karaboz — « »;
nomad_77 — «».
Deus Ex ;)