Наверх
8 800 350 55 01
+7 (495) 118-22-22
/
/
Адаптивный дизайн или мобильная версия – делаем осознанный выбор
В тренде

Адаптивный дизайн или мобильная версия – делаем осознанный выбор

30.10.2018 Время прочтения: 6 минут

В чем разница между адаптивным дизайном и мобильной версией?

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

Мобильная версия – это отдельный и в каком-то смысле обособленный от основного ресурс. В большинстве случаев это сокращенный вариант с отдельным адресом, на который посетитель попадает с помощью редиректа.

Вот, например, соцсеть «ВКонтакте». Так она открывается с десктопа:

vk.com desktop

И вот так – с мобильного:

vk.com mobile

Мобильная версия находится на поддомене – m.vk.com, поэтому ее мы видим урезанной. Это не копия декстопной версии, но и кардинальной разницы между ними нет.

Адаптивный дизайн – это масштабируемый и/или перестраиваемый основной сайт. Веб-ресурс адаптируется под размеры экрана без переноса на отдельный адрес. Этот тот же самый контент без сокращений, что и на основном ресурсе, просто сверстанный в другом порядке.

Возьмем для примера образовательный онлайн-проект «Арзамас». Вот он с десктопа:

arzamas desktop

А вот – с мобильного:

arzamas mobile

И там, и там – на одном адресе одно и то же содержимое, но показано по-разному в зависимости от устройства.

Плюсы и минусы мобильной версии и адаптива

 

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

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

Плюсы

  • Обычно нет избытка функций, поэтому вносить изменения проще.
  • Пользователю удобно просматривать страницы, он не натыкается на лишнее.
  • Сайт может загружаться быстрее, поскольку не перегружен данными.
  • Пользователь всегда может перейти на основную версию, если мобильная ему неудобна.
  • Несложно реализовать.
  • Не надо создавать новые URL.
  • Не надо использовать редиректы.
  • Его любят поисковики (особенно Google).

Минусы

  • Из-за нескольких адресов и одного контента поисковая система может наложить санкции за дублированный контент.
  • Пользователю надо запоминать еще один адрес.
  • Приходится выбирать и ограничивать контент и возможности, которые на одной версии будут доступны, а на другой – нет.
  • Сложно определиться, как именно адаптировать, так как разные пользователи решают разные задачи.
  • Сайт может загружаться медленнее, поскольку имеет тот же вес, что и для десктопа.
  • Если пользователю неудобно, он не может просто переключиться на версию «как на десктопе», как в случае с мобильной версией.

Что лучше для SEO – адаптив или мобильная версия?

Если проводится оптимизация сайта для Google, то тут без вариантов – в компании настойчиво рекомендуют адаптивный дизайн. Среди аргументов много важных для поискового продвижения факторов:

  • пользователям проще расшаривать контент, если он находится на одном URL;
  • алгоритмы Google видят одну страницу, а не разные ее версии;
  • уменьшается вероятность типичных для мобильных сайтов ошибок;
  • возможны проблемы с загрузкой из-за редиректа и агентов пользователя;
  • Googlebot быстрее и исправнее сканирует страницы с адаптивной версткой.

Яндекс утверждает, что разницы нет: «[Формула ранжирования сайтов по оптимизированности для смартфонов] «Владивосток» учитывает любые способы оптимизации сайта для мобильных – и мобильную версию с отдельным URL, и адаптивный дизайн, и динамический показ. У алгоритма нет каких-то особых предпочтений, поэтому решение, каким образом оптимизировать веб-сайт и веб-страницу для мобильных, мы оставляем целиком на усмотрение веб-мастеров».

SEO-специалисты нашей компании согласны с Google: для поискового продвижения лучше адаптив, потому что нет дублирования и урезания контента, портал проще и быстрее администрировать. К тому же, как правило, это проще (а значит быстрее) в исполнении и дешевле для клиента.

Проверка адаптивности сайта на разных устройствах: сервисы поисковиков

Google и Яндекс создали собственные сервисы, с помощью которых можно проверить адаптивность сайта онлайн.  

yandex webmaster

Для проверки адаптивности сайтов сервисы используют примерно один и тот же интерфейс: в строку адреса вводится URL главной страницы, алгоритм оценивает «мобильную пригодность» и выводит результат. Но, конечно, у каждой поисковой системы свои роботы и аналитические параметры, поэтому логичнее выбирать сервис по поисковику, в котором идет продвижение: продвигаетесь в Google, значит, и проверять сайт на адаптивность в Google; оптимизируетесь для Яндекса – смотрите данные в Вебмастере.

Сторонние сервисы

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

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

На что обращать внимание?

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

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

  • Кнопки с действием («Купить», «Оформить заказ», «Зарегистрироваться») должны быть яркими, заметными и достаточно крупными.
  • Весь контент должен соответствовать размеру экрана, чтобы не было горизонтальной прокрутки.
  • Тексты должны быть опубликованы крупным шрифтом.
  • Интерактивные элементы должны располагаться так, чтобы пользователь мог кликать на один, не попадая на другие.
  • Не должно быть форматов, которые с мобильного работают некорректно или не работают совсем.

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

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

non mobile yandex

Если проверять адаптивность сайта с помощью сервиса Google, то на неоптимизированный веб-ресурс он будет ругаться:

non mobile google

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

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

Также анализируйте данные Вебвизора и карты кликов в Яндекс.Метрике – это поможет выявить возможные недостатки дизайна.

Пусть другие тоже знают!

Еще на эту тему

Как правильно зарегистрировать свой сайт в поисковых системах?
Как правильно зарегистрировать свой сайт в поисковых системах?
Разбираемся, как правильно зарегистрировать сайт в поисковых...
11.09.2018 11678
Показать еще материалы

Другие интересные статьи

Почему контекстная реклама не работает и что с этим делать?
Почему контекстная реклама не работает и что с этим делать?
Что делать, когда контекст не работает? Возможно, причина кр...
19.12.2018 1254
Таргетинг в социальных сетях: что это и как работает
Таргетинг в социальных сетях: что это и как работает
Рассмотрим базовые понятия таргетированной рекламы в социаль...
01.11.2018 1526
SEO-фрагменты (SEO Snippets) Google: полезно ли для SEO удаление .html из URL сайта?
SEO-фрагменты (SEO Snippets) Google: полезно ли для SEO удаление .html из U ...
Сегодня отвечаем на вопрос Джеймса из Объединённого Королевс...
07.05.2018 1140
Показать еще материалы