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

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

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

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

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

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

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

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

<address>

<article>

<aside>

<footer>

<header>

<hgroup>

<nav>

<section>

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

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

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

В заключение

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

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

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

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

Источник: www.seonews.ru