Пишу про заинтересовавшие сервисы, блоги, твиттеры, а также собственные идеи и задумки.

Сага о сайдбарах

31 мая 2011, 18:52

Сейчас у каждого уважающего себя интернетчика есть блог: в ЖЖшечке, микроблог в твиттере или на других платформах. Не менее распространены и блоги на WordPress, для которого расплодилось скинов не меньше, чем блогов, пожалуй. И каждый из них по своему уникален. Но одна общая черта есть почти у всех — наличие минимум одного сайдбара. Ниже постараюсь раскрыть плюсы и минусы каждого варианта, чтобы вы сделали для себя верный выбор. Итак, где располагать сайдбары в блоге?

Сайдбар справа


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

Плюсы: привычность, не мозолит глаза (если не содержит вызывающих элементов, конечно), загружается после контента

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

Сайдбар слева


Такая компоновка была (да и сейчас вполне) популярна до эпохи web2.0, когда навигационное меню на сайтах размещалось в той области. Целесообразность такого решения в блогах зависит от того, насколько важная информация располагается в сайдбаре.

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

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

Двойной сайдбар справа


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

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

Минусы: слишком широкие сайдбары оставят меньше площади под контент, что сделает его чтение неудобным; неприемлемо при малом количестве блоков — тогда на длинных страницах будет больше пустоты внизу.

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

Двойной сайдбар слева


Совершенно уродливый вариант, который акцентирует внимание именно на сайдбарах, а не на контентной части.

Плюсы: если вам важнее статистические данные, чем статьи, то этот вариант для вас.

Минусы: загружается до контента; отвлекает внимание от чтения; выглядит перегруженно; может растягивать страницу по ширине, сужая контент по площади.

Менее всего на блогах хотелось бы видеть данную схему.

Два сайдбара на разных сторонах


Тоже достаточно известное со времён web 1.0 решение, когда в одной колонке размещалась навигация, а в другой — полезная информация, необходимая на каждой странице.

Плюсы: сбалансированность дизайна; не перетягивает на себя внимание от статей.

Минусы: может выглядеть слегка непривычно и перегружено при непродуманном наполнении.

В данном случае, наверное, будет правильнее размещать навигационную часть — новые записи, архив и тэги слева, а «новостную» — новые комментарии, полезные ссылки, счётчики, RSS справа.

Сайдбар в подвале


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

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

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

Сайдбар вверху


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

Плюсы: занимает мало места, зато даёт возможность переходить на статичные страницы сайта.

Минусы: всплывающие меню могут не работать (или некорректно работать) без JS; может быть неочевиден при использовании, если там будут располагаться ссылки на рубрики или тэги блога.

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

6 комментариев
Андрей

Меня сильно удивило, что стиль Vector для Wiki свёрстан таким образом, что в коде сайдбар идёт как раз-таки в конце, хотя располагается слева. Хорошо продумано, однако. Но вёрстка там зубодробительная. К блогам отношения не имеет, просто к слову.

StereoMaster

Да, там интересно сделано и вполне правильно. Но это, к сожалению, исключение, чем правило. Я ещё помню, когда владелец saveicq.ru меня три года назад спрашивал — можно ли сделать так, чтоб меню слева грузилось после всего остального, пришлось ответить отказом.

cyber

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

Елена

у меня много блогов. И практически на всех стоят 2 сайтбара

саша

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

StereoMaster

«Порталы» уже вышли из моды. Да и два сайдбара остались только в доисторических версиях. Сейчас распределение контента по странице делается более гибко и оптимально.

Ваш комментарий
адрес не будет опубликован

ХТМЛ не работает

Ctrl + Enter
Популярное