×
Россия +7 (495) 139-20-33

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

Россия +7 (495) 139-20-33
Шрифт:
2 26058

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

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

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

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

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

Относительная предметная длительность или relative subject duration (термин Czerwinski, Horvitz, Cutrell, 2001) – это период концентрации внимания пользователя во время выполнения задачи. В нашем случае – во время чтения.

Эксперимент Кевина Ларсона из Microsoft и Росалинд Пикард из MIT показал, что хорошая верстка может улучшить настроение во время чтения.

Если задание (чтение) остается прежним, улучшение эстетического вида текста увеличивает ОПД, а значит, вовлекает пользователя в контент сильнее.

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

эстетическое восприятие текстового контента можно измерить, а значит, и усилить при помощи верстки.jpg

Немного истории дизайна текста

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

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

Табличка из шумерского города Киш.jpg

Табличка из шумерского города Киш – переходный этап между пиктографией и письменным текстом. 3500 г. до н.э.

Пиктографию сменило иероглифическое письмо Древнего Египта. Иероглифы стали сочетать в себе идеограммы, слоговое и фонетическое значение, текст стал гибким и модальным. Причем существовало 2 вида текстов – церемониальные в виде графических иероглифов с детализацией и эстетикой и упрощенная скоропись – иератика.

Один и тот же текст, написанный в египетской иероглифике и иератике.png

Один и тот же текст, написанный в египетской иероглифике и иератике, соответственно.

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

Пример узелкового письма кипу.jpg

Пример узелкового письма кипу. 3000 г. до н. э.

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

Призма Вельда-Бланделла.jpg

Призма Вельда-Бланделла – клинописный список правителей Шумера. 1800 г. до н. э.

Финикийский алфавит, палеоеврейская письменность имели консонантный строй, то есть состояли только из согласных. Внедрение гласных привело к созданию греческого, а позднее латинского алфавитов.

Поворотным моментом в развитии человечества стала публикация Библии Мартина Лютера. Впервые в истории важнейший источник воспитания и влияния – христианская Библия – стал доступен широким массам.

Верстка Библии Лютера.jpg

Верстка Библии Лютера

Столь подробный анализ происхождения, метаморфоз и исчезновения видов письменности возможен благодаря текстовым памятникам, увековечившим развитие человечества на этапах их создания. Текстовые артефакты – это уникальный способ донесения посланий за пределы короткой человеческой жизни. Это основа существования культуры вне наций, границ и эпох.

Верстка массовых текстов

В современном мире интернет-маркетинга наблюдается тенденция к упрощению текстового контента и переходу к визуальному – видео и инфографика, а также к аудиальному – аудиокниги и подкасты.

Очевидно, что механизм чтения требует большей концентрации ресурсов. В то же время, просмотр видео – это процесс, который можно «запараллелить» с множеством других дел. Таким образом чтение и просмотр видео – это процессы с разными когнитивными задачами и разным восприятием. Чтение – это процесс глубинного постижения, сопряженный с активным познавательным процессом. Просмотр же взывает к эмоциональному восприятию.

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

Каким образом манипуляции с расположением на странице, выбор шрифта и изменение внешнего вида текстового контента может повлиять на восприятие информации?

Текстовый контент – это элемент дизайна, встраивающийся между графикой и несущий основную смысловую нагрузку. Первоначальный HTML-дизайн текстовых страниц был на 99% ориентирован на содержание и не мог повторить всего великолепия печатной верстки книг и газет. Со временем создание цифровых текстов полностью заменило физическую верстку, что привело паблишеров к необходимости знания правил форматирования текста.

Адаптивность текста

Адаптивность текста – это набор свойств, влияющих на восприимчивость контента. Чем меньше шрифтов используется в текстовом блоке, тем лучше. Поэтому в выборе шрифта важно учитывать универсальность – один шрифт должен покрыть как можно больше требований, при этом сохраняя единообразность и читаемость.

Параметры адаптивности:

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

Высота строчной буквы.jpg

  • Расширение. Высокие начертания хороши для названий и заголовков. Тем не менее в текстовых блоках лучше использовать широкие шрифты.

Расширение.jpg

  • Разрядка. Ровная и ритмичная разрядка между символами – важный фактор читаемости текста. Устойчивый поток букв ускоряет распознавание текста.

Разрядка.jpg

  • Апертура. Это разрывы линий в буквах. Они играют важную роль в распознавании, поэтому чем апертуры выразительнее, тем лучше. Ниже – пример разрывов шрифтов Helvetica и Bell.

Апертура.jpg

Полезные штуки для оформления текста

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

  • Картинки. Если вы используете стоковые фото fcp.png, оптимизируйте их. 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 версию контента.

