Правильный сайдбар блога в примерах

Сайдбар (боковая панель) — важнейшая часть блога (после основного содержимого). Именно в сайдбаре обычно размещают виджеты RSS-подписки и социальных сетей (Twitter, Facebook, Вконтакте) благодаря которым вы конвертируете случайных посетителей в постоянных; элементы навигации, чтобы посетитель нашел на вашем блоге то, что ему нужно; рекламу (баннерную и контекстную) благодаря которой вы зарабатываете деньги; ссылки на популярные публикации и страницы и многое другое. Иными словами, от того на сколько грамотно и удачно спроектирован сайдбар вашего блога зависит очень многое! Так какой же он хороший сайдбар?

Существует ряд критериев по которым можно судить о состоятельности того или иного сайдбара, вот некоторые из них:

Самое важное наверху. Чем выше располагается виджет в сайдбаре, тем он более эффективен. Поэтому при проектировании боковой панели расставьте приоритеты и согласно им расположите виджеты сверху вниз. Наиболее важные виджеты должны находится над «линией сгиба», то есть должны быть видны без вертикальной прокрутки.

Сайдбар привлекателен, но не отвлекает внимания. Хороший сайдбар — это отчасти компромисс. Он должен одновременно обращать на себя внимание и не мешать посетителю знакомиться с основным содержимым. Другими словами, сайдбар не должен «кричать», но когда посетитель решит к нему обратиться он должен отметить что все сделано качественно и приятно (а так же быстро там найти то, что искал).

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

Ну, а теперь, обратимся к примерам:

Tumblr Staff Blog

Tumblr Staff Blog

http://staff.tumblr.com/

Основная задача блога команды Tumblr — продвижение платформы, поэтому в самом верху сайдбара располагаются виджеты «Sign Up» (имеется в виду заведи аккаунт на Tumblr), «30 reasons you’ll love tumblr» и «We heart → Tumblr Fan Art» и только в самом низу находятся виджеты «Теги», «Поиск» и «Follow this blog».

ViperChill

сайдбар ViperChill

http://www.viperchill.com/

Боковая панель ViperChill очень проста, но в тоже время эффективна. Вверху вы найдете форму для подписки, элементы навигации находятся внизу. Логика автора блога в данном случае такова — если человеку понадобятся рубрики или теги, он их в любом случае найдет (для этого он не постесняется воспользоваться прокруткой), а вот новая электронная книга (курс или подписка) должна быть на виду.

Huffington Post

Huffington Post сайдбар

http://www.huffingtonpost.com/

Huffington Post — один из наиболее успешных и авторитетных блогов в мире. Приорететом для «редакции» этого онлайн-издания является общение, поэтому в сайдбаре вы можете обнаружить такие виджеты «Most Popular on Huffingpost», «Most Discussed Right Now», «Hot on Facebook», «Hot on Twitter», «Don’t miss huffpost bloggers» и так далее. Достаточно тесная интеграция с социальными сетями.

Mashable

Mashable блог

http://mashable.com/

Блог посвященный интернет технологиям просто обязан соответствовать свой тематике, поэтому на самом верху сайдбара нашли себе место виджет социальных сетей и подписки (к тому же контент Mashable смело можно назвать «вирусным», народ его хорошо подхватывает и разносит по социальным сетям). Причем, нужно отметить еще одну вещь — Mashable традиционно идет в ногу со временем делает акценты на актуальных трендах. То есть сегодня в центре интереса социальная сеть Google+, она и значится первой. В свое время на ее месте находился Facebook и Twitter (сейчас виджеты этих сетей располагаются чуть ниже).

Smart Passive Income

Smart Passive Income

http://www.smartpassiveincome.com/

Автор Smart Passive Income Пэт строит вокруг собственной персоны бренд, поэтому первый виджет который вы видите обращая внимание на сайдбар — «Hello» (или другими словами, About). Верный вариант если вы преследуете те же цели, что и Pat.

Digital Photography School

Digital Photography School

http://www.digital-photography-school.com/

Еще один известный проект Даррена Роуза (Darren Rowse) — Digital Photography School обладает информационно насыщенным и многофункциональным сайдбаром, где помимо всего прочего вы можете найти виджет рассказывающий о том как правильно писать и размещать гостевые посты и фотографии (а заодно и содержащий призыв к действию), а так же реф. ссылки различных фотосервисов (например, стоковых).

CopyBlogger

сайдбар CopyBlogger

http://copyblogger.com/

Напоследок, я припас для вас интересный пример. Иногда самая важная задача сайдбара — это его отсутствие. Автор блога CopyBlogger Браин Кларк (Brian Clark) так и поступил, убрав сайдбар с главной страницы, тем самым значительно повысил конверсию на целевые страницы (см. расположенный в верхней части виджет).

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

P.S. Наклейки для айфона уже не так популярны, сейчас новая мода на бампер для iphone 4 киев будь то или москва, пользователи смартфонов с удовольствием покупают эти штуки.
Традиционно застолье состоит из нескольких блюд и этапов — сначала идут первые блюда после второе и десерт, на сайте рецептов найдете полезные заметки про первые блюда и остальные.
Часы — неотъемлемый атрибут имиджа, но иногда стоят весьма дорого, качественные копии часов которые можно заказать в интернете ничем не хуже оригинала как по виду, так и по работе.

Понравился пост? Подпишись на:

RSS use4blog insideRSS, RSS use4blog insideEmail или twitter!

Поделись хорошей статьей в своем блоге:

Опубликовать в twitter.com        
Все комментарии для статьи Правильный сайдбар блога в примерах
  1. kosport (26.11.2011)

    Зачет!
    Извини это не спам — но статья стоит того, что бы быть положенной в закладки…

    Твитну без вопросов

  2. Андрей (05.12.2011)

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

  3. Tod (06.12.2011)

    Андрей, большой выбор шаблонов это лучше чем бы их было совсем мало) Иногда приходится что-то доделывать в макете — это нормально + дополнительный опыт и знания.

  4. Дмитрий (24.01.2012)

    У меня вопрос, почему практически на всех блогах сайдбар справа?
    Это какое-то неписаное правило блоговедения?)))

  5. Tod (24.01.2012)

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

  6. Xstroy (07.04.2012)

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


Оставить комментарий к статье Правильный сайдбар блога в примерах