Что такое Sidebar, правила оформления, способы создания

В данной статье мы расскажем:

• Возможное содержание sidebar
• Бесполезные для sidebar элементы
• Количество сайдбаров на сайте
• Правила оформления sidebar
• Способы создания sidebar

Возможное содержание sidebar

Sidebar представляет собой колонку, расположенную слева или справа от основного информационного блока и в сравнении с ним более узкую по размерам. Бывают сайты с двумя сайдбарами (по бокам контента) или варианты, когда sidebar расположен с одной стороны, но состоит из двух столбцов (тогда его ширина будет чуть больше). Чаще всего эта боковая вставка делается сквозной, чтобы пользователь всегда её видел, какую бы страницу сайта ни открыл. Боковая вставка забирает часть площади страницы, из-за чего приходится ужимать контент, использовать более мелкие шрифты. Поэтому в sidebar следует включать лишь действительно полезные разделы. Например, такие:

1. Перечень рубрик и страниц сайта. Помогает посетителям быстро находить нужную информацию (статьи, товары и проч.).
2. Список новых или популярных публикаций. Под популярными подразумеваются те, которые посетители чаще всего дочитывают до конца и много комментируют. А новые – это недавно размещенные на сайте. Если в сайдбаре оставить на них сквозную ссылку, то поисковики лучше индексируют и продвигают такие материалы.
3. Поисковая строка. Возможность найти нужную публикацию по заданному слову повышает вероятность прочтения. Это хорошо для SEO и в целом положительно сказывается на поведенческих факторах.
4. Кнопки для перехода в соцсети. Они дают возможность быстро делиться понравившимися статьями, что в свою очередь подтягивает новых посетителей, которые будут заходить на сайт, кликать по ссылкам, изучать публикации. То есть, поведенческие факторы улучшаются. А сайт двигается в верхние позиции выдач.
5. Любой призыв к действию. Например, кнопка CTA (Call-to-action), форма заявки на товар (услугу), ссылка на каталог с товарами. Всё это инструменты, подталкивающие посетителя к совершению покупки, заполнению анкеты (с внесением телефона, адреса почты) и т.п., что, разумеется, положительно отражается на конверсии.
6. «Бланк» на оформление подписки. Способствует лояльности, дает свежую информацию о скидках, акционных предложениях, статьях, товарах (услугах).
7. Раздел «О компании» (или об авторе). Хорошо, когда sidebar сайта содержит информацию об истории появления бренда, это демонстрирует успешность бизнеса и лояльно настраивает аудиторию.
8. Сайдбар с фильтрами. Такие бывают на страницах с каталогами. Размещать сбоку фильтры или дополнительные сведения о товарах очень удобно. Только позаботьтесь о том, чтобы сайдбар по оформлению перекликался с остальными информационными блоками страницы. Боковая панель не должна быть слишком яркой, основной акцент следует делать всё же на продукцию.
9. Раздел прямого эфира с комментариями пользователей. Часто такие элементы бывают на сайтах новостей, в блогах. Это привлекает больше посетителей, повышает охват статей. Причем все комментарии отображаются тут в реальном времени, отсюда и название «прямой эфир».
10. Рекламный блок. С этим будьте поосторожнее. Делайте рекламу привлекательной, но не слишком выделяющейся на общем фоне страницы, чтобы не отвлекать внимание от контента. Помните еще и о том, что навязанную рекламу пользователи стараются игнорировать (та самая «банерная слепота»).

Бесполезные для sidebar элементы

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

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

Перечисленные элементы лишь «воруют» у сайта полезную площадь и не дают ничего ценного вашей аудитории.

Количество сайдбаров на сайте

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

• Один сайдбар. С самого начала, когда создавались еще только первые сайты, все они в основном были именно такие, что всё еще актуально и на сегодняшний день.
• Два сайдбара. Подходит для корпоративных сайтов или для торговых площадок в интернете. Чаще всего это молодые, стремительно развивающиеся ресурсы, перед которыми стоит задача быстро привлечь больше посетителей и дать им максимум ценной информации.
• Три-четыре сайдбара. Очень редкий вариант. Востребован на сайтах, где много функционала, работающего онлайн. Тогда в ходе создания сайдбара нужно будет особенно тщательно проработать вёрстку, адаптировать её таким образом, чтобы всё корректно открывалось, вне зависимости от расширения экрана. Например, чтобы на узком дисплее размещенный слева или справа sidebar «перебирался» под шапку.

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

Правила оформления sidebar

Так как же правильно сделать по-настоящему полезный для посетителей сайта sidebar? Первое важное правило – боковая колонка должна быть хорошо заметна. Как этого добиться? Вот несколько полезных советов:

• Размеры

Для начала определитесь с шириной боковой панели. Нельзя, чтобы она бросалась в глаза сильнее, чем основное содержание страницы. Оптимально выделить под sidebar 20-30 % от общей ширины контентного блока. Если сайдбаров у вас несколько, то все вместе по ширине они не должны превышать 50 % зоны с контентом. По поводу высоты — её рекомендуется делать такой, чтобы она вся вмещалась на экран (если нижняя часть не видна без прокрутки – это уже плохо).

• Цветовая палитра

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

• Шрифт

В сравнении с кеглем основного текста кегль сайдбара должен быть на 10-20 % больше. Он получится достаточно заметным, но и не будет слишком перетягивать внимание на себя.

• Расположение

Самый распространенный вариант – это sidebar, расположенный справа. Именно в данном случае основная информация на странице воспринимается лучше. Размещать sidebar слева имеет смысл в случаях, когда вам обязательно нужно привлечь внимание именно к нему.

• Общие советы

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

Способы создания sidebar

Для проектирования панели sidebar используют CSS и HTML либо WordPress. Макет сайта следует подготовить заранее, а по нему уже вы будете задавать ширину бокового блока. Если создаете сайдбар вручную, то порядок действий тут следующий:

1. Заходите в редактор кодов.
2. Формируете общий блок div для будущих колонок и задаёте ему класс (пусть, к примеру, layout).
3. Далее выбираете позиционирование для контейнера и свойство для колонок ({position: relative} и {position: absolute} соответственно).
4. Остается проработать дизайн, подобрать шрифты, цвета оформления.

К пунктам навигации тут применяется абсолютное позиционирование, то есть, по ширине они будут такими же, как и внутренний контент. Поэтому для каждого пункта ширину придется задавать персонально. Работать через WordPress проще, там код не пишется вручную. Здесь вы прямо в конструкторе регистрируете боковую панель, ставите виджеты. Необходимо лишь в РНР файлы внести несколько функций. И еще нужны будут массивы данных со ссылками на виджеты и их теги div. Хороший sidebar сам по себе уже отличный инструмент продвижения вашего ресурса. Но только в том случае, если он упрощает навигацию, красиво смотрится, доносит полезную информацию о рубриках, акциях, мероприятиях и в целом работает на улучшение конверсии.