Оформление и презентация текста может визуально выделить вашу статью из десятков подобных. Полезный и интересный контент должен не просто доносить информацию, но взывать к эстетическим чувствам. Поэтому, если к ценности информации добавить надлежащую подачу, результат будет впечатляющим.
Я занимаюсь написанием контента для агентства веб-дизайна. Это не первый, для меня, опыт создания текстового контента, в прошлом я работал техническим писателем в сфере автоматизированного документооборота системы здравоохранения США. Именно этот опыт дал мне представление о форматировании текста и верстке, адаптации к восприятию и о том, как сделать контент или документ визуально приятным.
Относительная предметная длительность (ОПД)
Относительная предметная длительность или relative subject duration (термин Czerwinski, Horvitz, Cutrell, 2001) — это период концентрации внимания пользователя во время выполнения задачи. В нашем случае, во время чтения.
Эксперимент Кевина Ларсона из Microsoft и Росалинд Пикард из MIT показал, что хорошая верстка может улучшить настроение во время чтения.
Если задание (чтение) остается прежним, улучшение эстетического вида текста увеличивает ОПД, а значит вовлекает пользователя в контент сильнее.
Положительная реакция на контент, при наличии хорошей верстки, сравнима с просмотром смешного видео. Таким образом, эстетическое восприятие текстового контента можно измерить, а значит, и усилить при помощи верстки.
Немного истории дизайна текста
Письменность — это универсальный графический язык, единственный способ передачи информации в органическом изначальном виде сквозь тысячелетия.
С давних времен, посредством текста, люди стремились передавать информацию о себе. Начертание пиктограмм, которое в отличие от живописи, раскрывает свое значение в контексте и окружении, стало прародителем современного текста.
Пиктографию сменило иероглифическое письмо Древнего Египта. Иероглифы стали сочетать в себе идеограммы, слоговое и фонетическое значение, текст стал гибким и модальным. Причем, существовало 2 вида текстов — церемониальные в виде графических иероглифов с детализацией и эстетикой, и упрощенная скоропись — иератика.
На другом конце света, инкская цивилизация использовала узелковую текстовую кодировку — кипу, не расшифрованную до конца и поныне. Известно, что цвета применялись для обозначения классов объектов, создавались смешения цветов и последовательные серии. Длина нитей, количество. Расположение и виды узлов образовывали повествовательные, а также арифметические, топографические и календарные тексты.
Шумерская клинопись стала первым фонетическим письмом. Методом клинописи, таким образом, стали записываться художественные произведения, например, “Эпос о Гильгамеше”. Переход к системе “символ-звук” положил основу дальнейшему развитию текста.
Финикийский алфавит, палеоеврейская письменность имели консонантный строй, то есть состояли только из согласных. Внедрение гласных привело к созданию греческого, а позднее латинского алфавитов.
Поворотным моментом в развитии человечества стала публикация Библии Мартина Лютера. Впервые в истории, важнейший источник воспитания и влияния — христианская Библия, стал доступен широким массам.
Столь подробный анализ происхождения, метаморфоз и исчезновения видов письменности возможен благодаря текстовым памятникам, увековечившим развитие человечества на этапах их создания. Текстовые артефакты — это уникальный способ донесения посланий за пределы короткой человеческой жизни. Это основа существования культуры вне наций, границ и эпох.
Верстка массовых текстов
В современном мире интернет-маркетинга наблюдается тенденция к упрощению текстового контента и переходу к визуальному — видео и инфографика, а также к аудиальному — аудиокниги и подкасты.
Очевидно, что механизм чтения требует большей концентрации ресурсов. В то же время, просмотр видео — это процесс, который можно “запараллелить” с множеством других дел. Таким образом, чтение и просмотр видео — это процессы с разными когнитивными задачами и разным восприятием. Чтение — это процесс глубинного постижения, сопряженный с активным познавательным процессом. Просмотр же, взывает к эмоциональному восприятию.
Оба средства доставки контента — неотъемлемая часть маркетинга, однако, для решения серьезных задач, изучения, проблем выбора и других ситуаций с последствиями, пользователи, вероятнее всего, прибегнут к текстовой информаций.
Каким образом манипуляции с расположением на странице, выбор шрифта, и изменение внешнего вида текстового контента может повлиять на восприятие информации?
Текстовый контент — это элемент дизайна, встраивающийся между графикой и несущий основную смысловую нагрузку. Первоначальный HTML дизайн текстовых страниц был на 99% ориентирован на содержание и не могу повторить всего великолепия печатной верстки книг и газет. Со временем, создание цифровых текстов полностью заменило физическую верстку, что привело паблишеров к необходимости знания правил форматирования текста.
Адаптивность текста
Адаптивность текста — это набор свойств, влияющих на восприимчивость контента. Чем меньше шрифтов используется в текстовом блоке — тем лучше. Поэтому, в выборе шрифта важно учитывать универсальность — один шрифт должен покрыть как можно больше требований, при этом сохраняя единообразность и читаемость.
Параметры адаптивности:
- Высота строчной буквы х (икс). Лучше использовать бОльшую высоту, чтобы особенности символов были заметны на экранах любого разрешения. При этом, верхние и нижние выносные элементы должны сохранять свои черты.
- Расширение. Высокие начертания хороши для названий и заголовков. Тем не менее, в текстовых блоках лучше использовать широкие шрифты.
- Разрядка. Ровная и ритмичная разрядка между символами — важный фактор читаемости текста. Устойчивый поток букв ускоряет распознавание текста.
- Апертура. Это разрывы линий в буквах. Они играют важную роль в распознавании, поэтому, чем апертуры выразительнее — тем лучше. Ниже — пример разрывов шрифтов Helvetica и Bell.
Полезные штуки для оформления текста
Так или иначе, успех статьи, поста и любого текстового контента публикуемого онлайн, зависит не только от положительной оценки читателя. В первую очередь, контент должен дойти до читателя, желательно, целевого. Здесь решающую роль играют SEO инструменты и настройки, но и знания верстки текста могут пригодиться. Я приведу несколько приемов, которыми я пользуюсь при форматировании текстов, обладая базовыми знаниями HTML:
- Оглавление (Table of Contents, TOC). Из опыта работы техническим писателем я, усвоил простую истину — содержание лишним не бывает. В написании технических документов широко используется типизированная XML архитектура — DITA (Darwin Information Typing Architecture), в которой текстовый контент формируется из “кирпичиков” и сниппетов текста, что обеспечивает гибкость и скорость набора.
Даже, если вы не планируете публиковать оглавление, его стоит составить для структурирования информации, но наиболее полезным оно будет при формировании SEO-чувствительных названий и заголовков.
2. Названия и заголовки (Headers). Выделять заголовки жирным текстом или заглавными символами может сработать эстетически, однако, этого недостаточно.
Поисковики ориентируются по внутренним параметрам, таким как теги
<h1></h1>, <h2></h2>, <h3></h3> и т.д.Количество заголовков (header1, header2) может быть неограниченным, но должно встраиваться в систему приоритетов, сформированную при помощи оглавления.
Для наилучшего результата, оберните главный заголовок, или название в тег
<h1></h1>после тега
<body></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, тем не менее, можно создать форматирование таблицы, которая будет адекватно отображаться в разных браузерах и на разных устройствах. Для этого, нужно использовать теги
<table></table>,внутри которого при помощи различных атрибутов задается структура и внешний вид таблицы.
Также, существует таблица символов Юникода®, в которой в HTML кодировке представлено множество специальных символов. Для создания в тексте математических формул, стоит прибегнуть к сторонним сервисам, таким как, например, JavaScript MathJax.
4. Семантика HTML. С появлением HTML5, разработчики стали все больше экспериментировать со смысловыми функциями языка создания веб-страниц, добавляя элементы секций, такие как, например:
<address>
<article>
<aside>
<footer>
<header>
<hgroup>
<nav>
<section>Все они призваны для того, чтобы “оживить” контент, придав ему смысловой колорит, ощутимый не только читателем, но и роботом.
Занимаясь написанием технических текстов, я не встречал тега <strong> для выделения фрагментов жирным, привычным решением был тег <b>. Однако, начав писать публицистические статьи и маркетинговый контент, я обнаружил, что, несмотря на одинаковую презентацию текста, эти теги существенно отличаются друг от друга.
Визуальная презентация — это то, что видит читатель — толстые буквы. Теги — это то, что видит машина. Существует мнение, что слово в теге <b> не определяется поисковиком как особый элемент, в то время как тег <strong>, добавляет тексту веса в SEO. Есть исследования, утверждающие отсутствие разницы. Вероятно, узнать истину можно только путем собственного эксперимента.
В заключение
Дизайн текста и верстка обычно не являются важнейшими факторами при создании текстового контента. Куда больше внимания уделяется содержательной части. Делегировав оформление текста стандартному функционалу темы WordPress, а то и более простым инструментам, авторы часто не задумываются о презентации своего уникального контента.
Наследие раннего интернета таково, что мы умеем выделять ценную информацию из текста любого внешнего вида. Тем не менее, если оценивать контент с точки зрения его конкурентности, имиджа и эстетики, а не только фактического содержания, выясняется, что важным параметром является и юзабилити текста.
Простой пример: такая платформа для блоггинга, как medium.com использует свой унифицированный набор средств форматирования текста, имеет простой механизм загрузки и расположения медиа, не позволяет использовать большой массив шрифтов и размеров. Однако, этот набор продуман дизайнерами и реализован в соответствие с изученными принципами восприятия. Примеров подобных инструментов для паблишинга довольно много.
Качественная верстка текста позволяет использовать весь смысловой потенциал статьи, усиливая, при этом эстетическое удовольствие от прочтения, что является важным и редким условием успеха контента.
