Адаптивность сайта: почему так важна, и как её проверить

Что такое адаптивность сайта?

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

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

Почему важен адаптивный дизайн

Сейчас более 60% пользователей (по данным Яндекс Радар) посещают сайты с гаджетов: планшетов, смартфонов.

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

Фактор юзабилити

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

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

SEO фактор

С 2018 года Google при ранжировании сайтов следует правилу Mobile-first index. Это означает, что гугл в первую очередь анализирует контент, который отображается на мобильных устройствах. А ранжирование десктопных версий сайтов теперь подчиняется мобильной выдаче. Причем содержимое мобильной и десктопной версий должно быть идентичным, от сюда вытекает: приоритет отдается именно адаптивным ресурсам. Yandex к стати тоже учитывает Mobile-first.

Если сайт, не адаптированный под мобильные устройства с небольшим экраном (от 320 px), неизбежно теряет мобильный трафик из поисковых систем.

Адаптивность — один из прямых факторов ранжирования. Поисковые системы учитывают, насколько сайт «mobile-friendly», и если нет — понижают его в рейтинге.

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

Адаптивная верстка намного приоритетнее в плане SEO — т.к. это один сайт, под разные типы устройств. Да и в плане администрирования сайта проще управлять одним чем двумя, ведь мобильная версия сайта — это по сути, отдельный сайт (не всегда конечно, но все же), который создается специально для отображения на маленьких экранах.

Инструменты для проверки адаптивности сайта

Mobile Friendly Test

Mobile Friendly Test — простейший инструмент от Google. Укажите страницу любого сайта и  если она не оптимизирована, сервис подскажет, в чем именно проблема (мелкий шрифт, не задано значение тега viewport и др.).

Яндекс.Вебмастер

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

Google Search Console

Если ваш сайт добавлен в Google Search Console, то вы можете посмотреть все не удобные страницы с мобильных устройств.

Отмечаем проблемы с адаптивностью сайта в отчетах веб-аналитики

В Яндекс.Метрика можно увидеть проблемы с адаптивностью сайта с помощью отчетов группы «Технологии». К примеру, идем в «Браузеры» и видим большое количество отказов:

В Google Analytics отчеты находятся в «Аудитория» → «Технологии», а также «Аудитория» → «Мобильные устройства». Можно получить много интересных инсайтов, например, с какого устройства больше совершается конверсий (на скриншоте видно, что лидирует Apple iPhone). Главное, не слишком строго смотреть на отказы, так как в Google Analytics они показывают посещение одной страницы, не важно как долго (а не уход в течение 15 секунд, как в Яндекс.Метрике).

I love adaptive

I love adaptive — бесплатный и дружелюбный сервис для тестирования адаптивности сайта. Можно выбрать модель устройства или задать произвольный размер экрана. Во время проверки можно взаимодействовать: переходить по ссылкам, нажимать на кнопки и пр.

Так же есть adaptivator, но он мало чем отличается от Mobile Friendly Test (Google).

Firefox Developer Edition

Firefox Developer Edition — браузер настроенный специально под веб-разработчиков, у него есть режим адаптивного дизайна, который позволяет тестировать сайты на эмулируемых устройствах прямо в браузере.

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