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

На связи verno.digital. За последние 3 года мы сделали десяток корпоративных блогов и медиа в рамках проектов, которые мы разрабатываем. В этой статье поделимся нашим опытом и дадим четкие правила, которые заказчики могут забирать в ТЗ, а исполнители использовать как чек-лист.

Корпоративный блог решает несколько основных задач и помогает:

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

Для редакторов в CMS предусматривается и настраивается WYSIWYG-редактор (визуальный редактор), Эта аббревиатура расшифровывается как What You See Is What You Get — Что видишь то и получишь. То есть вы редактируете публикацию сразу в том виде, в каком её увидят ваши читатели.

На таком редакторе мы и выкладываем эту статью, проставляем заголовки, используем различные элементы и получаем единый стиль оформления. Стандартная работа для редакторов должна строиться по принципу CTL+C из своего документа и CTRL+V на сайт. В идеале стили встанут автоматически или же редактор имеет возможность отформатировать текст вручную. Плохо, если возможность есть, а стили не работают. Ниже подробный гайд для дизайнеров и команды разработки.

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

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

Какие элементы необходимо учесть:

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

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

Содержание обычно оформляется гиперссылками, но на одном проекте мы делали аккордеоном, как самостоятельный элемент.

На текстовом редакторе все обычно и сыпется, в лучшем случае есть тег

(абзац) и все. Иногда нет даже его и текст разделяют пробелами.

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

В html-разметке это теги <ul>(маркированный список) и <li>(нумерованный список), будет здорово, если они будут работать в соответствии с общим стилем сайта и использовать корпоративные цвета для маркированного списка. Список должен иметь свои отступы и выравнивание.

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

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

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

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

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

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

Частые ошибки, фото не учитывает ширину контента и вываливается за него. Плохо адаптируется и "скукоживается", не имеет правильных отступов от контента.

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

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

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

Используйте теги! Чтобы настроив теги на визуальном редакторе, все работало так, как было задумано. Иногда можно встретить <div> со стилями, вместо тега абзаца <p> . Вероятнее всего, бэкенд не будет проставлять теги в рамках стандартного ТЗ и потом потребуются доработки. Не делайте так)

Мы сделали шаблон в Figma с детальной страницей блога, забирайте по ссылке.

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

Наши предыдущие статьи:

Как мы подходим к дизайну. Брекпоинты, сетки и UI-kit

За что разработчики не любят дизайнеров