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

Сервисы для онлайн-проверки адаптивности сайта

    1. Google Mobile Friendly — https://search.google.com/test/mobile-friendly

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

Преимущества

  • Официальный сервис Google.
  • Указывает на конкретные ошибки.
  • Умеет сам определять наличие мобильной версии.

Недостатки

  • Нельзя посмотреть, как выглядит сайт при разных размерах экрана.
  • Показывает только первый экран, нельзя взаимодействовать с сайтом.
  1. Яндекс.Вебмастер Mobile Friendly — https://webmaster.yandex.ru/site/tools/mobile-friendly/

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

Преимущества

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

Недостатки

  • Проверить можно только свои сайты.
  • Нет возможности посмотреть, как выглядит сайт на разных экранах
  1. Quirktools — http://quirktools.com/screenfly/

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

Преимущества

  • Можно выбрать из готового списка устройств или задать собственное разрешение
  • Можно взаимодействовать с сайтом

Недостатки

  • Не умеет определять наличие мобильной версии
  • Нет списка ошибок
    1. Iloveadaptive — http://iloveadaptive.com/

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

Преимущества

  • Есть возможность посмотреть, как выглядит сайт на разных операционных системах (IOS и Android)
  • Сам понимает, есть ли мобильная версия
  • Расширение для Google Chrome

Недостатки

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

  1. Adaptivator — http://adaptivator.ru/

Преимущества

  • Подводит общую оценку качеству оптимизации, дает советы по исправлению ошибок.
  • «Не видит» мобильную версию.
  • Нет возможности указать свой размер экрана.

Недостатки

  • «Не видит» мобильную версию.
  • Нет возможности указать свой размер экрана.

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

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

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

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

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

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

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

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

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

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

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

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

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

Плюсы

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

Минусы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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