Техническое: три с половиной колонки

Представляю пользовательские стили оформления сайта aftershock.news, которые я для себя использовал и постепенно дописывал 2-3 года, выкладывая результаты на сайте https://userstyles.org/styles/142209/aftershock-news-cleaning . Они помогают подстроить цвета, устранить просветы между строчками для кликов по ссылкам, скрыть блоки, лично не нужные, включая "шапку" сайта. Недавно дошёл до довольно важного и красивого нововведения — многоколоночного просмотра статей и комментариев. Если окно браузера широкое, то с помощью этих юзерстилей статья занимает 2, 3 или даже 4 колонки, что уменьшает количество прокруток при чтении статей и длинных верениц комментариев.

В связи с этим решил зарегистрироваться, чтобы посмотреть глазами залогиненного пользователя и подогнать стили и под этот формат страниц, чтобы стили могли быть полезны более широкому кругу активных читателей. И заодно написать презентацию стилей - ведь чем больше людей попробуют их установить, тем больше полезных советов сможем получить и что-то дополнительно улучшить. А может быть, часть наработок согласятся установить и хозяева сайта, например, при включении специальной настройки для зарегистрированных (раздел "Настройки расширенного текстового редактора"). И тогда не нужно стили отдельно устанавливать.

Почему же 3.5 колонки? Потому что правую колонку (сайдбар) можно рассматривать как половину обычной, а при стандартной ширине (1700-1900) окна получается как раз 3.5. Но если окно сузить, то будем иметь 2 колонки статьи или одну, или то же, но без сайдбара — в этом настройки сайта хорошо подыгрывают, стилями правый сайдбар скрывать не понадобилось. Если окно расширить полностью (кнопкой F11), получим и 4 с половиной при данных настройках стилей. А вот левый сайдбар уменьшен до 4-5 небольших кнопок (или двух для сайта m.aftershock) ради большой полезной площади для чтения.

Пока что не старался всё хорошо подогнать — например, видео с ютуба можно обеспечить шириной в 100% колонки, но сейчас при узких колонках допускаются вылезания видеоблоков по ширине. Ресурс богат больше текстами, поэтому к ним — особое внимание. А со временем и при желании пользователей можно будет настроить всё.

Оригинально и по-своему удобно получилось с текстами лент, разбитыми на 2-3 колонки. Сам по себе небольшой текст анонса (тизера), растягивается по горизонтали. И хотя значимая информация оказывается то в первой, то в первых двух колонках, читать всё равно удобнее, потому что заголовок и футер анонса (тизера) разделяются по горизонтали и меньше вмешиваются в текст.

Надо сказать об особенностях использования

Список доработок

• Более мягкие цвета.

Это всё — чисто вопросы вкусов, которые у людей разные. Но и просто из психологии восприятия можно объяснить, почему не нравятся непропорционально кричащие цвета и почему не нужны те блоки текстов и картинок, которые уже "приелись" при многократном просмотре, не несут скелета дизайна или информации.

• Нет шапки и логотипа.

Да, для первых посетителей это важно, но стили устанавливает тот, кто хорошо знает, на каком сайте находится. Поэтому логотип невидимый и с него слева вверху ведёт невидимая ссылка на главную. Туда кто-то ходит, но мне ни разу не понадобилось, кроме целей тестирования стилей.

• Левая колонка выведена во вкладки с едва заметными кнопками (по наведению мыши раскрываются).

Тоже, очень нечасто туда приходится ходить, но когда надо — всегда знаешь, что есть меню и оно всегда в окне. Да, новые статьи с Авантюры — неплохо, что попадаются на глаза, но гораздо чаще нужны пустующие в официальном дизайне поля просто под текст. А Авантюру — да, наверное, надо сделать заметнее и шире.

• Кнопка "Отзывы и предложения" скрывается у нижней кромки и едва заметна.

Но стала всегда на виду и расширяется по наведению мыши.

• Нумерация страниц прилеплена к низу окна, сквозь неё виден текст. По наведению становится заметнее.

Всегда интересно, много ли комментариев, и не стоит ли пойти дальше их посмотреть. Сейчас надо было докручивать до конца, чтобы просто узнать, есть ли другие страницы. Со стилями — видно сразу, и перейти можно, не прокручивая.

• Сайдбар справа — скрыты аватары, расставлены списки, приглушены цвета

Аватары, опять же по психологии — привлекают непропорциональное внимание, поэтому не могут быть равноправной информацией. Имена авторов — нужнее, но к ним нельзя добраться иначе, как через аватары. Они тоже появляются при наведении, как и имена.

Ещё, внутри стилей есть правила для скрывания примелькавшихся заголовков. Когда в лидерах просмотров неделями висят неинтересные строчки, их можно скрыть, но увы, прямой правкой кода стилей. При большом желании, это индивидуальное скрывание можно запустить с помощью юзерскриптов, но мне как одному пользователю, хватало прямой правки стилей.

• Уменьшенные аватары в комментариях, не мешающие смайлики (не ломающие строчки). Цитаты без огромных полей.
• Скрытие комментариев избранных авторов, которых всегда бесполезно читать.

Таких вписано два прямо в правила стилей (и 2 уже выпиленных). Лучше, конечно бы со скриптами это решить, тогда получилось бы не только затенение их, но и скрытие, но пока пусть так, чтобы юзерскрипты не поддерживать для такой незначительной задачи. По образцу желающие могут составить собственные стили для затенений, чтобы обновления этих стилей их не стирали.

• m.aftershock — имеет несколько другие стили и у него меньше блоков сайдбара изначально. Блоки сделаны прозрачными для эксперимента — неудобно, но и пользоваться приходится редко. С появлением сейчас таких же юзерстилей для основной версии сайта — скорее всего, не понадобится поддерживать. Но теоретически, полезно бы адаптировать под планшеты.
• Лайфхак — как переходить от верха колонок к низу и наоборот: выделяем кусочек текста с верха колонки, затем — Shift-Влево или Shift-Вправо. Бывает удобнее, чем искать глазами для длинных статей.
• Лайфхак 2. Главное — не очень большие статьи и обсуждения могут полностью поместиться на 1-2 экрана, особенно если расширить его по F11 (Full Screen Mode).
• Лайфхак 3. Для просмотра картинок всегда удобно дополнительно установить расширение браузера, показывающее увеличенные картинки по наведению мыши. Для Firefox - имеется Imagus и подобные. Для Chrome - Imagus или ezLinkPreview или подобные.

История развития данных юзерстилей

Ещё раньше они были частью сборных стилей для ряда политических сайтов, которые очищали их от мусорной рекламы и продолжают с некоторым успехом делать это по сей день. Без особо серьёзной поддержки их сейчас. (Когда-то надоела реклама — решил порезать и какое-то время дописывал новые правила CSS.) Но по Афтершоку накопилось столько удобств, что выделил правила стилей для него отдельно, хотя продолжаю пользоваться сборными стилями для себя. Поэтому в первую очередь новые доработки появляются там.

Что можно ещё доработать

• Делать всё очень красиво и качественно — большого смысла нет, так как любые изменения основных стилей и наполнения сайта легко повредят допиливания. Если это войдёт в официальную версию сайта — готов допилить и помочь найти какие-то приемлемые с точки зрения дизайна решения.
• Стилями доработаны те детали, которые позволяются стилями. Они не всё могут. Скрывать список неинтересных авторов, строчки статей в сайдбаре — тут нужны уже юзерскрипты, а их писать и поддерживать несколько сложнее и неблагодарнее — времени уйдёт больше, сломаются не менее легко при эволюции сайта. Поэтому скриптов всячески избегаю, пока обхожусь.
• Улучшить дерево комментариев, чтобы быстро видеть, на какое сообщение ответили — тут больше дело скриптов, поэтому стилями эту тему трогать не пытаюсь.
• Для планшетов и смартфонов — сам не пользуюсь, но если найдутся желающие пройти этот квест по установке юзерстилей на 1 из 3 поддерживающих их мобильный браузер (Firefox, Dolphin и Yandex), доработаю в свободное время из интереса попробовать (увеличить кнопки, подогнать под разные размеры экранов, обеспечить корректное раскрытие меню).

Принимаю предложения и пожелания по поводу стилей (пусть не сразу, но мы никуда не спешим) или по поводу внедрения некоторых решений на сайт.

UPD: Чтобы быть правильно понятым, уточню. Большинство комментариев призывает не менять то, что и так работает. Я тоже строго придерживаюсь этого мнения. "Если работает - не трогай!". "Лучшее - враг хорошего". О доработке самого сайта предлагаю делать лишь в ключе, чтобы существовала настройка для авторизованных, которая включит другой режим отображения, а по умолчанию не надо ничего менять.

Второе по частоте возражение - разбивать комментарии на колонки - неудобно. Предлагаю в этом случае, если будет такой режим отображения на сайте, включать отдельно - для статьи и для комментариев. Более того, можно указать и желаемое количество колонок, но тут - как бы не переусложнить это всё. На любой из вариантов у меня план реализации есть. А пока что - можно оценить имеющийся рабочий вариант, установив юзерстиль по ссылке (подробности - под спойлером "Как установить юзерстили" в середине статьи).