CSS-десант. Sports.ru
«CSS-десант» — рубрика, где я при помощи сервиса пользовательских стилей Stylish подпиливаю разные популярные сайты под себя, рассуждая, почему кое-что на них неплохо бы изменить. Подробней о том, чем является «CSS-десант», а чем нет — в фейсбуке. В первом выпуске речь шла о Википедии.
Sports.ru — это такой бездонный мегакомбайн о спорте. Чтобы уместить на страницах всё изобилие информации и три тонны рекламы, сайт использует плотную газетную верстку и игнорирует излишние украшательства, поэтому стиль у Спортса довольно строгий и нейтральный (шрифт Roboto, черный текст на белом фоне — всё по классике). Сайту почти двадцать лет, и кое-где всё еще прослеживается наследие веба начала века. Например, намертво зафиксированная ширина макета, из-за чего попытка суперплотно упаковать материал выглядит комично, ведь даже на моих скромных 15 дюймах остается неиспользуемой треть ширины экрана.
Сразу договоримся: я включу адблок, чтобы не утомлять вас громадными банерами и не палить на весь интернет выдаваемую мне контекстную рекламу «Продажа грязного женского белья». В конце, когда буду подводить итоги, адблок обратно отключу, чтобы сравнение «до и после» вышло честным.
Если вы читали первый выпуск CSS-десанта про Википедию, вас не удивит мой первый шаг: увеличение масштаба страницы до 125%. Можно и до 150%, но несовершенства растянутой растровой графики становятся слишком заметными.
После этого сразу беремся за черную шапку сайта.
Уже здесь видны первые симптомы недуга, которым страдает Спортс: неконтролируемое и необоснованное желание вставить между всеми элементами разделительную линию, горизонтальную или вертикальную — как получится. Газеты часто используют линейки для отделения друг от друга единиц информации в условиях ограниченной площади газетного листа, но тут в линейках нет никакого толка. И без бледной вертикальной полоски люди поймут, что белое яблочко и зеленый робот — отдельные объекты (чтобы усилить это ощущение, было бы неплохо, чтобы они индивидуально реагировали на наведение курсора).
Честно говоря, за 9 лет пользования сайтом я никогда не пользовался ничем из представленного кроме нижнего меню и поиска. Следуя концепции рубрики «пилю сайт лично под себя», избавляюсь от лишнего.
После этого остается сделать поиск менее кричащим, выбрать для меню начертание шрифта чуть тоньше и увеличить межсимвольное расстояние в меню, уж слишком слипаются буквы.
Заодно тенюшкой отделяю от страницы выпадающее подменю, чтобы оно на своем визуальном слое было. Ну и горизонтальные линии выкинуть еще, да.
После этого надо разобраться со скверным блоком результатов, но трагедия в том, что средствами CSS победить его не получилось, слишком жестко он заверстан.
Всё, что мне удалось — снова избавиться от лишних линий, убрать ненужные мне названия ТВ-каналов и скрыть плюсы и минусы, обозначающие состояния аккордеон-блока (это вредный совет, делать это для всех пользователей, пожалуй, не стоит, но использовать аккордеон — вообще так себе решение).
В мобильной версии сайта этот блок скомпонован удачней, я бы попробовал с некоторыми модификациями прикрутить его и к полноценной версии.
После этой неудачи хочется решительно отыграться на следующем блоке — карточке заглавного материала.
Спортс немного помешан на лайкошерилках, делает их большими, яркими и вставляет при любом случае (еще столкнемся с ними дальше), но вторым недугом сайта назвать эту зацикленность нельзя — ребята занимаются бизнесом и привлекают читателей любыми способами. Не осуждаю, но лайкошерилки всё равно выкидываю, ни разу не воспользовался ими.
Полупрозрачная подложка под текстом своими отступами угнетает заголовок, делает его пресмыкающимся. Заголовок должен быть бодрым, смело гулять по фотографии, а не пригибать голову, пытаясь пролезть через оставленное дизайнером окно. Дарим ему свободу, увеличиваем кегль (и тоже берем начертание тоньше), выставляем левый флаг. Взамен приходится настелить градиентов и тенюшек, чтобы белый текст выживал на фотографии.
К счастью, бильдредактор уже в курсе, что левая часть фотообложки будет жить под текстом, и с умом кадрирует снимки.
Вроде живет. Переходим к основной сетке главной страницы, состоящей из трех колонок: новостей, материалов и статистики.
Сразу же делаю маленький, но победоносный шаг: включаю забледнение уже просмотренным новостям и материалам. Как долго мир этого ждал.
Меняю верстку новости: сейчас из-за добавления времени текст новости начинается не с начала строки. Если перекинуть время публикации к названию вида спорта, структура новости получается более сбитой.
От комментариев я избавился, кстати. Вообще на всем сайте, не только от отображения их количества в списке новостей. Хотя многие считают, что комментарии под новостями круче самих новостей, можно считать это следующим за выпилом лайкошерилок шагом к антисоциализации сайта. Извините.
Материалы в центральной колонке отбиваются друг от друга всё теми же горизонтальными линиями. Если их убрать, то фото потеряют связь со своими текстами и схлопнутся в отдельную фотоколонку. Перекидываю фотографии налево, чтобы сильнее привязать их к своему тексту. Теперь текст прилипает к фото каждой своей строчкой, а не пытается дотянуться до нее.
После этого еще немного меняю отступы, проворачиваю привычные манипуляции с заголовками (больше кегль, тоньше начертание), и в итоге материалы собраны лучше, без увеличения отступов между ними и использования разделительных линий.
Аналогичный трюк проворачивается и с блоком лучших публикаций из блогов.
Ну и уже на автопилоте отмываю остальные блоки на главной странице.
Покидаю главную страницу, внутри тела новости тоже много работы: нормально оформить таблицу и теги, выкинуть все лайкошерилки, рекомендации, комментарии и разделительные линии.
Забледнение и уменьшение тегов может показаться спорным решением, пока не заглянешь внутрь какой-нибудь крупной статьи:
Что еще? Ну, я выкинул всю рекламу, которая притворяется новостью или статьей. Грязный ход, Спортс.
Починил дырки в новостях и сделал ссылкам нормальный ховер (подчеркивать ссылки при ховере — это странно).
Кстати, по поводу выделения ссылок: наверняка многие возмутятся, что заголовки новостей и статей на главной не подчеркнуты и набраны еще нейтральным черным цветом, хотя на сайте под интерактивный текст зарезервирован синий цвет. То есть идеологически верно было бы сделать так:
Тут применима стандартная проверка «Понятно ли по внешнему виду объекта его назначение и поведение». У меня нет никаких сомнений и без перекрашивания в синий цвет, но если сайт новый и пользователи еще не притерлись к его оформлению, можно было бы и перекрасить, какие-то доли процента пользователей тогда тупили бы на долю секунды меньше. В целом этот выбор мне кажется больше идеологическим, чем практическим.
Еще растянул черную шапку сайта во всю ширину страницы и избавился от серых боковин.
И, конечно же, еще раз избавился от всех обводок и линий-разделялок, до которых дотянулся.
Пришло время взглянуть на результат — бесполосочный антисоциальный Спортс.
С рекламой:
Внутренняя страница:
В конце хочу немного поворчать по поводу нынешнего уровня работы с информацией, которой обладает сайт. В первую очередь это отвратительная инфографика Спортса, которая чаще всего выглядит как хаотичное облако цифр, присыпанных набором необъяснимых оформительских решений. Ноль Тафти из десяти. Даже не касаясь высоких материй инфоповествования, переверсткой можно сильно облегчить изучение инфы. И потом, когда информация перестает плясать, уже можно задуматься, какие закономерности хочется раскрыть, о чем информация должна рассказать.
Во-вторых, Спортс бездарно распоряжается огромными объемами статистической информации, которой обладает. Пестрящая табличка цветных шариков-результатов — это максимум информационной глубины, который получится найти на сайте.
Даже на суперскромном сайте valencianistas.ru мне удалось (супернескромно) простейшей интерактивной диаграммой раскрыть больше интересных закономерностей.
База статистики Спортса — это как коллекция шедевров, запертая в чулане частного коллекционера. Информация должна встретиться с ее ценителями, и тогда произойдет нечто прекрасное.
Смысл рубрики «CSS-десант» — в размышлениях о способе улучшения дизайна сайтов, а не составления каталога «скинов» и распространение сделанных стилей как продукта. Поэтому я хоть и публикую исходник стиля, но в форме as is, без какой-либо поддержки и обещаний работоспособности (наверняка что-то где-то поломалось от моих грубых вмешательств). Это не более, чем полуфабрикат этой записи.
Стиль на userstyles.org:
CSS-код отдельно:
Желающие не пропустить следующий выпуск рубрики могут, например, подписаться на меня хоть где угодно:в твиттере, фб, вк или прямо здесь на медиуме.
