Эффективна ли мобильная версия вашего сайта: 9 тестов и 4 сервиса, которые помогут это выяснить

По словам директора РАЭК Сергей Плуготаренко, в России мобильным интернетом пользуются 62 миллиона человек, и число посетителей Рунета увеличивается только за счет таких пользователей.

Более 86% пользователей до 24 лет постоянно используют смартфоны, а 15% выходят в сеть исключительно со смартфонов и планшетов.

Доля “мобильных” покупателей достигает 40%.

Поэтому мобильная версия сайтаэто не прихоть, а жизненная необходимость.

Для начала давайте разберемся:
Чем же отличается сайт под мобильные устройства от десктопной версии?

Всегда помните, что пользователь спешит, а потому ему нужно получить важную информацию быстро и с минимумом “телодвижений”.

Отсюда первое отличие: объем информации.

Конечно, вам очень хочется поделиться с посетителями всем контентом: статьями, видеороликами, анонсами. Но для мобильного сайта лучше ограничиться минимумом.

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

Вертикальная навигация

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

Это заметно облегчает и ускоряет навигацию.

Представьте, насколько неудобно постоянно прокручивать страницу не только вниз, но еще и в сторону.

Поэтому только вертикальное меню.

Удобные кнопки

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

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

“Легкая” графика

Откажитесь от тяжелых картинок, спецэффектов, графики, видео, flash-элементов. Всё это замедляет скорость загрузки страницы, а пользователи — народ нетерпеливый, ждать не любят.

И самое неприятное то, что если они один раз не дождались загрузки, то больше на такой сайт уже не заглянут. Значит, и шанса увидеть ваши “спецэффекты” у них нет. Совсем.

Функция телефона

У смартфона есть функция телефона — используйте ее. Вместо “позвоните по номеру 8 (800) 555-45-12” сделайте кнопку, нажав на которую, посетитель сайта сможет позвонить менеджеру вашей компании.

Согласитесь, нажать одну кнопку проще, чем набрать 10 цифр телефонного номера. А значит, и конверсия вырастет. Приятно, правда?

Функция местоположения

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

Что тестировать в мобильной версии сайта?

Итак, давайте перечислим. Проверяем:

  • Скорость загрузки. Это ключевой параметр, ведь ждать не любит никто. А уж тем более, если информация нужна срочно или у человека мало времени на работу в сети.
  • Вертикальность меню. Помните, что мобильный сайт должен быть в одну колонку. Никакой горизонтальной прокрутки.
  • Величину шрифта. Можно ли читать текст без увеличения, очков и лупы?
  • Простоту навигации. Поймет ли посетитель, куда ему идти, или придется поломать над этим голову?
  • “Однопальцевый тест”. Основная масса пользователей управляет навигацией на мобильных устройствах одним пальцем. Справятся ли они с вашим сайтом?
  • Простоту лид-формы: вводить данные с мобильного устройства непросто, поэтому и лид-форма должна содержать минимум полей (в идеале 1, максимум — 3). И помните, что каждое лишнее поле снижает конверсию. Так ли вам нужно знать то, о чем вы спрашиваете?
  • Удобство кнопок. Удобно ли нажимать на кнопку или нужно прицеливаться, чтобы не промахнуться? Много “воздуха” вокруг кнопок или нужно продираться сквозь текст?
  • Совместимость с разными операционными системами. Хорошо ли работает сайт на устройствах с основными мобильными операционными системами: Android, Windows Mobile, iOS?
  • Наличие ссылки на полную версию сайта. Не все посетители хотят довольствоваться обрезанной мобильной версией. Дайте таким максималистам возможность увидеть всё.

Как и чем можно тестировать?

Поскольку скорость загрузки мы назвали ключевым параметром, то именно с него и начнем.

Нормой считается загрузка страницы за 2-5 секунд. Но, конечно, чем быстрее будет грузиться страница, тем лучше.

  • Самая простая проверка — сервис Google PageSpeed Insight. Оценка дается по стобалльной шкале. Нормой считается 60-80 баллов. Кроме того, сервис дает рекомендации по увеличению скорости загрузки.

  • Отличный сервис — pingdom.

Вводите в окошко “URL” адрес вашего сайта и нажимаете на кнопку “START”.

Ниже смотрите результаты теста.

Performance grade — это оценка скорости загрузки сайта сервисом Google PageSpeed Insight. О ней мы уже говорили. Да, тут этот параметр тоже есть.

Load time — это скорость загрузки страницы в секундах. Как видим, скорость загрузки 2,85. Это хороший показатель.

Faster than указывает, насколько скорость загрузки выше, чем у остальных сайтов.

Page size — вес загружаемой страницы. Желательно, чтобы он не превышал 20 кБ. Если скорость в пределах нормы, то вес можно не уменьшать.

Requests — количество запросов. Чем их больше, тем дольше загружается страница.

Ниже даются рекомендации (Performance insights), которые улучшат показатели, по мнению сервиса. А также детальный анализ каждого запроса, вида контента и т.д., чтобы у вас была полная картина загрузки страницы.

Как отображается ваш сайт на различных мобильных устройствах?

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

Способ простой, но трудоемкий.

Хорошо, если у вас есть всё многообразие современных гаджетов. Или если не у вас, то хотя бы у ваших друзей, коллег и знакомых. А если нет?

Тогда ищем другие способы.

Например, браузерное тестирование.

Можно воспользоваться онлайн-сервисом BrowserStack, который имитирует более 1100 устройств и браузеров. Работать в сервисе несложно.

Введите в строку адрес сайта, выберите интересующие вас устройства и браузеры.

Прокрутите страницу до конца и нажмите на кнопку “Generate screenshots” (сформировать скриншоты).

Вы получите результаты-скриншоты, которые сможете детально рассмотреть, нажав на нужную картинку.

Можно также воспользоваться сервисом Responsinator. Правда, он дает поверхностное представление, поскольку всего лишь изменяет размеры экрана. Тем не менее, с ним можно работать.

Зайдите на страницу сервиса, введите адрес сайта в строку, нажмите кнопку “Go” и получите изображение вашего сайта на различных устройствах.

Можно ли упростить тестирование сайтов?

Ну вот, можно и пот со лба утереть: работа проделана немаленькая, но она того стоит. Ведь мелкие недочеты могут стать настоящим камнем преткновения на пути к пользователю.

А может есть способ попроще?

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

И все требования соблюдены, и силы на проверки и тестирование тратить не нужно. А главное, можно не переживать, что чего-то не учли, забыли или не перепроверили.

И пусть ваши сайты продают!