По словам директора РАЭК Сергей Плуготаренко, в России мобильным интернетом пользуются 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 баллов. Кроме того, сервис дает рекомендации по увеличению скорости загрузки.
Вводите в окошко “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.
И все требования соблюдены, и силы на проверки и тестирование тратить не нужно. А главное, можно не переживать, что чего-то не учли, забыли или не перепроверили.
И пусть ваши сайты продают!
