🧘🏻 😌 🚿 重返哈勃（Habr）仍然有些问题 🍘 🉑 🤒

或者-让我们谈谈设计

© artemerschow

在下一次重新设计和合并之后，打开了几个主题，专门讨论更新门户的问题，张贴在门户上的文章的异质性，业力系统等。在此，我想谈谈我对Habr界面的想法，并邀请所有感兴趣的人讨论其设计。在此之前，我仅在评论中写过我的想法，其中一些想法被主管部门注意到并被接受，其他想法则受到开发人员的注意，或者被认为不相关。现在，我决定将我的所有（而且不仅是我的）心愿单安排在一个帖子中。

问题一-固定布局

这就是Habr在我的工作监视器上的样子（链接，以便不使用5K屏幕截图撕裂线程。重量1.6 Mb）。

就我个人而言，我不是那样读的，但问题仍然存在：该网站的布局固定，并且边缘处有许多不可分离的元素。在阅读文章或评论时是否需要经常看到“立即阅读”骰子？为什么不将其放在广告的顶部（以及广告）并为其分配一个包裹，以便在滚动时-文章和注释的文本将扩展到整个浏览器窗口，而左右两侧没有大的凹痕？（不要踢，如果一切都很复杂，我不是一个真正的布局设计师。但是它可以在VKontakte上使用。）没有必要将浏览器从一个边缘扩展到另一个边缘（尽管很多这样做是因为工作的便利性或性质），但是无论如何，Habr有时看起来就像在第一个屏幕截图中，我认为这是对空间的完全不合理使用。

这就是Habr对我来说的样子，在使用uBlock和stylish之后：主页是（PNG长垂直香肠，1200 * 12500像素，4 Mb）；文章- （更长的PNG垂直香肠，1200 * 28000像素，10 Mb）。或PDF： 2.7Mb和4.2Mb 。（这相当疯狂，但是比在某个地方托管Habr的重做页面更清楚，更简单。抱歉）

我用文本增加了元素的宽度，将其设置为百分比，并有机会灵活地调整文章和评论中各行的长度。排队时间更长，评论开始占用更少的空间，并且在单独的话题中进行讨论变得更加方便。如果文章中的行变得太长且不舒服，我只需减小窗口的宽度即可。

时尚的CSS

.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 — ;
pas — ;
illo — -;
daleraliyorov — ;
karaboz — « »;
nomad_77 — «».

Deus Ex ;)

重返哈勃（Habr）仍然有些问题

或者-让我们谈谈设计

问题一-固定布局

—

—

—

—

More articles: