Как вам новый дизайн на моем блоге?

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

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

Почему решил сменить тему

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

• Безопасность сайта. Старая тема не имела новых обновлений. Поэтому в ней могли быть серьезные дыры в защите. Также не было технической поддержки. Все приходилось делать самому.
• Несовместимость с новыми версиями плагинов и CMS. Уже были первые звоночки.
• Плохой код и адаптация под разные разрешения экрана.

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

1. Нужны немалые деньги. Плюс ко всему, каждый год нужно платить за возможность получать обновления темы и техническую поддержку.
2. В премиум темы любят пихать много лишних функций. Даже с виду простенькой минималистичной темы, в нее могут напихать много лишнего кода и каких-нибудь функций (например, seo-настройки). Весь этот функционал не только может плохо сказаться на защите сайта, но и на совместимости с различными аддонами и плагинами.
3. У меня блог. Поэтому что-то навороченное мне не нужно.

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

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

Из всех дефолтных тем WP, мне больше всего нравится Twenty Thirteen. Остальное не очень.

Но все же, я решил выбрать второй вариант. То есть бесплатную адаптивную тему Basic. Кстати, для нее есть неплохие варианты дочерних тем.

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

Каким должен быть дизайн блога

Давайте теперь поговорим про изменения в дизайне блога, а также про то, каким должен быть веб-дизайн именно для такого проекта. Вот кстати, как выглядела старая тема.

А вот, как сейчас.

Меню

Начну с меню. У меня два верхних горизонтальных меню (до и после шапки блога). Вообще, хочу сказать, что желательно использовать одно меню после хедера (шапки). Так сайт легче воспринимается.

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

Как по-вашему, где лучше?

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

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

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

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

Только убрал ссылку на главную, так как она все равно в шапке дублируется. Ну и еще убрал все иконки. Хоть они мне очень нравились, но все равно, убрал. Так пользователь больше будет фокусироваться на область с контентом.

Можно было еще сделать выпадающие страницы в меню.

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

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

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

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

Поэтому всегда продумываете свои менюшки. Старайтесь делать их более компактными и не лепить много лишнего.

Мне к сожалению, пришлось делать второе верхнее меню, так как страницы и рубрики вместе не вмещаются.

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

Шапка блога

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

Для начала, когда продумываете веб-дизайн, то если у вас блог, я рекомендую сразу в названии написать чей он. Например, «Блог Сергея Стеклова». Так вы уже даете четко понять пользователю, кто автор проекта.

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

Также не забываем и про слоган. Он должен звучать красиво и отображать общее направление самого ресурса.

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

К сожалению, у меня пока нет логотипа. Все никак руки не дойдут.

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

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

А поскольку места не так много, то мне нужно было куда-то впихнуть такой важный элемент, как поиск по блогу. В итоге, пришлось его аккуратно встроить в шапку.

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

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

Еще можно внедрить небольшое горизонтальное меню. Однако рекомендую делать только в том случае, если под шапкой отсутствует область меню.

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

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

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

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

Поэтому для юзабилити блога желательно чтобы видимая область контента занимала половину первого экрана. Так человек сможет сразу начать изучать материал. Ему не нужно дополнительно скролить вниз и искать сам контент.

Главная страница блога

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

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

Если у вас сайт компании + блог, то главную сайта делайте статичной страницей. А сам блог создаете в виде другой страницы с лентой анонсов. После этого в меню не забываем давать ссылку на эту страницу с анонсами.

И назовите такую страницу «Блог» чтобы было понятно.

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

Я так у себя добавил слайдер с подборкой хороших материалов.

По поводу анонсов.

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

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

Текст анонса должен быть небольшим (3 — максимум 4 предложения). Некоторые любят пихать много текста. В таком случае анонсы становятся очень объемными и по ним трудно ориентироваться.

Еще в анонсе должна присутствовать метаинформация о посте. Это дата публикации (обязательно нужно выводить) и рубрика.

Дополнительно еще можно вывести метки, количество комментариев и просмотров. Однако слишком не забиваете анонс лишней информацией. Выводите только самое главное.

Я так вывожу дату, рубрики и количество комментариев. Рекомендую выводить их прямо под названием статьи. Так информация не затеряется в тексте анонса.

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

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

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

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

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

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

Структура шаблона записей

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

Я лично так уже давно не считаю. По моим стандартам структура должна быть такой:

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

Я признаюсь, что после просмотра такой структуры, посещать блоги и сайты даже с одним сайдбаром мне уже как-то неуютно.

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

Система комментариев

Ну и последний важный момент для дизайна блога — это система комментариев.

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

Теперь отделяются только отступами. Без границ текст лучше воспринимается. А чтобы комментарии не сливались, я увеличил отступы.

Также немного уменьшился размер текста. Это нужно чтобы сообщения были более компактными и не занимали много места.

И во-вторых, я поставил новый визуальный редактор комментариев.

Раньше у меня был текстовый редактор.

Но я решил поменять на новый. Мне он показался более удобным для пользователя. Для вывода использую плагин Ark Commenteditor от Александра Каратаева. Спасибо ему за это полезное расширение.

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

Но с новым редактором CkEditor они не хотели работать. А в редакторе TinyMCE не выводится функция вставки примеров кода. Она работает только в CkEditor. Поэтому мне пришлось отказаться от смайлов.

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

В остальном, все осталось по-прежнему. Но напоследок еще хочу дать вам пару советов:

• Всегда делайте древовидные комментарии. Так лучше видно, кто кому отвечает.
• В дате никогда не удаляйте якорь на комментарий. Иногда пользователю нужно перейти сразу на сообщение.
• Граватарки располагайте слева и делайте размером 58 — 62 px.
• Сделайте постраничную навигацию комментариев и разбивайте страницы по 12 — 15 родительских сообщений.
• Дайте возможность пользователям вставлять фото или примеры кода в своих сообщениях.

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

Ну и последнее, что я хотел спросить: «Как вам новый дизайн на моем блоге?» Нормально или не очень?