Вставки кода.png

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

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

(Голосов: 6, Рейтинг: 4.33)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Марине Ибушевой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Алгоритм продвижения сайта через Pinterest
Виктор Гаврюков
29
комментариев
1
читатель
Полный профиль
Виктор Гаврюков - В самом вверху есть ссылка на мою группу в ВК, там где автор материала. Через группу и свяжитесь со мной_)
Как забрать 5 мест в выдаче из 10. Кейс-эксперимент
Виктор Гаврюков
29
комментариев
1
читатель
Полный профиль
Виктор Гаврюков - такое можно делать и с ВЧ_)
Ссылочный апдейт Google: что изменится для SEO-специалистов в рунете
Тимур
6
комментариев
0
читателей
Полный профиль
Тимур - Понял, спасибо за информацию.
3 основные ошибки, которые допускают владельцы сайтов при продвижении
Виктор Гаврюков
29
комментариев
1
читатель
Полный профиль
Виктор Гаврюков - Не обращай внимания_) Если у тебя хороший ресурс, то ты будешь первоисточником, и все кто своровал, автоматически начнут на тебя ссылаться, точнее, так гугл будет считать_)
Как продвинуть сайт по коммерческим запросам в ТОП-10 с помощью ресурса Reddit
Denis Zar
2
комментария
0
читателей
Полный профиль
Denis Zar - пользовались услугами по продвижению на реддит от reddit-marketing.pro?
Как мы увеличили трафик из Яндекса более чем в 3 раза за неделю на сайте клиники. Кейс
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - У большинства сайтов произошел рост в Гугле в декабре и в марте Яндекса. Ваши шаманства тут не причём :)
Рост ботных переходов на сайт: как интерпретировать и что делать
Mike
5
комментариев
0
читателей
Полный профиль
Mike - как это проверить? что товары выводится именно на основе спроса, а не по заданным алгоритмам?
Сравнительная статистика уровня жизни SEO-специалистов в семи странах, включая Россию
Рустам
1
комментарий
0
читателей
Полный профиль
Рустам - Средняя температура по больнице, подсчет даже близко не отображает действительность, особенно учитывая разность цен и уровня зп в разных частях больших стран (США, Канада, Россия)
Зарабатываем с помощью текстов: как создать уникальный контент и монетизировать сайт
dotaidi
94
комментария
0
читателей
Полный профиль
dotaidi - Какой-то нейро-физиологический подход к теме создания контента: 1. " ..чтобы контент отвечал интересам аудитории, закрывал ее боли и потербности". Закрыть боль аудитории? Это как понимать, текст что должен выполнять функцию анестезии? Зачем падать в медицинские категории, это ведь профессиональный текст о SEO, а не триллер и не художественная литература, где метафоры уместны. 2. "Главное — чтобы процесс сбора информации вас увлекал и нравился, ведь эта работа требует усилий". Построение тезиса предполагает, что если работа не нравится, то и усилий она не требует. И вообще, упор в работе на главное значение "нравится" — очень спорное и тоже из области НЛП-игрушек. Стилистика статьи тоже желает более продуманного подхода к использованию словосочетаний специфической терминологии: "вы можеет создавать материалы в коллаборации с известными брендами, релевантными тематике вашего сайта". Бренд не может быть релевантным из-за того, что это целый комплекс явлений, собранный под некоторой узнаваемой семантической или графической символикой. Релевантность — качество, свидетельствующее о совпадении запроса(желания) и выдачи (полученной информации). Это нужно хотеть бренд, чтобы он стал релевантным. Аналогия и релевантность не синонимы. "прикладывайте усилия в сбор и обработку информации" и многие подобные обороты делают статью не просто нерелевантной, но просто безграмотной.
Как доработка структуры вывела сайт в ТОП-10 Google и увеличила трафик в 2 раза. Кейс Связной Трэвел
Дмитрий
3
комментария
0
читателей
Полный профиль
Дмитрий - Вероятнее всего было обновление Google и позиции были снижены в связи с низкой скоростью загрузки страниц (так как доработке ведутся не только по SEO, но и в целом по функционалу сайта, появляются новые скрипты). В этот период в Google Search Console увеличилось количество страниц с низкой скоростью загрузки. Мы выявили несколько проблем, которые снижают скорость загрузки страниц и выдали рекомендации по их устранению. Пока данные рекомендации находятся в работе. Также был проведен анализ EAT факторов и проверка сайта на соответствие требованиям Google к YMYL сайта, выданы рекомендации по доработке данных факторов (ждем внедрения наших рекомендаций, поделимся потом результатами).
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
385
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
114
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
94
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
62
Комментариев
60
Комментариев
59

Отправьте отзыв!
Отправьте отзыв!