Основные правила выразительного и SEO-совместимого веб-дизайна

«Больше не означает лучше». Чтобы создать привлекательный контент для поколения пользователей, которые за один день поглощают больше информации, чем их родители — за месяц, есть только один секрет: будьте точными и краткими. Таким образом, улучшится читабельность контента, а время его загрузки существенно сократится.

Меню и навигация: стратегическое позиционирование элементов

  1. Расположите меню в верхней части страницы, чтобы организовать пользователям удобный доступ ко всем основным страницам сайта. Анкорный текст ссылок меню должен содержать основные ключевые слова. Расположите меню горизонтально, если в нем немного пунктов, или вертикально, если меню содержит большое количество элементов.
  2. Вложенные пункты меню должны быть не менее заметны, чем основные элементы. Не спрашивайте себя, почему Вы не получаете трафик для этих разделов, в случае, если их просто нельзя увидеть. Также, обратите внимание, что nofollow-разделы, которые кажутся Вам несущественными с точки зрения продвижения сайта, не обязательно будут неинтересны Вашим посетителям.
  3. Избегайте, насколько возможно, вложенных пунктов меню третьего уровня. Намного легче воспринимается контент, до которого легко добраться. Используйте 2-уровневое меню или списки.
  4. Разработайте правильную стратегию внутренней перелинковки. Расположите на главной странице прямые ссылки на важные страницы Вашего сайта. Это не только улучшит оптимизацию, но и повысит конверсию.
  5. Избегайте использования кнопки «назад». Это слишком явно указывает на недоработки в навигации. Вместо этого, используйте breadcrumb-навигацию («Хлебные крошки» — путь по сайту от его «корня» до текущей страницы, на которой находится пользователь).

Цвета повышают узнаваемость бренда и читабельность текста

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

  1. 1 интенсивный, яркий цвет, чтобы подчеркнуть важную информацию. Его можно использовать для ссылок и заголовков H1-6
  2. 1 читабельный цвет для основного контента. Этот цвет не должен сливаться с фоном и вызывать напряжение зрения.
  3. Не больше 2 характерных цветов, которые символизируют образ (стиль) веб-сайта. Эти цвета должны гармонировать с двумя предыдущими.
  4. Не забывайте, что яркими и динамичными должны быть цвета заголовков и ссылок, а спокойными, расслабляющими — цвета фона и основного текста. Если Вам нужно больше цветов, выбирайте оттенки тех цветов, которые уже присутствуют в основной палитре.

Графика и шрифты: качество оптимизации не должно пострадать от того, что 90% пользователей не увидят разницы

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

  1. Если вы настаиваете на использовании особого шрифта или визуального эффекта, спросите себя, оправдано ли в этом случае применение Flash или JavaScript, и, соответственно, увеличение времени загрузки.
  2. Если да, убедитесь, что использование этого эффекта не повредит Вашей SEO-кампании.
  3. Если Вы собираетесь использовать Flash-меню, создайте соответствующую HTMLзамену. Это улучшит оптимизацию и ускорит индексацию.
  4. Отдавайте предпочтение красивым кнопкам и оригинальным деталям, а не тяжелым бэкграундам и изображениям.
  5. Не утомляйте посетителей большим количеством графики и визуального контента.
  6. Не забывайте использовать основные ключевые слова в названиях изображений и alt-описаниях.

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

Комменатрии на тему “Основные правила выразительного и SEO-совместимого веб-дизайна

  1. Внешний вид сайта – это самое первое, на что обращает внимание пользователь, очень пригодились советы по цветовом оформлении. Спасибо.

  2. Хочется ещё добавить, что читабельность шрифта и соответственно текста в целом зависит ещё и от насыщения штифта.
    При подборе шрифта не забывайте, что шрифт по наполнению бывает “резкий”, “чёткий”, “насыщенный” и “плавный”
    и каждое наполнение смотрится по разному…. не ленитесь опробовать все. Все эти настройки заложены в самих шрифтах. Старайтесь пользоваться только профессиональными – там все эти настройки присутствуют.

  3. Все четко расписано, но есть одно НО — Яндекс, например, любит много контента, иногда даже ОЧЕНЬ много. Так что заморачиваться чисто под гугл смысла не вижу.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *