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

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

Россия +7 (495) 139-20-33
Шрифт:
2 28884
Подпишитесь на нас в Telegram

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

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

Друзья, теперь вы можете поддержать SEOnews https://pay.cloudtips.ru/p/8828f772
Ваши донаты помогут нам развивать издание и дальше радовать вас полезным контентом.

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Примеры использования ChatGPT в SEO-стратегии
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Если кто то хочет протестировать Cat GPT в SЕО проектах на базе нашего агенства, приглашаем наудалкнную работу Tg: @thegoodlink
Почему сайтам нужно переезжать с конструкторов на полноценные CMS
Анна
1
комментарий
0
читателей
Полный профиль
Анна - Ха, занятно. А я еще видела полезное описание тут digitalproweb.ru/sozdanie-sajtov-vybrat-konstruktory-ili-cms
Как мы увеличили для клиента трафик из поиска в 7 раз. Кейс
Кирилл Половников
2
комментария
0
читателей
Полный профиль
Кирилл Половников - Оба этих статуса (редирект и малополезная) преобладали в качестве проблем с индексацией. Помогла работа с .htaccess (в нем были ошибки и его чистили), работа над корректировкой редиректов, каноникалами и прочими техническими ошибками. Нельзя сказать, что только редиректы были ключевым препятствием.
Как показывать рекламу посетителям сайтов конкурентов
Павел
2
комментария
0
читателей
Полный профиль
Павел - Спасибо за комментарий. Гипотеза была в том, что с указанными счетчиками конкурентов показы будут не просто похожей аудитории их сайтов (как при рекламе по доменам), а именно на аудиторию которую Яндекс для себя разметил как целевая дл сайтов конкурентов. Важно, это гипотеза. А про белые нитки, как говорится, доверяй, но проверяй))
Как в перегретой нише получать заявки и добиться конверсии в 19%
ZRZ8GCHIZ6 www.yandex.ru
1
комментарий
0
читателей
Полный профиль
ZRZ8GCHIZ6 www.yandex.ru - ZRZ8GCHIZ6 www.yandex.ru
Что такое Яндекс Советник, и кому от него жить хорошо
Мама Стифлера
1
комментарий
0
читателей
Полный профиль
Мама Стифлера - Вызывает сожаление, что вы не осознаете, что Яндекс.Советник может быть рассмотрен как форма рэкета, которая заставляет компании, размещающиеся в Яндекс.Маркете, выплачивать дополнительные финансовые средства, повышая в конечном итоге прибыль Яндекс.Маркета, но не принесет пользы для посетителей сайта.
Как дожать сайт до ТОПа? Выжимаем весь сок из SEO под Яндекс и Google
Фанит
2
комментария
0
читателей
Полный профиль
Фанит - Спасибо автору за статью, полезно! По поводу сниппета сайта, для увеличения CTR можно дополнительно внедрить основные схемы микроразметки и улучшить его, чтобы выделялся на фоне конкурентов, особенно заметно в Google.
Особенности внутренней перелинковки для крупных сайтов
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Haaaa! Articol despre "перелинковка" cu scopul de a acapara BackLink-uri. Înțeleg cu exemplele din zona ru, da chiar sa folosiți și md, panda, serios?
В поисках истины: разбираем 7 мифов о Telegram Ads
Konstantin Bulgakov
12
комментариев
0
читателей
Полный профиль
Konstantin Bulgakov - Жаль, про аналитику кампании ничего не сказано. А там всё очень непросто)
Можно ли продвигать сайт спонсорскими ссылками: разбор кейса
Александр
1
комментарий
0
читателей
Полный профиль
Александр - Хм.... ооочень сомнительный результат. За 10 000 в месяц получить 1 запрос в топ10, да ещё и в google, который на ссылки всегда лучше Яндекса реагировал - такое себе.... При этом достаточно странно были отобраны запросы с местами за ТОП50. Ведь давно известно же, что ссылки так быстро не сработают, к тому же за такое короткое время максимально, на что можно рассчитывать - это небольшое повышение средней. Поэтому тут логично было бы подобрать запросы, либо те, которые находятся близко к ТОП10, например на 11-15 местах, и посмотреть на их динамику. Либо на запросы, которые уже в топ10 находятся (5-10 места). Ведь после отключения контекста CTR в google кратно вырос и, например, разница 1 и 2-х местах отличается почти в два раза! Поэтому, если бы ссылки сработали на рост позиций с 5-10 мест, на 1-4 - это был бы кратный толк как в росте трафика, так и с точки зрения отдачи от вложений. Тем более как раз подвижки в 2-3 позиции уже дали бы ощутимый результат (если это, конечно не НЧ и микроНЧ запросы).... Так что считаю, эксперимент изначально был провальным уже на этапе отбора запросов.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
386
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
118
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
64
Комментариев
60
Комментариев
59

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