O, hablemos de diseño
©
artemerschowA raíz del próximo
rediseño y fusión ,
se abrieron varios temas dedicados a los problemas del portal actualizado, la heterogeneidad de los artículos publicados en él, el sistema kármico y más. En esto, quiero hablar sobre mis pensamientos sobre la interfaz de Habr e invito a todos los interesados a discutir su diseño. Antes de eso, escribí sobre mis ideas solo en los comentarios, algunos de ellos fueron notados por la administración y aceptados, otros pasaron la atención de los desarrolladores o se consideraron no relevantes. Ahora decidí organizar toda mi (y no solo mi) lista de deseos en una publicación.
Problema uno: diseño fijo
Así es como se ve Habr en mi monitor de trabajo
(enlace, para no romper el hilo con una captura de pantalla de 5K. Peso 1.6 Mb) .
Personalmente, no lo leo así, pero el problema sigue presente: el sitio tiene un diseño fijo y muchos elementos no desconectables alrededor de los bordes. ¿Es necesario ver constantemente los dados de "Leer ahora" mientras lee un artículo o comentarios? ¿Por qué no colocarlo en la parte superior (junto con el anuncio) y asignarle una envoltura para que, al desplazarse, el texto del artículo y los comentarios se expandan a toda la ventana del navegador, sin grandes sangrías a izquierda y derecha? (No patee, si todo es complicado con el flujo, no soy un diseñador de diseño real. Pero funciona en VKontakte) No es necesario estirar el navegador de un extremo a otro (aunque muchos lo hacen, por la conveniencia o la naturaleza del trabajo), pero a pesar de todo, Habr parece a veces casi como en la primera captura de pantalla, en mi opinión, este es un uso completamente irracional del espacio.
Así es para mí el Habr, después de manipularlo con uBlock y Stylish: la página principal es
(una salchicha vertical larga en PNG, 1200 * 12500 píxeles, 4 Mb) ; artículo -
(una salchicha vertical aún más larga en PNG, 1200 * 28000 píxeles, 10 Mb) . O PDF:
2.7Mb y
4.2Mb . (Está bastante descabellado, pero es claro y más simple que alojar las páginas renovadas de Habr en algún lugar. Lo siento)
Aumenté el ancho del elemento con el texto, lo configuré como un porcentaje y tuve la oportunidad de ajustar de manera flexible la longitud de las líneas en los artículos y comentarios. Las líneas se hicieron más largas, los comentarios comenzaron a ocupar menos espacio y se hizo mucho más conveniente seguir la discusión en un hilo separado. Si las líneas en el artículo se vuelven demasiado largas e incómodas, simplemente reduzco el ancho de la ventana.
CSS para con estilo.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 ;)