Geekly articles weekly

Mit der RĂĽckkehr nach Habr stimmt noch etwas nicht

Oder - lassen Sie uns ĂĽber Design sprechen



© artemerschow

Im Zuge der nächsten Neugestaltung und Fusion wurden verschiedene Themen eröffnet, die sich mit den Problemen des aktualisierten Portals, der Heterogenität der darauf veröffentlichten Artikel, dem karmischen System und vielem mehr befassten. In diesem Artikel möchte ich über meine Gedanken zur Habr-Oberfläche sprechen und alle Interessierten einladen, über deren Design zu diskutieren. Vorher habe ich nur in den Kommentaren über meine Ideen geschrieben, einige wurden von der Verwaltung bemerkt und akzeptiert, andere haben entweder die Aufmerksamkeit der Entwickler auf sich gezogen oder wurden als nicht relevant angesehen. Jetzt habe ich beschlossen, alle meine (und nicht nur meine) Wunschliste in einem Beitrag zusammenzufassen.

Problem Eins - Festes Layout


So sieht Habr auf meinem Arbeitsmonitor aus (Link, um den Faden nicht mit einem 5K-Screenshot zu zerreiĂźen. Gewicht 1,6 MB) .

Persönlich lese ich es nicht so, aber das Problem ist immer noch vorhanden: Die Site hat ein festes Layout und viele nicht trennbare Elemente an den Rändern. Ist es notwendig, beim Lesen eines Artikels oder von Kommentaren ständig die Würfel „Jetzt lesen“ zu sehen? Warum platzieren Sie es nicht oben (zusammen mit der Werbung) und weisen ihm einen Zeilenumbruch zu, damit beim Scrollen der Text des Artikels und der Kommentare auf das gesamte Browserfenster ausgedehnt wird, ohne große Einrückungen links und rechts? (Nicht treten, wenn alles kompliziert ist, bin ich kein echter Layout-Designer. Aber es funktioniert auf VKontakte.) Es ist nicht notwendig, den Browser von einer Kante zur anderen zu strecken (obwohl viele dies aufgrund der Bequemlichkeit oder der Art der Arbeit tun), aber Habr sieht manchmal fast so aus Im ersten Screenshot ist dies meiner Meinung nach eine völlig irrationale Raumnutzung.

So sieht der Habr nach der Manipulation mit uBlock und Stylish für mich aus: Die Hauptseite ist (eine lange vertikale Wurst in PNG, 1200 * 12500 Pixel, 4 MB) ; Artikel - (eine noch längere vertikale Wurst in PNG, 1200 * 28000 Pixel, 10 Mb) . Oder PDF: 2,7 MB und 4,2 MB . (Es ist ziemlich wild gemacht, aber es ist klar und einfacher, als irgendwo Habrs überarbeitete Seiten zu hosten. Entschuldigung)

Ich habe die Breite des Elements mit dem Text vergrößert, als Prozentsatz festgelegt und die Möglichkeit erhalten, die Länge der Zeilen in Artikeln und Kommentaren flexibel anzupassen. Die Zeilen wurden länger, Kommentare nahmen weniger Platz ein und es wurde viel bequemer, die Diskussion in einem separaten Thread zu verfolgen. Wenn die Zeilen im Artikel zu lang und unangenehm werden, reduziere ich einfach die Breite des Fensters.

CSS fĂĽr 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 — ;
pas — ;
illo — -;
daleraliyorov — ;
karaboz — « »;
nomad_77 — «».

Deus Ex ;)

Source: https://habr.com/ru/post/de416081/

More articles:


All Articles