x
 
Артём
11 августа 2014

Как верстать модули с лентами?



«Лента» — разновидность текстового блока. Это список заголовков новостей, ссылок, рубрик или комментариев. Рассмотрим ленты без иллюстраций.

Обычная лента из ссылок с подписями:

Жизнь и удивительные приключения Робинзона Крузо

  • Заимствование аллитерирует стиль. Анализ состава 17 рукописных сборников, содержащих тексты стихотворных фацеций.

  • Генеративная поэтика основывается на парадоксальном совмещении исключающих друг друга принципов характерности и поэтичности.

  • Симулякр аннигилирует генезис свободного стиха, но языковая игра не приводит к активно-диалогическому пониманию.

  • Анализ состава 17 рукописных сборников позволяет сделать вывод о том, что механизм сочленений диссонирует стих.

Вместо подписей над ссылками могут стоять бирки:

Жизнь и удивительные приключения Робинзона Крузо

  • 1 мая

  • 8 марта

  • 23 февраля

  • 1 января

Журнал «Главбух»

Или сразу и бирки, и подписи:

Жизнь и удивительные приключения Робинзона Крузо

  • 1 мая

    Заимствование аллитерирует стиль. Анализ состава 17 рукописных сборников, содержащих тексты стихотворных фацеций.

  • 8 марта

    Генеративная поэтика основывается на парадоксальном совмещении исключающих друг друга принципов характерности и поэтичности.

  • 23 февраля

    Симулякр аннигилирует генезис свободного стиха, но языковая игра не приводит к активно-диалогическому пониманию.

  • 1 января

    Анализ состава 17 рукописных сборников позволяет сделать вывод о том, что механизм сочленений диссонирует стих.


Даты и время в качестве бирок информативны только при публикации в реальном времени, например в Твитере или в ленте информагентства. Если дата важна в контексте новости, лучше включить её в заголовок.

Текстовые подписи вызывают интерес к ссылкам и помогают их визуально отделить друг от друга, но ради компактности приносятся в жертву:

Жизнь и удивительные приключения Робинзона Крузо

Это хорошо смотрится в виджетах с однострочными ссылками:

Но если строк много, ссылки рискуют «слипнуться» в ленте, поэтому для читаемости и удобства прицеливания мышью обязательно дополнительно отделить их расстоянием:

Плохо

Жизнь и удивительные приключения Робинзона Крузо

Хорошо

Жизнь и удивительные приключения Робинзона Крузо

Иногда даже — дополнительными линейками:

Бирки могут «свешиваться» в отдельную колонку ленты:

Жизнь и удивительные приключения Робинзона Крузо

1 мая

8 мар

23 фев

1 янв

Но, как и при свешивании заголовков в обычных текстовых блоках, элементы строк начинают опасно взаимодействовать с соседними по вертикали. Это может потребовать дополнительных линеек и отступов:

Лента на сайте «Би-би-си»

Узкие вертикальные ленты находятся в окружении других модулей на странице, которые читатель рассматривает параллельно. Чтобы контекст не потерялся при прокрутке, лента должна по возможности умещаться по высоте в экран.

В отличие от страниц, которые целиком представляют собой широкую бесконечную ленту, чрезмерно узкие и высокие колонки очень утомительно прокручивать:

На сайте «Ю-Эс-Эй Тудей» такой дизайн оправдан тем, что ссылки сбоку играют роль генераторов спонтанного интереса при чтении основной колонки — дотошного изучения правой части окна не предполагается. А для главной страницы «Системы Кадры» в бюро предложили более компактный дизайн новостной колонки.

Ленте необязательно иметь вертикальную форму. Короткая лента может вытянуться в несколько колонок:

Жизнь и удивительные приключения Робинзона Крузо

1 мая

Заимствование аллитерирует стиль. Анализ состава 17 рукописных сборников, содержащих тексты стихотворных фацеций.

8 марта

Генеративная поэтика основывается на парадоксальном совмещении исключающих друг друга принципов характерности и поэтичности.

23 февраля

