"Больше не означает лучше". Чтобы создать привлекательный контент для поколения пользователей, которые за один день поглощают больше информации, чем их родители - за месяц, есть только один секрет: будьте точными и краткими. Таким образом, улучшится читабельность контента, а время его загрузки существенно сократится.
Меню и навигация: стратегическое позиционирование элементов
- Расположите меню в верхней части страницы, чтобы организовать пользователям удобный доступ ко всем основным страницам сайта. Анкорный текст ссылок меню должен содержать основные ключевые слова. Расположите меню горизонтально, если в нем немного пунктов, или вертикально, если меню содержит большое количество элементов.
- Вложенные пункты меню должны быть не менее заметны, чем основные элементы. Не спрашивайте себя, почему Вы не получаете трафик для этих разделов, в случае, если их просто нельзя увидеть. Также, обратите внимание, что nofollow-разделы, которые кажутся Вам несущественными с точки зрения продвижения сайта, не обязательно будут неинтересны Вашим посетителям.
- Избегайте, насколько возможно, вложенных пунктов меню третьего уровня. Намного легче воспринимается контент, до которого легко добраться. Используйте 2-уровневое меню или списки.
- Разработайте правильную стратегию внутренней перелинковки. Расположите на главной странице прямые ссылки на важные страницы Вашего сайта. Это не только улучшит оптимизацию, но и повысит конверсию.
- Избегайте использования кнопки "назад". Это слишком явно указывает на недоработки в навигации. Вместо этого, используйте breadcrumb-навигацию («Хлебные крошки» - путь по сайту от его «корня» до текущей страницы, на которой находится пользователь).
Цвета повышают узнаваемость бренда и читабельность текста
Выберите для своего сайта подходящую палитру из 3-4 цветов, которые хорошо сочетаются между собой. Вам нужны:
- 1 интенсивный, яркий цвет, чтобы подчеркнуть важную информацию. Его можно использовать для ссылок и заголовков H1-6
- 1 читабельный цвет для основного контента. Этот цвет не должен сливаться с фоном и вызывать напряжение зрения.
- Не больше 2 характерных цветов, которые символизируют образ (стиль) веб-сайта. Эти цвета должны гармонировать с двумя предыдущими.
- Не забывайте, что яркими и динамичными должны быть цвета заголовков и ссылок, а спокойными, расслабляющими - цвета фона и основного текста. Если Вам нужно больше цветов, выбирайте оттенки тех цветов, которые уже присутствуют в основной палитре.
Графика и шрифты: качество оптимизации не должно пострадать от того, что 90% пользователей не увидят разницы
Обдумайте серьезно, какова Ваша целевая аудитория, и насколько продвинутый дизайн оправдывает увеличение времени загрузки. А потом спросите себя: неужели эти изменения настолько необходимы? Ответ не обязательно отрицательный, некоторые детали действительно могут придать Вашему сайту индивидуальность и выделить его среди конкурентов. Главное, соблюдать умеренность.
- Если вы настаиваете на использовании особого шрифта или визуального эффекта, спросите себя, оправдано ли в этом случае применение Flash или JavaScript, и, соответственно, увеличение времени загрузки.
- Если да, убедитесь, что использование этого эффекта не повредит Вашей SEO-кампании.
- Если Вы собираетесь использовать Flash-меню, создайте соответствующую HTML-замену. Это улучшит оптимизацию и ускорит индексацию.
- Отдавайте предпочтение красивым кнопкам и оригинальным деталям, а не тяжелым бэкграундам и изображениям.
- Не утомляйте посетителей большим количеством графики и визуального контента.
- Не забывайте использовать основные ключевые слова в названиях изображений и alt-описаниях.
Применение вышеприведенных подсказок не только улучшит дизайн, но и усовершенствует структуру сайта и организацию контента, а также окажет положительный эффект на оптимизацию, так как уменьшится время загрузки и упростится процесс индексации.
Полезные советы спасибо большое, про меню очень компетентно описано
Внешний вид сайта – это самое первое, на что обращает внимание пользователь, очень пригодились советы по цветовом оформлении. Спасибо.
Столько статей на эту тему написано. Приятно прочитать что-то новое. Спасибо за информацию.
Спасибо автору за статью ! много интересного нашел для себя =)
спасибо и от меня. помогли чайнику =)
Старина Че плохого не посоветует. No passaran! ))
очень все хорошо написано, автору огромнейшее спасибо, обязательно воспользуюсь подсказками
… хочется ещё добавить, что читабельность шрифта и соответственно текста в целом зависит ещё и от насыщения штифта.
При подборе шрифта не забывайте, что шрифт по наполнению бывает “резкий”, “чёткий”, “насыщенный” и “плавный”
и каждое наполнение смотрится по разному…. не ленитесь опробовать все. Все эти настройки заложены в самих шрифтах. Старайтесь пользоваться только профессиональными – там все эти настройки присутствуют.
Zerber, веб-шрифтов (без хвостиков) по сути не так уж и много: Verdana, Tahoma, Arial. Для основного текста использовать другие варианты не только глупо (т.к. у пользователя может отсутствовать шрифт выбранный вашей фантазией), но это еще и демонстрация абсолютной безграмотности оформления CSS (проще говоря – удел школьников)
А для меня СЕО-совместимый веб-дизайн сводится к подбору “некислотных” цветов и грамотному расположению блоков контекстной рекламы.
А что касается вечного спора “важен дизайн или нет?”, то зайдите на главную страничку Гугла и гляньте сколько “много” там красивых графических наворотов. Аж ниодного!
> Зайдите на главную страничку Гугла и гляньте..
Это свидетельствует о крутости их дизайна, а вовсе НЕ об отсутствии.
Добавить бы реальных примеров, было бы вообще шик!
А меня чисто фотка вдохновила написать комментарий. ЧЕ объясняет что то вроде плана… Задумка хорошая у фотографии
Статья неплохая. Для себя важное подчеркнул. Спасибо автору
Content is the King, остальное, как говорится, вторичное.
лучшее правило дизайна- если элемент дизайна не является необходимым уберите его(огромное кол-во анимаций флеша и тд)
Статья полезна и понятна, спасибо )
Жаль, однако, что клиенты не понимают того, что много анимации на flash – далеко не всегда залог большой посещаемости сайта ))
Я считаю что красота это хорошо, но самое главное чтобы пользователь ориентировался без проблем.
Навигация по сайту а также качественный и интересный контент всегда поможет вернуть посетителя на сайт!
Хорошая статья!
Немного дополню – чтобы выделить текст, можно использовать плагин подсветки текста Special Text Boxes.
breadcrumb-навигация это плагин такой? Объясните, плз, подробнее немного.
И еще вопрос. Зачем на внутренние страницы ставить nofollow?
Кстати все что вы написли касаемо сео, в яндексе все это работает в противоположную сторону, и вообще давно заметил, сайты которые убогие дизайном и оптимизацией выстреливают
Я тут с одной точкой зрения согласен!! На счет удобства…А то красиво все сделают, а разобраться вообще не получается Что прикажете тогда делать?
2 Антон, на внутренние страницы мы ставить nofollow дабы вес страницы не разбазаривать.
А насчёт дизайна скажу, сайт делают в основном для заказчика, а надо делать под пользователя.
Меню и блоки располагать в привычных местах, так быстрее пользователь находит полезную информацию.
Запоминающийся дизайн, сочетающийся с предельной простотой навигации заставят читателей возвращаться вновь и вновь. Раскрученным блогам прощают уже и двухколоночные сайдбары с кучей разделов, но начинающим лучше одна тонкая колонка с минимумом баннеров.
deSiter, начинающим лучше не минимум баннеров, а полное их отсутствие. Иначе можно спокойно сразу же попасть под фильтр поисковиков, как сайта/блога, не несущего полезной информации и созданного только для рекламы.
По теме скажу лишь то, что лично я категорически неприемлю яркие цвета, даже для выделения важных мыслей в статье. А уж сайты пестрящие всеми цветами радуги, говорят лишь о безвкусии владельца и об отсутствии стиля. Хотя может быть для кого-то кич тоже стиль…
правильно, в первую очередь все должно быть удобно с точки зрения пользователя!