Как адаптировать сайт к мобильному трафику

Как адаптировать сайт к мобильному трафику

16.12.2016

Какую реализацию выбрать при решении доработать сайт под мобильного пользователя? Использовать мобильную версию сайта или сделать текущую верстку адаптивной?

Варианты решения

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

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

Адаптивная верстка

Главная особенность - при загрузке страницы с любого типа устройства будет загружен одинаковый код страницы. Поисковая система Google при настройке mobile-friendly рекомендует делать именно так.

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

Основные преимущества:

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

Недостатки адаптивной верстки:

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

Мобильная версия сайта

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

Основные преимущества:

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

Недостатки мобильной версии:

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

Что выбрать

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

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