Ou - vamos falar sobre design
©
artemerschowApós o próximo
redesenho e fusão ,
foram abertos vários tópicos dedicados aos problemas do portal atualizado, à heterogeneidade dos artigos publicados nele, ao sistema cármico e muito mais. Nisto, quero falar sobre meus pensamentos sobre a interface Habr e convido todos os interessados a discutir seu design. Antes disso, escrevi sobre minhas idéias apenas nos comentários, algumas foram notadas pela administração e aceitas, outras passaram a atenção dos desenvolvedores ou foram consideradas não relevantes. Agora decidi organizar todas as minhas (e não apenas minhas) listas de desejos em um post.
Problema Um - Layout Fixo
É assim que Habr se parece no meu monitor de trabalho
(link, para não rasgar o fio com uma captura de tela de 5 K. Peso 1,6 Mb) .
Pessoalmente, não leio assim, mas o problema ainda está presente: o site tem um layout fixo e muitos elementos não desconectáveis nas bordas. É necessário ver constantemente os dados "Ler agora" enquanto lê um artigo ou comentários? Por que não colocá-lo no topo (junto com o anúncio) e atribuir um envoltório para que, ao rolar - o texto do artigo e dos comentários se expandisse para toda a janela do navegador, sem grandes recuos à esquerda e à direita? (Não chute, se tudo é complicado em fluir, eu não sou um designer de layout real. Mas funciona no VKontakte) Não é necessário esticar o navegador de uma extremidade à outra (embora muitos o façam, pela conveniência ou natureza do trabalho), mas às vezes o mesmo Habr parece quase como na primeira captura de tela, na minha opinião, esse é um uso completamente irracional do espaço.
É assim que Habr se parece comigo, depois de manipular com o uBlock e Stylish: a página principal é
(uma salsicha vertical longa em PNG, 1200 * 12500 pixels, 4 Mb) ; article -
(uma lingüiça vertical ainda mais longa em PNG, 1200 * 28000 pixels, 10 Mb) . Ou PDF:
2.7Mb e
4.2Mb . (É bastante descontrolado, mas é mais claro e mais simples do que hospedar as páginas refeito de Habr em algum lugar. Desculpe)
Aumentei a largura do elemento com o texto, defini-o como uma porcentagem e tive a oportunidade de ajustar com flexibilidade o comprimento das linhas em artigos e comentários. As linhas ficaram mais longas, os comentários começaram a ocupar menos espaço e ficou muito mais conveniente acompanhar a discussão em um tópico separado. Se as linhas do artigo ficarem muito longas e desconfortáveis, simplesmente reduzo a largura da janela.
CSS para 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 ;)