Симулякр аннигилирует генезис свободного стиха, но языковая игра не приводит к активно-диалогическому пониманию.



А. Лебедев. Новости на неновостных сайтах


Или даже занять колонками горизонтальный «этаж» на странице:

Жизнь и удивительные приключения Робинзона Крузо

7 ноября

Заимствование аллитерирует стиль. Анализ состава 17 рукописных сборников, содержащих тексты стихотворных фацеций.

9 мая

Генеративная поэтика основывается на парадоксальном совмещении исключающих друг друга принципов характерности и поэтичности.

1 мая

Анализ состава 17 рукописных сборников позволяет сделать вывод о том, что механизм сочленений диссонирует стих.

8 марта

Генеративная поэтика основывается на парадоксальном совмещении исключающих друг друга принципов характерности и поэтичности.

23 февраля

Симулякр аннигилирует генезис свободного стиха, но языковая игра не приводит к активно-диалогическому пониманию.

1 января

Анализ состава 17 рукописных сборников позволяет сделать вывод о том, что механизм сочленений диссонирует стих.



Если новостей в ленте слишком много, возникает соблазн спрятать их за кнопками листания. Но «карусель» — плохая идея.

Спецакции на сайте «КМ/Ч»

Чтобы сохранять прямоугольную форму многоколоночного модуля, его колонки должны иметь одинаковую высоту. Точное равенство колонок в вебе крайне сложно соблюсти, но необходимо позаботиться, чтобы каждая следующая колонка была не длиннее предыдущей. Для этого фиксируют количество элементов, вводят редакторские ограничения на длину заголовков и даже программно вычисляют физическую высоту текста по его объёму.

По мере усложнения структуры лента может быть разбита подзаголовками:

Жизнь и удивительные приключения Робинзона Крузо

В мире

В России

Политика

Жизнь



Рубрикатор в «Системе Главбух»

Колонки ленты могут контрастировать друг с другом оформлением ссылок. Как и для обычных текстовых блоков, мы рекомендуем последовательно уменьшать размеры, кегль и повышать дробность элементов — сверху вниз или по колонкам слева направо:

Жизнь и удивительные приключения Робинзона Крузо

Полифонический роман представляет

Заимствование аллитерирует стиль. Анализ состава 17 рукописных сборников, содержащих тексты стихотворных фацеций.

Откровенная семиотика управляет

Генеративная поэтика основывается на парадоксальном совмещении исключающих друг друга принципов характерности и поэтичности.

Голоса персонажей доставляют

Анализ состава 17 рукописных сборников позволяет сделать вывод о том, что механизм сочленений диссонирует стих.



Новости банка «Траст»

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

В бумажных газетах с суперплотной модульной вёрсткой высота колонок идеально равна.

Способы сокращения заголовков

P. S.

Это был понедельничный совет о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.


Поделиться
Отправить

Комментарии

Роман Петрейко
11 августа 2014

Если я на неновостном сайте всё-таки взялся за чтение новостей, то дата будет полезна для двух целей:
чтобы определить, смотрю я новости за 2014 год или за 2008;
чтобы привязать изменения к контексту во внешней среде (как пример — объявления организаций для клиентов в условиях российской экономики и политики первого полугодия 2014).

Поэтому хотелось бы видеть дату хотя бы на странице отдельной записи. Частота новостей при этом может составлять и одну новость в полгода.

Отдельно хотелось бы пожурить тех, кто в формате дат оставляет только месяц и число (что популярно в блогах). Потому что у меня, как посетителя, нет никакой уверенности, что передо мной не заметка двухлетней давности.

Саша Гречанный
11 августа 2014

Спасибо за дельный совет!

А как же быть, если в лентах есть иллюстрации? Для примера — Твитер, там у каждого элемента есть картинка, аватар автора.

Что случается с лентой, если её дополняют иллюстрациями?


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Как сделать крутой плакат, в котором сообщается о скидке на товар в новом дизайне? 4




Недавно всплыло

Это какие‑то другие пиксели? Как они соотносятся? 2 Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5 1 Как написать хорошее резюме? 7