А. Г. |
«Лента» — разновидность текстового блока. Это список заголовков новостей, ссылок, рубрик или комментариев. Рассмотрим ленты без иллюстраций. Обычная лента из ссылок с подписями:
Вместо подписей над ссылками могут стоять бирки:
Или сразу и бирки, и подписи:
|
||||||||||||||||||||||||
Даты и время в качестве бирок информативны только при публикации в реальном времени, например в Твитере или в ленте информагентства. Если дата важна в контексте новости, лучше включить её в заголовок. Текстовые подписи вызывают интерес к ссылкам и помогают их визуально отделить друг от друга, но ради компактности приносятся в жертву:
Это хорошо смотрится в виджетах с однострочными ссылками: Но если строк много, ссылки рискуют «слипнуться» в ленте, поэтому для читаемости и удобства прицеливания мышью обязательно дополнительно отделить их расстоянием:
Иногда даже — дополнительными линейками: Бирки могут «свешиваться» в отдельную колонку ленты:
Но, как и при свешивании заголовков в обычных текстовых блоках, элементы строк начинают опасно взаимодействовать с соседними по вертикали. Это может потребовать дополнительных линеек и отступов: Узкие вертикальные ленты находятся в окружении других модулей на странице, которые читатель рассматривает параллельно. Чтобы контекст не потерялся при прокрутке, лента должна по возможности умещаться по высоте в экран. В отличие от страниц, которые целиком представляют собой широкую бесконечную ленту, чрезмерно узкие и высокие колонки очень утомительно прокручивать: На сайте « Ленте необязательно иметь вертикальную форму. Короткая лента может вытянуться в несколько колонок: Жизнь и удивительные приключения Робинзона Крузо
|
А. Лебедев. Новости на неновостных сайтах | ||||||||||||||||||||||||
Или даже занять колонками горизонтальный «этаж» на странице: Жизнь и удивительные приключения Робинзона Крузо
|
Если новостей в ленте слишком много, возникает соблазн спрятать их за кнопками листания. Но «карусель» — плохая идея. Спецакции на сайте « |
||||||||||||||||||||||||
Чтобы сохранять прямоугольную форму многоколоночного модуля, его колонки должны иметь одинаковую высоту. Точное равенство колонок в вебе крайне сложно соблюсти, но необходимо позаботиться, чтобы каждая следующая колонка была не длиннее предыдущей. Для этого фиксируют количество элементов, вводят редакторские ограничения на длину заголовков и даже программно вычисляют физическую высоту текста по его объёму. По мере усложнения структуры лента может быть разбита подзаголовками:
Жизнь и удивительные приключения Робинзона Крузо
Колонки ленты могут контрастировать друг с другом оформлением ссылок. Как и для обычных текстовых блоков, мы рекомендуем последовательно уменьшать размеры, кегль и повышать дробность элементов — сверху вниз или по колонкам слева направо: Жизнь и удивительные приключения Робинзона Крузо
По правилу якорных объектов мелкое притягивается к крупному, второстепенное к главному, а не наоборот. Правильный порядок внутри блока поможет сохранить его визуальную цельность рядом с соседними на странице. |
В бумажных газетах с суперплотной модульной вёрсткой высота колонок идеально равна. |
P. S. |
Это был понедельничный совет о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы. |