что это такое на сайте

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

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

Что такое сайдбар, для чего он нужен. Виды сайдбаров

Сайдбар (sidebar) — это боковая панель сайта, визуально разграниченная с контентом на странице. Благодаря ее блокам посетители понимают, что и где расположено на сайте. Ширина боковой панели обычно меньше ширины основного блока с контентом.

Рубрики и рекомендованные статьи часто публикуются в правом сайдбаре

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

Особенности различных видов сайдбаров:

• Левый сайдбар привлекает больше пользовательского внимания, что объяснимо, ведь мы читаем слева направо.

Пример сайта с сайдбаром слева

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

Пример сайта с сайдбаром справа

Гораздо меньше сайтов с двумя боковыми панелями — с одной стороны или с обеих сразу.

Пример сайта с двумя сайдбарами

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

Пример сайта с несколькими сайдбарами

На некоторых сайтах делают полностью либо частично плавающий сайдбар — такая панель все время на виду у пользователя.

Часто можно встретить сайты и вовсе без сайдбаров.

Пример сайта без сайдбара

Присоединяйтесь к нашему Telegram-каналу!

• Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
• Для этого вам необходимо подписаться на наш канал.

Как сайдбар улучшает юзабилити сайта

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

• анонсы;
• перечень рубрик;
• форма подписки на рассылку;
• боковое меню;
• список разделов сайта;
• список новых и /или популярных статей;
• ссылки на профили компании в социальных сетях;
• строка поиска по сайту.

В сайдбаре сайта-визитки — ссылка на скачивание брифа, метки в блоге и его рубрики

А если это интернет-магазин или, например, сайт юридического агентства, уместна ссылка на корзину либо кнопка заказа товаров и услуг:

Пример сайта юридической фирмы: кнопки соцсетей и кнопка заказа по телефону

Из каких элементов состоит сайдбар

Какой сайдбар лучше — левый или правый

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

Чего не стоит публиковать в сайдбаре

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

• Облако тегов. Неудобно для навигации и занимает лишнее место.
• Виджет «Календарь». Не используется при навигации на сайте, зато занимает место.

Пример сайдбара с виджетом «Календарь»

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

Редко, но все же бывает: счетчик посетителей сайта в левом сайдбаре

Как лучше оформить сайдбар

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

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

Сайдбар должен графически отделяться от основного контента страницы

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

Выдвигающийся сайдбар другого цвета точно не сливается с контентом

Для заголовков в сайдбаре используют шрифт несколько крупнее основного.

Заголовки в левом сайдбаре («Тинькофф Журнал»)

• В заголовках разделов прописывают ключевые запросы высокой и средней частотности — это улучшает SEO сайта.

Ключи, прописанные в заголовках разделов помогают поисковой оптимизации сайта

• Информацию в боковой панели размещают с учетом ее важности. Так, в верхней части сайдбара располагают самые значимые компоненты: разделы сайта, перечень рубрик, ссылки на профили компании в социальных сетях, строку поиска и т. п.
• Если для важной информации не хватает одного сайдбара, можно пользоваться двумя, разместив их по бокам от блока с контентом. Но стоит помнить: чем больше боковых панелей, тем меньше места для самого контента.

Два правых сайдбара занимают половину полезной площади страницы

Какие выводы можно сделать

Использовать ли боковую панель, зависит от типа сайта:

• Для хорошей навигации на сайте интернет-магазина нужен как минимум один сайдбар — левый. В нем можно разместить перечень ссылки на каталог товаров, фильтр поиска и пр. 
• Если это корпоративный сайт, ему также не обойтись без боковой панели, на которой будет располагаться путеводитель по контенту. Здесь заинтересовавшийся пользователь может быстро найти контакты компании, ее соцсети, информацию о выпускаемой продукции или предлагаемых услугах и пр.  
• Сайдбар не нужен на лендинге, ведь суть посадочной страницы заключается в одной фразе «Одна страница — одна цель», а перечень рубрик слева или справа отвлечет внимание пользователя. Ссылки перехода к тому или иному разделу лендинга обычно размещаются в верхнем меню. 
• На контентном сайте сайдбар, скорее, полезен. Здесь можно разместить строку поиска по сайту, чтобы улучшить его юзабилити, а перечень новых статей поможет увеличить количество их просмотров. Форма подписки позволит получить новых подписчиков e-mail-рассылки.

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

Создание сайтов

• Разработка эффективных сайтов для продаж в интернете.
• Создаем сайты с нуля любой сложности, от сайтов визиток до интернет-магазинов и крупных порталов.

Боковая панель | HTML | CodeBasics

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

Для того чтобы корректно разметить такую область, существует тег <aside>, внутри которого и располагается наша боковая панель. Добавим в пример из прошлого урока боковую панель с дополнительным меню.

<header>
  <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
  <nav> <!-- Меню -->
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </nav>
</header>
<aside> <!-- Боковая панель (сайдбар) -->
  <nav> <!-- Дополнительное меню страницы -->
    <ul>
      <li><a href="/service-1/">Услуга 1</a></li>
      <li><a href="/service-2/">Услуга 2</a></li>
      <li><a href="/service-3/">Услуга 3</a></li>
    </ul>
  </nav>
</aside>
<main>
  <p>Основной контент страницы.  Это может быть статья, описание услуги, данные на странице контакты</p>
  <section>
    <h3>Оставить заявку</h3>
    <form>
      <!-- Здесь форма заказа услуги -->
    </form>
  </section>
  <section>
    <h3>Читайте также</h3>
    <article>
      <h4>Услуга 2</h4>
      <p>Описание новой услуги</p>
      <a href="#">Ссылка на услугу</a>
    </article>
    <article>
      <h4>Услуга 3</h4>
      <p>Описание новой услуги</p>
      <a href="#">Ссылка на услугу</a>
    </article>
    <article>
      <h4>Услуга 4</h4>
      <p>Описание новой услуги</p>
      <a href="#">Ссылка на услугу</a>
    </article>
  </section>
</main>

Обратите внимание, что <aside> содержится вне тега <main>. Этот контент не обязан быть уникальным на каждой странице. Он может быть уникальным для каждого конкретного раздела (если речь идёт, например, о меню). Если боковая панель уникальна для каждой страницы, то она должна быть расположена внутри тега <main>.

Задание

Создайте шапку сайта. Она состоит из 2-х элементов:

• Логотип
• Секция навигации. Внутри неё маркированный список из двух элементов

Добавьте секцию <main>. Внутри создайте секцию с заголовком в теге <h3>. Внутри секции создайте два блока с описанием новых услуг. Не забудьте, что внутри тега <article> обязательно содержится заголовок. Сами заголовки внутри <article> разметьте тегом <h4>.

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

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

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

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Полезное

• Хоть мы и говорили про боковую панель, но aside обозначает дополняющую область. При этом, зачастую, визуально она выглядит как боковая панель

←Предыдущий

Следующий→

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

Боковая панель W3.CSS

❮ Предыдущая
Далее ❯

---

---

Вертикальные панели навигации W3.CSS

С боковой навигацией у вас есть несколько вариантов:

• Всегда отображать панель навигации слева от содержимого страницы
• Использовать складную «полностью автоматическую» боковую навигацию
• Открыть панель навигации над левой частью содержимого страницы
• Открыть панель навигации по всему содержимому страницы
• Сдвиньте содержимое страницы вправо при открытии панели навигации
• Отображать панель навигации справа, а не слева

---

Всегда отображать боковую панель

Пример