8 800 775 72 60
Что выбрать: адаптивный дизайн или мобильную версию сайта?
logo Site Elite Studio
Что выбрать: адаптивный дизайн или мобильную версию сайта?
19 февраля 2021

Что выбрать: адаптивный дизайн или мобильную версию сайта?

≈ 4 мин. 562
Оглавление
Давайте дружить!

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

Что вы узнаете из статьи:

  • почему mobile-friendly сайты лучше ранжируются
  • что такое адаптивный дизайн и в чем его преимущества
  • чем мобильная версия отличается от основного сайта
  • какой сайт более функционален
  • как проверить адаптивность сайта

Рост мобильного трафика и новые алгоритмы

В январе 2021 года Hootsuite опубликовал отчет о поведении пользователей интернета. 55,7% пользователей открывали сайты на смартфонах — за год цифра выросла почти на 5%.

Смартфоны генерируют больше веб-трафика, чем все остальные устройства суммарно

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

В апреле 2015-го Google запустил алгоритм Mobile friendly. «Владивосток» от Яндекса заработал в феврале 2016-го. Они затрагивали результаты поиска на смартфонах.

С июля 2018-го в Google применяет mobile-first indexing. Не важно, с какого устройства пользователь зашел в интернет. В поисковой выдаче Google выше показывает mobile-friendly сайты.

Первоначально Google планировал применить технологию mobile-first indexing для всех сайтов в сентябре 2020 года. Но потом перенес сроки на март 2021-го.

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

Что оценивают поисковики?

Есть несколько признаков, по которым можно оценить качество адаптации сайта:

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

Для поисковиков нет «золотой середины»: ваш сайт или mobile friendly, или нет.

Основные способы адаптации сайта

Взвесим их преимущества и недостатки и найдем оптимальное решение.

Адаптивный дизайн

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

Преимущества адаптивного дизайна:

  1. Для всего контента используют единый URL — плюс для SEO-оптимизации.
  2. Относительно несложно разработать — помогут разные фреймворки, например, Bootstrap. В итоге можно получить гибкий интерфейс и настроить сайт так, чтобы он комфортно отображался на экранах разной ширины. Поддерживать такой продукт тоже достаточно просто.
  3. Алгоритмы проверяют, удобен ли сайт для просмотра с мобильных девайсов. Адаптивные сайты соответствуют этим требованиям.
  4. Одобрение поисковиков. Мобильным пользователям комфортно просматривать адаптивные сайты. Поведенческие факторы улучшаются, поэтому растут и общие показатели веб-ресурса. Сайт поднимается в поисковой выдаче.

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

  1. На всех устройствах загружается одинаковый объем контента. Поэтому сайт может открываться дольше.
  2. Для каждого разрешения экрана надо создать свой макет. Трудно добавить новый шаблон страницы — чтобы он корректно отображался в адаптивной версии, шаблон надо настроить.
  3. Одно устройство = один макет. То есть пользователь видит только одно отображение сайта и не может на смартфоне посмотреть, как эта же страница смотрится на компьютере. Когда этот момент критичен? Например, если в адаптивной версии есть ошибки: элементы отображаются некорректно.

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

Отличается от основного сайта URL-адресом и структурой дизайна. Предназначена только для мобильных устройств.

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

Преимущества мобильной версии:

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

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

  1. Изменения на сайт приходится вносить дважды (в обе версии).
  2. Многие функции и контент недоступны в мобильной версии.
  3. Для мобильной версии используют поддомен. Это хуже для SEO-оптимизации — мобильная версия не улучшает поведенческие факторы основного домена.
  4. Может появляться ошибка 404. Пользователь находится в мобильной версии, переходит из выдачи на страницу основного сайта, но функционал на поддомене ограничен и такой страницы не существует.
  5. SEO-специалисту нужно дополнительно настроить сайт и URL.
  6. Стоимость создания и обслуживания.

RESS (Responsive Design + Server Side)

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

Недостатки RESS:

  1. Сложно реализовать.
  2. Технология определения устройства несовершенна.

Адаптивная верстка или мобильная версия сайта?

Мы используем адаптивную верстку.

Как проверить мобильную адаптацию

Яндекс.Вебмастер проводит полную диагностику сайта и оценивает его оптимизацию для мобильных устройств:

Mobile-friendly от Google анализирует URL:

Если вы только задумались о создании сайта или у вас уже есть страница в интернете, но она не адаптирована под разные устройства, обращайтесь к нам!

Автор: Site Elite Все статьи автора
Давайте дружить!
Похожие статьи
Вам также будет интересно
Контакты

Нужна встреча, чтобы
принять решение?

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

vladimir

Владимир Варич
Коммерческий директор
+7 (920) 699-82-04
E-mail: vladimir@st-lt.ru

olga

Ольга Гайдукова
Руководитель отдела продаж
+7 (967) 555-98-77
E-mail: olga@st-lt.ru