Atau - mari kita bicara tentang desain
©
artemerschowSetelah
desain ulang dan merger berikutnya,
beberapa topik dibuka ditujukan untuk masalah portal yang diperbarui, heterogenitas artikel yang diposting di sana, sistem karma, dan banyak lagi. Dalam hal ini, saya ingin berbicara tentang pemikiran saya pada antarmuka Habr dan saya mengundang semua yang tertarik untuk membahas desainnya. Sebelum itu, saya menulis tentang ide-ide saya hanya di komentar, beberapa dari mereka diperhatikan oleh administrasi dan diterima, yang lain baik melewati perhatian pengembang, atau dianggap tidak relevan. Sekarang saya memutuskan untuk mengatur semua Wishlist saya (dan bukan hanya saya) dalam satu posting.
Masalah Satu - Tata Letak Tetap
Inilah yang terlihat Habr di monitor saya yang berfungsi
(tautan, agar tidak merobek utas dengan tangkapan layar 5K. Berat 1,6 Mb) .
Secara pribadi, saya tidak membacanya seperti itu, tetapi masalahnya masih ada: situs memiliki tata letak yang tetap dan banyak elemen yang tidak dapat dilepaskan di tepinya. Apakah perlu untuk selalu melihat dadu "Baca Sekarang" saat membaca artikel atau komentar? Mengapa tidak meletakkannya di atas (bersama dengan iklan) dan memberikannya bungkus sehingga ketika menggulir - teks artikel dan komentar akan meluas ke seluruh jendela browser, tanpa lekukan besar di kiri dan kanan? (Jangan menendang, jika semuanya rumit dengan mengalir di sekitar, saya bukan perancang tata letak yang nyata. Tapi itu berfungsi di VKontakte) Tidak perlu meregangkan peramban dari satu sisi ke sisi lainnya (walaupun banyak yang melakukannya, untuk kenyamanan atau sifat pekerjaan), tetapi semua Habr yang sama kadang-kadang terlihat hampir seperti pada screenshot pertama, menurut saya ini adalah penggunaan ruang yang sama sekali tidak rasional.
Seperti inilah bentuk Habr bagi saya, setelah memanipulasi dengan uBlock dan Stylish: halaman utamanya adalah
(sosis vertikal panjang dalam PNG, 1200 * 12500 piksel, 4 Mb) ; artikel -
(sosis vertikal yang lebih panjang di PNG, 1200 * 28000 piksel, 10 Mb) . Atau PDF:
2.7Mb dan
4.2Mb . (Ini agaknya dilakukan dengan liar, tetapi lebih jelas dan sederhana daripada meng-host halaman Habr yang diulang di suatu tempat. Maaf)
Saya meningkatkan lebar elemen dengan teks, mengaturnya sebagai persentase dan mendapat kesempatan untuk secara fleksibel menyesuaikan panjang baris dalam artikel dan komentar. Garis menjadi lebih panjang, komentar mulai memakan sedikit ruang dan menjadi jauh lebih nyaman untuk mengikuti diskusi di utas terpisah. Jika garis-garis dalam artikel menjadi terlalu panjang dan tidak nyaman, saya cukup mengurangi lebar jendela.
CSS untuk 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 ;)