8 (495) 008—8596
a@kite-da.ru
Агентство
Услуги
Кейсы
Контакты
Вакансии
Агентство Услуги Кейсы Вакансии
Facebook
Telegram

Руководство по оформлению статей в блоге

Блог на сайте — это не просто раздел с текстами. Для того чтобы он стал эффективным инструментом привлечения аудитории, важно оформлять материалы так, чтобы их читали.

Главная страница блога

На главной странице блога выводятся анонсы статей — они могут быть оформлены в виде списка или плиткой. Если материалов в блоге много стоит разделить их по рубрикам и указывать, к какому разделу та или иная статья относится. В качестве альтернативы рубрикам можно использовать метки.
Названия рубрик указаны в строке над списком анонсов, так читатель может просмотреть все статьи сайта или сразу выбрать интересующий его раздел.
Желательно делать несколько форматов вывода материалов на главной странице блога, добавлять дополнительные блоки, например, «Популярные статьи», «Новости». Можно добавить блок «Последние комментарии».
На примере на главной странице блога кроме анонсов статей в порядке их добавления на сайт выводятся блоки с новостями и самые популярные темы.
В списке анонсов наиболее значимые материалы можно выделить особым оформлением — использовать рамку, подложку другого цвета, белый шрифт на темном фоне, поставить на фон изображение, сделать больше других анонсов.
Можно разместить анонс, который нужно выделить, на две колонки вместо одной и расположить текст на фото. При этом важен контраст цвета заголовка с изображением, чтобы его легко можно было прочитать.
Для того, чтобы получить email адреса для рассылки писем разместите среди анонсов форму подписки на рассылку.

Заголовок статьи

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

Структура текста

Текст статьи должен быть структурирован. Необходимо выделять абзацы, подзаголовки и списки, для этого при добавлении статьи используйте правильные html-теги.
Тег <p> используется для обрамления абзацев. В стилях для него должны быть прописаны размер шрифта, его цвет, межстрочный интервал. Между абзацами должны быть вертикальные отступы.
<p>Текст абзаца</p>
Подзаголовки в тексте должны располагаться в соответствии с иерархией: заголовок — h1 (может быть только один на странице), затем по уровням — h2, h3, … h6. Подзаголовки в тексте также должны отбиваться отступами: снизу — такой же как между абзацами или в 1,5 раза больше; сверху — в два раза больше.
<h1>Заголовок</h1>

    <h2>Подзаголовок 1 уровня</h2>

        <h3>Подзаголовок 2 уровня</h3>

        <h3>Подзаголовок 2 уровня</h3>

        <h3>Подзаголовок 2 уровня</h3>

    <h2>Подзаголовок 2 уровня</h2>
Если статья объемная, то для удобства навигации стоит дополнить ее содержанием. Удобно, когда оно выводиться в сайдбаре на основе разметки статьи, то есть в боковом меню выводятся все заголовки h2.
Для разметки списков следует использовать теги: для неупорядоченного списка ul-li, для упорядоченного — ol-li. В стилях необходимо прописать оформление для этих списков: отступы сверху, снизу, слева, маркеры для неупорядоченного списка и нумерацию для упорядоченного.

Пример html-разметки маркированного списка

<ul>
    <li>веерные;</li>
    <li>тростниковые;</li>
    <li>перистые;</li>
    <li>саговые;</li>
    <li>«рыбий хвост».</li>
</ul>

Пример html-разметки списка с нумерацией пунктов

<ol>
    <li>Гидроизоляция</li>
    <li>Демпферная лента</li>
    <li>Утеплитель</li>
    <li>Арматурная сетка</li>
    <li>Трубопровод</li>
    <li>Стяжка</li>
</ol>
Вместо стандартных маркеров для списков, которые устанавливаются браузером по умолчанию можно использовать символы, окрашенные в фирменные цвета компании.

Блоки внимания

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

Особым образом следует оформить следующие элементы:

  • цитаты;
  • термины;
  • прямую речь;
  • лид;
  • мнение эксперта;
  • факт со ссылкой на источник.
Хороший вариант выделения в тексте – использование цветной подложки. Но учитывайте, что тест должен хорошо читаться, и при необходимости изменяйте цвет шрифта для сохранения контраста.

Изображения

Чтобы разбавить текст, обязательно нужно дополнять его изображениями (фотографиями, иллюстрациями, gif-анимацией). Каждая картинка должна сопровождаться подписью. В html-коде должна быть возможность прописать для каждой картинки title и alt. 
<img src="/images/begoniya.jpg" alt="Бегония Рекс" title="Бегония Рекс">
В подписи должна быть информация, которая дополняет содержание статьи и не противоречит содержанию изображения. Также можно указать имя автора фотографии или иллюстрации.
Располагать изображения следует на ширину текстового блока или на всю ширину экрана. При этом изображения должны быть хорошего качества.
Если необходимо добавить несколько изображений в одном месте текста, лучше всего оформить их в галерею (слайдер) и снабдить каждую отельной подписью.

Привязка к другим элементам на сайте

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

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

Функционал для перелинковки с разделами в каталоге товаров не требует дополнительной разработки. В этот блок добавляется изображение товара из каталога и ссылка на него.

При сложностях с разработкой можно добавить блоки с помощью сервиса relap.io.
Ссылки на похожие материалы в конце статьи могут задержать на сайте читателя, которого интересует определенная тема.
Если в тексте описывается товар или его характеристика, внедряем между абзацами слайдер или список с товарами.

Взаимодействие с социальными сетями, форма подписки, комментарии

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

Необходимо, чтобы посетители делились статьями в своих социальных сетях. Для этого кнопки шаринга в социальные сети размещаем в начале статьи, после шапки/заголовка, и в конце статьи.
Кроме стандартного расположения кнопок в конце или начале статьи можно размещать их в плавающем блоке, который прикрепляется к верхней части экрана при прокрутке текста.
Для сбора подписчиков для email рассылки размещаем форму для подписку после основного текста.
Форму подписки можно расположить сразу после основного текста или после блока с комментариями.
Для обратной связи с читателями необходим функционал комментариев. Добавляется либо стандартным функционалом CMS Wordpress, либо сторонними сервисами, например, Cackle, Hypercomments, Disqus.
Возможность оставления комментариев помогает в получении обратной связи от аудитории о качестве и пользе статей в блоге.

Шрифты

Используем доступные шрифты из сервиса Google Fonts. С помощью короткой строчки кода шрифты подключаются к сайту.
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Лучше всего использовать шрифты Roboto или PT Sans для основного текста и шрифты Roboto Slab или Open Sans, соответственно, для подзаголовков.
Размер шрифтов должен быть в диапазоне от 16px до 18px. Межстрочный интервал в диапазоне от 26px от 28px, соответственно.
~
Основная цель правильного оформления статьи — сделать так, чтобы смысл информации был верно передан читателю и чтобы читатель захотел этот текст прочитать. Для этого нужно не просто использовать различные блоки и множество графики. Нужно тщательно продумать структуру статьи, оценить значение каждого ее элемента и на основании этого применить к нему соответствующее оформление.
Остались вопросы? Напишите нам
Напишите нам
Расскажите о целях проекта
Ответим в течении двух рабочих часов. Нажимая на кнопку, Вы подтверждаете свое согласие c пользовательским соглашением и политикой конфиденциальности.