Geekly articles weekly

Quelque chose ne va toujours pas avec le retour à Habr

Ou - parlons de design



© artemerschow

À la suite de la prochaine refonte et fusion , plusieurs sujets ont été ouverts consacrés aux problèmes du portail mis à jour, à l'hétérogénéité des articles publiés sur celui-ci, au système karmique, etc. En cela, je veux parler de mes réflexions sur l'interface Habr et j'invite toutes les personnes intéressées à discuter de sa conception. Avant cela, je n'ai écrit mes idées que dans les commentaires, certaines ont été remarquées par l'administration et acceptées, d'autres ont soit attiré l'attention des développeurs, soit ont été jugées non pertinentes. Maintenant, j'ai décidé d'organiser toute ma (et pas seulement ma) liste de souhaits en un seul article.

Problème 1 - Disposition fixe


Voilà à quoi ressemble Habr sur mon moniteur de travail (lien, pour ne pas déchirer le fil avec une capture d'écran 5K. Poids 1,6 Mo) .

Personnellement, je ne le lis pas comme ça, mais le problème est toujours présent: le site a une mise en page fixe et de nombreux éléments non déconnectables sur les bords. Est-il nécessaire de voir constamment les dés «Lire maintenant» lors de la lecture d'un article ou de commentaires? Pourquoi ne pas le placer sur le dessus (avec la publicité) et lui attribuer un habillage de sorte que lors du défilement - le texte de l'article et des commentaires s'étendrait à toute la fenêtre du navigateur, sans énormes retraits à gauche et à droite? (Ne donnez pas un coup de pied, si tout est compliqué avec la circulation, je ne suis pas un vrai concepteur de mise en page. Mais cela fonctionne sur VKontakte) Il n'est pas nécessaire d'étirer le navigateur d'un bord à l'autre (bien que beaucoup le fassent en raison de la commodité ou de la nature du travail), mais de toute façon Habr ressemble parfois presque à dans la première capture d'écran, à mon avis, c'est une utilisation complètement irrationnelle de l'espace.

Voici à quoi ressemble Habr pour moi, après avoir manipulé avec uBlock et Stylish: la page principale est (une longue saucisse verticale en PNG, 1200 * 12500 pixels, 4 Mo) ; article - (une saucisse verticale encore plus longue en PNG, 1200 * 28000 pixels, 10 Mo) . Ou PDF: 2,7 Mo et 4,2 Mo. (C'est assez extravagant, mais c'est clair et plus simple que d'héberger les pages refaites de Habr quelque part. Désolé)

J'ai augmenté la largeur de l'élément avec le texte, je l'ai défini en pourcentage et j'ai eu la possibilité d'ajuster de manière flexible la longueur des lignes dans les articles et les commentaires. Les lignes sont devenues plus longues, les commentaires ont commencé à prendre moins de place et il est devenu beaucoup plus pratique de suivre la discussion dans un fil distinct. Si les lignes de l'article deviennent trop longues et inconfortables, je réduis simplement la largeur de la fenêtre.

CSS pour élégant
.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/fr416081/

More articles:


All Articles