Дизайн для длинных статей

При разработке красивой «статьи» учитывалось множество соображений. В отличие, скажем, от домашней страницы, длинная статья не столько связана с дизайном интерфейса, сколько с разработкой текста таким образом, чтобы чтение было непринужденным и удобным.

Это связано с тем, что статьи имеют дело с длинным контентом, который, в свою очередь, имеет тенденцию оцениваться взаимодействием с пользователями «время на странице». Мы хотим, чтобы кто-то прочитал полное повествование. Между моментом, когда кто-то попадает на статью и читает все слова, существует естественный промежуток времени. И, надеюсь, это пространство достаточно иммерсивное, чтобы не только удерживать пользователя, но и провоцировать мысли, идеи и, возможно, действия. По крайней мере, я на это надеюсь, поскольку привлекаю ваше внимание, и вы просматриваете ту самую статью, которую читаете.

Есть баланс. С одной стороны, мы слышим, что «Никто не читает Интернет». С другой стороны, длинная статья требует пристального внимания. Учитывая текущую ценность контент-маркетинга и растущее нетерпение пользователей, ключевой задачей должно быть увлечение читателей как можно дольше. Давайте рассмотрим некоторые передовые методы и примеры невероятных страниц статей, чтобы получить лучшее представление о том, что делает визуально привлекательным чтение длинных статей (без ущерба для пользовательского опыта) и как мы можем воспроизвести эффекты.

Быстрые победы

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

• Увеличьте размер шрифта: Мы знаем, что 16px используется по умолчанию и отлично подходит для многих дизайнов, но более крупный размер шрифта привлекателен, поскольку подразумевает, что пользователь может свободно откинуться назад и устроиться без необходимости наклоняться вперед, когда экран находится перед его лицом, чтобы читать.
• Стремитесь к символам в строке: Очень немногие люди, которых я знаю, любят работать усерднее, чем нужно, и это касается и чтения. Вместо того, чтобы использовать всю ширину области просмотра, попробуйте сузить ее и сбалансировать с большим размером шрифта, чтобы получить меньше символов в каждой строке текста. Ваша наилучшая точка может варьироваться, хотя многие люди предлагают где-то между 45-75 символами в строке, чтобы помочь ограничить то, как далеко должен работать глаз читателя, чтобы двигаться слева направо. У Криса есть букмарклет для подсчета символов, но и у нас есть ch unit в CSS для получения предсказуемых результатов.
• Увеличьте высоту строки: Высота строки по умолчанию будет казаться разбитой. Забавно, но большее расстояние между строками (конечно, до определенного момента) требует меньше работы для глаз, что кажется противоположным совету по символам в строке, когда мы обычно хотим, чтобы глаза перемещались на более короткое расстояние. Высота линии между 1.2 и 1.5 кажется довольно типичным диапазоном для длинного контента.

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

Дизайн для дополнительной передышки

Возможно, вы привыкли к дизайну «вверху», где недвижимость является основным товаром. Это похоже на собственность на берегу моря в веб-мире, потому что именно здесь мы привыкли упаковывать ценные вещи, такие как баннеры с героями, призывы к действию и все остальное, что помогает продать вещь. Выше складки может быть очень похоже на плотный городской центр с интенсивным движением и высотными зданиями.

Статьи разные. Они позволяют немного растянуться. Если мы хотим продолжить аналогию с развитием города, статьи имеют достаточно площади, чтобы опираться на подход к дизайну «меньше значит больше». Вот что делает, казалось бы, небольшие варианты дизайна, такие как шрифт, такими важными для общего впечатления.

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

text-underline-position: under; это строка CSS, которая заставляет это работать. Естественно, text-decoration должно быть установлено что-то отличное от none (underline в этом случае тоже).

Пример выше также включает text-decoration-thickness, который изменяет толщину подчеркивания (и других типов линий). Вы можете использовать это свойство CSS, чтобы сопоставить толщину линии с размером и/или весом шрифта.

Вот полный пример:

a {
  text-decoration: underline;
  text-decoration-thickness: 2px;

  /* or */
  text-decoration: underline 2px;
  text-underline-position: under;
}

Но прежде чем вы достигнете text-decoration стенография, Шиме Видас несколько "подводных камней" когда дело доходит до его использования, которые стоит рассмотреть.

Переходим к содержанию

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

Лично я считаю, что буквицы мешают читабельности. Тем не менее, они могут быть хорошим способом «привести» читателя к основному контенту, и они не должны вызывать каких-либо серьезных проблем с доступностью, пока вы используете ::first-letter псевдоэлемент. Есть другой (старший) методы которые включают больше HTML и CSS, а также использование атрибутов ARIA, чтобы контент оставался доступным.

. ::first-letter, CSS будет выглядеть примерно так:

/* select the first letter of the first paragraph */
article > p:first-child::first-letter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

Конечно, было бы неплохо, если бы мы могли использовать initial-letter свойство, но в то время, когда я пишу это, у него практически нет поддержки. Если бы он у нас был, вся эта математика для размера шрифта и высоты строки была бы рассчитана за нас!

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

Перейти к основному содержанию

Программа чтения с экрана позволяет пользователям переходить к основному содержимому, если оно заключено в <main> элемент. Однако те, кто перемещается по веб-сайтам с помощью вкладок, не получают от этого пользы. Вместо этого мы должны создать якорную ссылку «перейти к основному содержанию». Эта ссылка обычно скрыта, но открывается, когда пользователь делает свою первую вкладку (т.е. показывает в фокусе).

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

<!-- anchor -->
<a id="skip-link" href="#main">Skip to main content</a>

<!-- target -->
<main class="main">
  <!-- main content -->
</main>

#skip-link {
  position: absolute; /* remove it from the flow */
  transform: translateX(-100%); /* move it off-screen so that it appears hidden but remains focusable */
}
#skip-link:focus {
  position: unset; /* insert it back into the flow */
  transform: unset; /* move it back onto the screen */
}

.main {
  scroll-margin: 1rem; /* adds breathing room above the scroll target */
}

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

Бесшовные визуальные эффекты

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

Однако важно знать, что изображения на самом деле вовсе не прозрачны, а представляют собой непрозрачные файлы JPEG с тем же цветом фона, что и содержимое. Я предполагаю, что размер изображений должен быть меньше по сравнению с PNG, которые поддерживают прозрачность.

Недостатком такой «подделки» прозрачного фона является то, что потребуются дополнительные хитрости (и техническое обслуживание) для поддержки темный режим пользовательского интерфейса если ваш сайт предлагает один. Если иллюстрации довольно плоские и простые, то SVG может быть подходящим вариантом, поскольку он небольшой, масштабируемый и способен сливаться с любым фоном, на котором он находится.

Но если вы вынуждены использовать растровые изображения и предпочитаете работать с файлами PNG для обеспечения прозрачности, вам следует изучить возможность использования адаптивные изображения и loading="lazy" атрибут для более быстрой загрузки.

Сосредоточьтесь на типе и семантике

У вас может быть очень мало слов КАК or в котором кто-то читает контент в Интернете в эти дни. Независимо от того, получает ли пользователь его в RSS-канале, получает ли он по электронной почте, видит ли он, скопировав и вставив его от коллеги, находит его на очищенном сайте или еще что-то, ваш контент может выглядеть различный чем вы предпочитаете. Вы могли бы создать то, что вы считаете самой великолепной статьей во всей стране, и пользователь все равно мог бы разбить эту кнопку режима чтения к вашему ужасу.

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

Но есть причины, по которым кому-то может понадобиться режим чтения. Во-первых, это как «не видеть никакого CSS». Под этим я подразумеваю Режим чтения Safari or Храбрый SpeedReader, которые используют машинное обучение для обнаружения статей. Нет извлечения или выполнения CSS, JavaScript или изображений, не относящихся к статьям, что повышает производительность, а также блокирует рекламу и отслеживание.

Такого рода «Грубый минимализм" фокусируется на содержании, а не на стилях. Таким образом, вы могли бы на самом деле хотеть чтобы использовать самоуверенные стили чтения браузера специально для этой цели.

Способ сделать это — не использовать CSS, а уделять больше внимания вашему HTML. Режимы чтения лучше всего работают с разметкой, использующей простой семантический HTML, связанный со статьей. Вы должны делать больше, чем просто шлепать теги вокруг статьи, чтобы получить максимальную отдачу от нее.

Возможно, вы просто обнаружите, что минималистичный дизайн, который делает упор на удобочитаемость, а не на гладкость, на самом деле является хорошей стратегией для использования в дизайне вашего сайта. Я настоятельно рекомендую прочитать сообщение Робина на «самый маленький CSS» для прочного чтения.

Сводка длинных статей!

Я поделился многим из того, что, по моему мнению, делает чтение подробных статей в Интернете более удобным. Но увидеть значит поверить, и я собрал кучу примеров, которые демонстрируют то, что мы рассмотрели.