Навыки верстки и оформления текста: что нужно знать контент-маркетологам

Статья написана в рамках статейного конкурса Serpstat и SEOnews.

Условия конкурса

Моисей Ким

Контент-менеджер Shakuro.com

Я занимаюсь написанием контента для агентства веб-дизайна. Это не первый для меня опыт создания текстового контента, в прошлом я работал техническим писателем в сфере автоматизированного документооборота системы здравоохранения США. Именно этот опыт дал мне представление о форматировании текста и верстке, адаптации к восприятию и о том, как сделать контент или документ визуально приятным.

Относительная предметная длительность (ОПД)

Относительная предметная длительность или 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 внутри тега img позволяют сформировать версии разрешений картинок для разных девайсов, что особенно важно для адаптивного дизайна страницы, на которой вы публикуетесь.

[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 тем не менее можно создать форматирование таблицы, которая будет адекватно отображаться в разных браузерах и на разных устройствах. Для этого нужно использовать тег table, внутри которых при помощи различных атрибутов задается структура и внешний вид таблицы.

Также существует таблица символов Юникода®, в которой в HTML кодировке представлено множество специальных символов. Для создания в тексте математических формул стоит прибегнуть к сторонним сервисам, таким как, например, JavaScript MathJax.

4. Семантика HTML. С появлением HTML5 разработчики стали все больше экспериментировать со смысловыми функциями языка создания веб-страниц, добавляя элементы секций, такие как:

• address
• article
• aside
• footer
• header
• hgroup
• nav
• section

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

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

Визуальная презентация – это то, что видит читатель – толстые буквы. Теги – это то, что видит машина. Существует мнение, что слово в теге b не определяется поисковиком как особый элемент, в то время как тег strong добавляет тексту веса в SEO. Есть исследования, утверждающие отсутствие разницы. Вероятно, узнать истину можно только путем собственного эксперимента.

В заключение

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

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

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

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