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

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

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

Зачем нужен блог

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

  • Сформировать имидж компании;
  • Увеличить лояльность аудитории;
  • Повысить узнаваемость бренда;
  • Увеличить упоминаемость компании, если читатели будут репостить материалы;
  • Вовлекать и удерживать аудиторию;
  • Поднять сайт в поисковой выдаче.

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

Как редакторы работают с блогом (техническая часть)

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

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

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

Большой факап, как точка роста

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

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

Удачная формула листинга

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

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

  • Мини-карточка. Содержит изображение, заголовок, краткое описание (опционально), дату публикации, теги (опционально), автора (опционально), время прочтения (опционально). Набор быстрых действий: избранное, лайки и количество комментариев (опционально);
  • Рубрикатор. Обычно выполняется боковым сайд-баром, но может быть горизонтальное расположение для небольших блогов.;
  • Теги. Удобный и быстрый поиск по ключевым словам. Главное контролировать количество облака тегов;
  • Авторы (опционально). Классно если есть сформированный пул экспертов, который позволит быстро переходить к популярным авторам;
  • Баннеры. Так как мы говорим про корпоративный блог, рекомендуем позаботиться о продажах и органично встроить место для рекламы товаров или услуг;
  • CTA. Для сбора базы контактов с предложением подписаться.

Детальная карточка статьи/новости. Что будет, если забить?

  • Если из инструментов у редактора будет только текст, статьи будут выглядеть бесконечными портянками. Читать их будет неудобно и вся работа пойдет насмарку;
  • Если не продумано на дизайне, с большой вероятность в релизе будет что-то ломаться (фото и таблицы чаще всего);
  • Аудитория будет приходить из поиска по статье и испытывать ужас, следовательно сразу уходить с сайта, что приведет к отказам и негативу.

Какие элементы необходимо закладывать в детальную карточку, чтобы редакторы могли оформить контент

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

Превью + содержание

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

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

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

Текстовый редактор H2-H6, Абазц <p>, выравнивание, жирность, курсив.

Пример типографики используемой в блоге.
Пример типографики используемой в блоге.

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

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

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

Маркированный и нумерованный список

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

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

Ссылки в тексте

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

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

Таблицы

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

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

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

Цитата и выделенные блоки

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

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

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

Работа с мультимедиа

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

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

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

Теги

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

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

Поделиться в соц сетях

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

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

Релевантный контент

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

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

На этапе верстки

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

Полезные материалы

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

Выводы

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

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

2626
9 комментариев

Коллеги, спасибо, статья очень полезна. Завтра по ней буду давать ОС дизайнеру).
Поделитесь, как в корп блоге решить вопрос с картинками к статьям? Чтобы и фирстиль было видно, чтобы отличаться и узнаваться и чтобы не разориться на граф. дизайнере...

Ответить

Спасибо! По поводу картинок, можно сделать единый шаблон и менять в нем иллюстрацию/картинку. А можно сделать дизайн, в котором будут картинки и на них предусмотреть теги и плашки в корп.стиле)

2
Ответить

Очень грамотно написано. Вот бы все так делали при разработке сайта.

1
Ответить

Спасибо! Надеемся, наш открытый файл поможет коллегам, которые еще не делают этого)

1
Ответить

Сайт у вас приятный )

1
Ответить

Спасибо! А мы его уже собрались менять и к лету запускать новый)

1
Ответить

Самое главное, чтоб на сайте был хоть один котик

Ответить