Дизайн сайтов как фактор SEO-рейтинга в 2022 году. Неочевидные нюансы в дизайне

Гугл 2022 стали учитывать мобильные версии сайтов как основные при ранжировании.

Все веб-сайты требуют адаптивного дизайна. Не у всех владельцев сайтов есть свободные средства для выполнения работ по дизайну интерфейса.

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

Дизайн веб-сайта как фактор ранжирования в SEO

Дизайн веб-сайта стал фактором ранжирования в поисковых системах. Заявление опубликовано на официальном сайте Веб-сайт Google.

Google:

Индексирование с приоритетом мобильных устройств включено по умолчанию для всех новых сайтов (недавно опубликованных или ранее не индексированных Google).

Узнайте больше об индексе Mobile First в блоге MegaIndex по ссылке ниже — Mobile SEO — Практические рекомендации.

В результате этих изменений индекс поисковой системы стал унифицированным.

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

ВНИМАНИЕ! Если вы намеренно разместили в мобильной версии меньше контента, чем в стандартной, учтите, что после включения нового метода индексирования трафик может снизиться. Это связано с тем, что робот Googlebot не найдет на странице те же данные, которые он получил ранее.

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

Рекомендуемый материал в блоге MegaIndex на тему проверки сайта по ссылке ниже — Как бесплатно проверить оптимизацию сайта под мобильные устройства с помощью Google DevTools?

Создание адаптивного веб-сайта — достижимая задача для большинства владельцев веб-сайтов.

Но учитывая важные нюансы при проектировании интерфейса, возникают проблемы.

Например, мало кто принимает во внимание адаптация шаблона сайта по высоте окно браузера.

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

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

Используйте рекомендации на практике, когда редизайн сайт.

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

Адаптивный дизайн: высокие блоки

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

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

Гипотезы и реальность.

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

Но есть способы улучшить взаимодействие с пользователем на вашем сайте.

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

Такой образ мышления позволяет использовать максимально разрешенный плотность информации.

Элементы навигации должны отображаться на весь экран. Когда размер высоты небольшой, следует уменьшить следующие значения:

• Символьный шрифт;
• Высота линии.

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

Такой подход встречается крайне редко. Но реализация на практике крайне проста.

Существует два основных метода обработки контента на разной высоте. Методы:

• Вертикальные медиазапросы;
• Оконные блоки.

Вертикальные медиазапросы. Пример реализации:

@media (min-height: 500px) {
  .element {
    /* стили */
  }
}

/* ИЛИ */

@media (orientation: landscape) {
  .element {
    /* стили */
  }
}

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

Они определяются следующим образом:

• вв – мягкость;
• вх — высота.

Пример:

height: 25vh

25% высоты окна.

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

Пример реализации:

.hero__title {
  margin-bottom: calc(10px + 5vh);
}

Получается, что чем больше окно браузера, тем больше расстояние между элементами:

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

• Запросы средств массовой информации;
• Функции сравнения CSS.

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

@media (min-width: 2200px) {
  .hero__title {
    margin-bottom: 40px;
  }
}

Второй способ — использовать функцию CSS. выжать(). Минимальный размер отступа устанавливаем 10 пикселей, максимальный — 50 пикселей, значения между этими двумя зависят от размера окна браузера:

.hero__title {
  margin-bottom: clamp(10px, 5vh, 40px);
}

Мы нашли пути решения. Теперь рассмотрим примеры решения распространенных задач.

Примеры

1 – Наложение контента

Элементы страницы часто перекрываются при изменении высоты окна браузера.

Сайт хорошо выглядит на большом экране.

Но на меньшем экране элементы сайта перекрывают важные разделы.

Варианты решения таких проблем:

• Установите фиксированные размеры изображений: ширину, высоту. Часто указывается только ширина. Проблема возникает из-за отсутствия свойства высоты;
• Применить свойство к верхнему разделу страницы высота: 100вх в случае, если высота области просмотра больше, например 700 пикселей.

Есть вариант совместить оба подхода и получить более надежное решение проблемы:

.hero__thumb {
  width: 400px;
  height: 300px;
  object-fit: contain; /* Чтобы изображение не сжималось */
}

@media (min-height: 700px) {
  .hero {
    height: 100vh;
  }
}

Бывает и так, что блок покрыт текстом.

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

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

Пример реализации:

@media (минимальная высота: 700 пикселей) {
.hero {
минимальная высота: 100 вч;
}
}

2 – фиксированный заголовок страницы.

Часто заголовки зависают при прокрутке. А вот высоту экрана редко учитывают.

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

Имеет смысл скрыть заголовок, если пользователь просматривает страницу в альбомном режиме.

Пример кода, в котором ландшафтный режим заголовок не будет сохранен:

@media (min-height: 700px) {
  .site-header {
    /* position: fixed */
  }
}

3 – Скрыть менее важные элементы

Похожий сценарий применим и к Twitter. Этот подход важно использовать на коммерческих сайтах.

Идея такова — При изменении высоты окна менее важные элементы удаляются и добавляются в раздел. Более.

Пример реализации:

.nav__item--secondary {
  display: none;
}

@media (min-height: 700px) {
  .nav__item--secondary {
    display: block;
  }
}

4 — Уменьшите расстояние в элементах навигации

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

Пример реализации:

.nav__item {
  padding-top: 4px;
  padding-bottom: 4px;
}

@media (min-height: 700px) {
  .nav__item {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

В результате на экране отобразятся все важные элементы навигации.

5 — Высота заголовка на странице.

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

Имеет смысл соотнести количество свободного пространства с высотой зоны просмотра. Чем больше окно, в котором открыта страница, тем она больше.

Пример реализации:

.hero {
  padding-top: 24px;
  padding-bottom: 24px;
}

@media (min-height: 700px) {
  .hero {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

6 – Всплывающие окна

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

Правильный способ выровнять окна — центрировать экран. Пример реализации:

.modal__body {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
}

Если во всплывающем окне много текста, элемент заполнит весь экран по вертикали; такое часто случается на практике.

Есть способ решить проблему. Пример реализации:

.modal__body {
  position: absolute;
  left: 50%;
  top: 3rem;
  transform: translateX(-50%);
  width: 500px;
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
}

@media (min-height: 700px) {
  .modal__body {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

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

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

выводы

Как дизайн сайта влияет на продвижение? Воздействие в разных направлениях:

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

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

Полезные советы, которые помогут подготовить ваш сайт. Индекс Mobile First будет применяться ко всем сайтам. Какие задержки? Как подготовить сайт? Распространенные ошибки.

Как создать дизайн веб-сайта более подходящий для разных устройств? Следует учитывать следующие нюансы:

• Учет рендеринга окон по ширине и высоте;
• Скорость загрузки;
• Разместите основной контент выше в шаблоне страницы.

Настройка дизайна сайта минимальна, но это влияет для продвижения и конверсии.

Учет показов сайта вертикально ориентирован на потребности пользователей, что также означает также может повысить значение показателя конверсии.

Практические советы по реализации описаны выше.

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

Теперь обратите внимание, как сайт отображается в окнах разной высоты? Что вы думаете об учете высоты окна при разработке дизайна? Напишите в комментариях.