Статья написана в рамках статейного конкурса и .
Я занимаюсь написанием контента для агентства веб-дизайна. Это не первый для меня опыт создания текстового контента, в прошлом я работал техническим писателем в сфере автоматизированного документооборота системы здравоохранения США. Именно этот опыт дал мне представление о форматировании текста и верстке, адаптации к восприятию и о том, как сделать контент или документ визуально приятным.
Относительная предметная длительность (ОПД)
Относительная предметная длительность или relative subject duration (термин Czerwinski, Horvitz, Cutrell, 2001) – это период концентрации внимания пользователя во время выполнения задачи. В нашем случае – во время чтения.
Кевина Ларсона из Microsoft и Росалинд Пикард из MIT показал, что хорошая верстка может улучшить настроение во время чтения.
Если задание (чтение) остается прежним, улучшение эстетического вида текста увеличивает ОПД, а значит, вовлекает пользователя в контент сильнее.
Положительная реакция на контент при наличии хорошей верстки сравнима с просмотром смешного видео. Таким образом эстетическое восприятие текстового контента можно измерить, а значит, и усилить при помощи верстки.
Немного истории дизайна текста
Письменность – это универсальный графический язык, единственный способ передачи информации в органическом изначальном виде сквозь тысячелетия.
С давних времен посредством текста люди стремились передавать информацию о себе. Начертание пиктограмм, которое в отличие от живописи раскрывает свое значение в контексте и окружении, стало прародителем современного текста.
Табличка из шумерского города Киш – переходный этап между пиктографией и письменным текстом. 3500 г. до н.э.
Пиктографию сменило иероглифическое письмо Древнего Египта. Иероглифы стали сочетать в себе идеограммы, слоговое и фонетическое значение, текст стал гибким и модальным. Причем существовало 2 вида текстов – церемониальные в виде графических иероглифов с детализацией и эстетикой и упрощенная скоропись – иератика.
Один и тот же текст, написанный в египетской иероглифике и иератике, соответственно.
На другом конце света инкская цивилизация использовала узелковую текстовую кодировку – кипу, не расшифрованную до конца и поныне. Известно, что цвета применялись для обозначения классов объектов, создавались смешения цветов и последовательные серии. Длина нитей, количество. Расположение и виды узлов образовывали повествовательные, а также арифметические, топографические и календарные тексты.
Пример узелкового письма кипу. 3000 г. до н. э.
Шумерская клинопись стала первым фонетическим письмом. Методом клинописи, таким образом, стали записываться художественные произведения, например, «Эпос о Гильгамеше». Переход к системе «символ-звук» положил основу дальнейшему развитию текста.
Призма Вельда-Бланделла – клинописный список правителей Шумера. 1800 г. до н. э.
Финикийский алфавит, палеоеврейская письменность имели консонантный строй, то есть состояли только из согласных. Внедрение гласных привело к созданию греческого, а позднее латинского алфавитов.
Поворотным моментом в развитии человечества стала публикация Библии Мартина Лютера. Впервые в истории важнейший источник воспитания и влияния – христианская Библия – стал доступен широким массам.
Верстка Библии Лютера
Столь подробный анализ происхождения, метаморфоз и исчезновения видов письменности возможен благодаря текстовым памятникам, увековечившим развитие человечества на этапах их создания. Текстовые артефакты – это уникальный способ донесения посланий за пределы короткой человеческой жизни. Это основа существования культуры вне наций, границ и эпох.
Верстка массовых текстов
В современном мире интернет-маркетинга наблюдается тенденция к упрощению текстового контента и переходу к визуальному – видео и инфографика, а также к аудиальному – аудиокниги и подкасты.
Очевидно, что механизм чтения требует большей концентрации ресурсов. В то же время, просмотр видео – это процесс, который можно «запараллелить» с множеством других дел. Таким образом чтение и просмотр видео – это процессы с разными когнитивными задачами и разным восприятием. Чтение – это процесс глубинного постижения, сопряженный с активным познавательным процессом. Просмотр же взывает к эмоциональному восприятию.
Оба средства доставки контента – неотъемлемая часть маркетинга, однако для решения серьезных задач, изучения, проблем выбора и других ситуаций с последствиями пользователи, вероятнее всего, прибегнут к текстовой информаций.
Каким образом манипуляции с расположением на странице, выбор шрифта и изменение внешнего вида текстового контента может повлиять на восприятие информации?
Текстовый контент – это элемент дизайна, встраивающийся между графикой и несущий основную смысловую нагрузку. Первоначальный HTML-дизайн текстовых страниц был на 99% ориентирован на содержание и не мог повторить всего великолепия печатной верстки книг и газет. Со временем создание цифровых текстов полностью заменило физическую верстку, что привело паблишеров к необходимости знания правил форматирования текста.
Адаптивность текста
Адаптивность текста – это набор свойств, влияющих на восприимчивость контента. Чем меньше шрифтов используется в текстовом блоке, тем лучше. Поэтому в выборе шрифта важно учитывать универсальность – один шрифт должен покрыть как можно больше требований, при этом сохраняя единообразность и читаемость.
Параметры адаптивности:
- Высота строчной буквы х (икс). Лучше использовать бОльшую высоту, чтобы особенности символов были заметны на экранах любого разрешения. При этом верхние и нижние выносные элементы должны сохранять свои черты.
- Расширение. Высокие начертания хороши для названий и заголовков. Тем не менее в текстовых блоках лучше использовать широкие шрифты.
- Разрядка. Ровная и ритмичная разрядка между символами – важный фактор читаемости текста. Устойчивый поток букв ускоряет распознавание текста.
- Апертура. Это разрывы линий в буквах. Они играют важную роль в распознавании, поэтому чем апертуры выразительнее, тем лучше. Ниже – пример разрывов шрифтов Helvetica и Bell.
Полезные штуки для оформления текста
Так или иначе успех статьи, поста и любого текстового контента, публикуемого онлайн, зависит не только от положительной оценки читателя. В первую очередь контент должен дойти до читателя, желательно, целевого. Здесь решающую роль играют SEO-инструменты и настройки, но и знания верстки текста могут пригодиться. Приведу несколько приемов, которыми пользуюсь при форматировании текстов, обладая базовыми знаниями HTML:
1. Оглавление (Table of Contents, TOC). Из опыта работы техническим писателем я усвоил простую истину – содержание лишним не бывает. В написании технических документов широко используется типизированная XML-архитектура – DITA (Darwin Information Typing Architecture), в которой текстовый контент формируется из «кирпичиков» и сниппетов текста, что обеспечивает гибкость и скорость набора.
Даже если вы не планируете публиковать оглавление, его стоит составить для структурирования информации, но наиболее полезным оно будет при формировании SEO-чувствительных названий и заголовков.
2. Названия и заголовки (Headers). Выделять заголовки жирным текстом или заглавными символами может сработать эстетически, однако этого недостаточно.
Поисковики ориентируются по внутренним параметрам, таким как теги h1, h2, h3 и т.д. Количество заголовков (header1, header2) может быть неограниченным, но должно встраиваться в систему приоритетов, сформированную при помощи оглавления.
Для наилучшего результата оберните главный заголовок или название в тег h1 после тега body. Заголовок в этом теге должен содержать ключевые слова. Некоторые ресурсы располагают картинки в качестве первого элемента, в этом случае стоит вписать ключевые слова в качестве альтернативного текста.
Например, < img src="superfancyimage" alt="keyword1, keyword2">
3. Медиа. К ним относятся вставки визуального контента: фотографии, GIF-анимация, видео, вставки кода, таблицы, формулы и т.д. Итак:
- Картинки. Если вы используете стоковые фото
, оптимизируйте их. Google не видит саму картинку (или видит?), но хорошо ориентируется по ключевым словам. Таким образом ключевое слово в названии картинки – это главный идентификатор. В коде страницы не должны присутствовать названия картинок, вроде DSC1234.jpg.
Атрибуты srcset и sizes внутри тега < image > позволяют сформировать версии разрешений картинок для разных девайсов, что особенно важно для адаптивного дизайна страницы, на которой вы публикуетесь.
< img src="happyface.jpg" alt="good" srcset="happyface-160.jpg 160w, happyface-320.jpg 320w,happyface-640.jpg 640w, happyface-1280.jpg 1280w">
Значения 160w,320w,640w,1280w – это параметры ширины изображения на странице.
- Вставки кода. Блог компании, в которой я работаю, специализируется на веб-дизайне и девелопменте, поэтому часто в статьи приходится вставлять сниппеты кода разных языков программирования. Вставки кода не должны быть картинками – так они теряют практическую ценность. Пользователю должна быть доступна возможность скопировать код, желательно, в маркапе. В этом случае следует пользоваться сторонними сервисами кода либо плагинами в случае работы с WordPress. Для соблюдения правильной подсветки кода вставляйте код в HTML версию контента.
- Таблицы и формулы. Большинство платформ для публикации поддерживают HTML-таблицы. Однако не все из них предоставляют удобный интерфейс для редактирования этих таблиц.
Не имея UI тем не менее можно создать форматирование таблицы, которая будет адекватно отображаться в разных браузерах и на разных устройствах. Для этого нужно использовать теги
Также существует , в которой в HTML кодировке представлено множество специальных символов. Для создания в тексте математических формул стоит прибегнуть к сторонним сервисам, таким как, например, .
4. Семантика HTML. С появлением HTML5 разработчики стали все больше экспериментировать со смысловыми функциями языка создания веб-страниц, добавляя элементы секций, такие как:
