Тестируем мобильную версию сайта: алгоритм действий

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

Мы не устанем повторять: бо́льшая часть поискового трафика идёт с мобильных устройств. Не оптимизируете сайт – теряете аудиторию. Всё просто. Самые опасные ошибки мобильных версий мы разбирали в отдельной статье. А здесь расскажем, как проверить ваш сайт без дорогих инструментов и привлечения специалистов. 

Зайдите на сайт с телефона

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

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

1 Проверка мобильной версии сайта

Конечно же, обычным просмотром дело не закончится. Но с него стоит начать. Запишите всё, что вам покажется неправильным. Привлеките к тестированию друзей, семью и коллег. Пусть посмотрят со своей стороны. На что нужно обратить особое внимание: 

  • Основные страницы. Убедитесь, что их легко найти. Поставьте таймер, например, на 20 секунд. Не дошли до конечной точки – значит, навигация плохая.
  • Контакты. Задача минимум – адрес и телефон должны быть копируемыми. Люди пришли к вам на сайт не для того, чтобы с экрана переписывать ваши контакты на листочек, а потом вручную вбивать их в навигатор и окно вызова. Лучше всего, конечно, сделать их кликабельными: чтобы нажатие на адрес открывало метку на карте, а на телефон – вызов.
  • Меню и поиск. Панель меню, раскладывающаяся из «гамбургера» – это уже классика.
2 Проверка мобильной версии сайта

  • Скрытое меню экономит вам место, безусловно. Но его могут не заметить пользователи. Не заметить, не найти и уйти. Поэтому добавьте ещё поиск по сайту. 
  • Адаптивность и юзабилити. Сайт, у которого мобильная версия – это уменьшенная десктопная, ужасен. Все эти маленькие значки, поля в которые нужно вглядываться, отталкивают. Если вы не можете сверстать отдельную версию для маленьких экранов, сделайте основной сайт адаптивным. Настройте всё так, чтобы элементы дизайна легко подстраивались под ориентацию и диагональ экрана пользователя.
  • Кнопки и ссылки. Они должны быть достаточно заметными и крупными, чтобы на них кликнуть с первой попытки. 
  • Читаемость. Читать с экрана сложно и при идеальных условиях, а если у вас проблемы с типографикой, можете попрощаться с тысячами посетителей. 
3 Проверка мобильной версии сайта

  • Производительность. Сайт быстро загружается? Ничего не тупит? Чат поддержки не тормозит? Что там Google написал о вашем Page Experience?

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

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

Тестировщики

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

Даже у Bing есть такой инструмент.

4 Проверка мобильной версии сайта

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

Панель инструментов веб-разработчика

Потестить ресурс можно и из браузера. Откройте свой сайт и нажмите F12 в верхнем ряду клавиатуры. Если ничего не открылось (или открылось что-то, что не похоже на картинку ниже), то кликните правой кнопкой мыши и выберите «Просмотреть код», «Исследовать страницу» или что-то подобное. 

5 Проверка мобильной версии сайта

Здесь мы смотрим, есть ли сверху такая панелька.

6 Проверка мобильной версии сайта

Если нет, открываем её кликом по этому значку:

7 Проверка мобильной версии сайта

А дальше – развлекайтесь. В раскладывающемся меню выбирайте разные модели смартфонов. 

8 Проверка мобильной версии сайта

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

Тестирование производительности

Вид сайта – это ещё не всё. Нужно, чтобы всё ещё и загружалось быстро. Вы не сможете исправить медленный интернет, но с медленным сайтом разобраться придётся. Здесь, опять же, есть множество простых инструментов. В том числе, PageSpeed Insights от Google. Быстрый аудит сайта покажет вам, что его замедляет и потенциально отпугивает посетителей. 

9 Проверка мобильной версии сайта

Подытожим

Мобильная или хорошо адаптированная версия сайта – это даже не половина успеха, а больше. Если посетителю не нравится сайт, он не купит товар. До него пользователь даже не дойдёт. Нет позитивного опыта – нет клиента – нет денег. Предлагаем вам другую цепочку: хороший сайт – хорошая посещаемость – хорошая конверсия – хорошая прибыль. Мы даже готовы помочь вам выстроить эту цепочку. Обращайтесь!

Связаться с нами

Нажимая на кнопку "Отправить" вы соглашаетесь с политикой обработки данных!