Блог

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

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

Однажды, перед отпуском, наш герой подумал, что неплохо было бы привести себя в форму и решил записаться в тренажёрный зал. Андрей быстренько набрал в поисковике «тренажёрный зал на Ленина» и, о ужас, что он увидел!
Что нужно учесть при создании мобильной версии сайта
Взору Андрея предстал САЙТ БЕЗ МОБИЛЬНОЙ ВЕРСИИ

Один за другим Андрей натыкался на подобные страницы. В конце концов ему это так надоело, что со злости он вернулся на сайт своего любимого итальянского ресторана и заказал 2 пиццы вместо одной!
Как вы поняли, подтянутым в отпуск Андрей не поехал, а несколько фитнес-клубов лишились потенциального клиента. Зато выиграл ресторан итальянской кухни!
К чему вся эта предыстория?
Хотите тоже быть в плюсе? Тогда вспомните, что таких, как Андрей, только в России 91,4 млн. По данным аналитического агентства We Are Social и крупнейшей SMM-платформы Hootsuite, именно столько человек в 2018 году пользуются мобильным интернетом в нашей стране.
Что нужно учесть при создании мобильной версии сайта
Доля трафика со смартфонов составляет 21%

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

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

, мы подскажем!
1.Формы захвата должны быть оптимизированы
Ваши клиенты ленивы, а заполнять анкеты на телефоне ещё и не удобно. Чем больше информации вы требуете от них сразу, тем меньше шансов, что они совершат целевое действие. Поэтому формы заказов не должны быть длинными. Если же для оформления сделки нужно много информации – разбейте поля на несколько подгружаемых страниц, с чёткой кнопкой «далее». Так пользователю не придётся долго скролить страницу.
Что нужно учесть при создании мобильной версии сайта
Вот на такие шаги разбита анкета Тинькофф банка. Это значительно облегчает её заполнение
2.Сlick to call
Буквально «звонок по клику». По данным компании Marchex, которая занимается мобильной рекламой, если есть возможность позвонить, нажав на одну кнопку, то вероятность покупки возрастает в 4 раза.
Поэтому не вздумайте размещать номер телефона картинкой. Это неприемлемо даже для полной версии сайта! Пользуйтесь потенциалом мобильных устройств: пусть человек сможет дозвониться до вас всего лишь в 1 клик.
Что нужно учесть при создании мобильной версии сайта
Номер телефона должен быть кликабельный
3.Читабельный шрифт
Думаем, что здесь всё понятно. Любой текст должен удобно читаться. Для этого шрифт на сайте должен быть приемлемого размера, особенно, если речь идёт о мобильной версии.
Вот несколько советов:
  • текст должен быть не менее 16px;
  • отступы – минимум 15px от края экрана;
  • межстрочный интервал – 1.
4.Вместо простых текстовых ссылок используйте кнопки
На мобильных устройствах нельзя навести курсор на нужный элемент и понять, кликабельный он или нет. Поэтому пользователю необходимо дать чёткое указание – кликать сюда! И лучше всего эту задачу выполняют именно кнопки.
5.Подружите мобильный дизайн с пальцами
Пальцы мешают пользователю просматривать содержимое. И они не так точны, как курсор мыши.
Представьте ситуацию: клиент пришёл на ваш ресурс. Он ознакомился с содержимым и решил оформить покупку. Клиент жмёт на кнопку «Купить» и…. Совершенно ничего не происходит. Клик пришёлся мимо кнопки. Он жмёт повторно. И опять ничего. Ещё 2-3 таких нажатия и клиент покидает ваш сайт, выражаясь нецензурной лексикой. Оно вам надо?
Если нет, тогда держите стандарты размеров тач-элементов:
  • минимальный – 26px;
  • оптимальный – 34px;
  • идеальный – 44px.
Эти рекомендации выработали компании Apple и Microsoft. Данным можно верить. Так что можете не искать идеальный показатель для вас. Пользуйтесь готовыми наработками.
Тач-элемент должен быть не меньше, чем кончик указательного пальца
6.Не должно быть контента, который не воспроизводится на мобильных устройствах
От такого контента в мобильной версии желательно полностью избавиться. Он не будет нормально функционировать и станет головной болью для пользователей. Видео не включится, игра не заиграет, а сложная анимация в меню выведет из себя.
Имейте ввиду, что iPhone и другие "яблочные" устройства вообще не поддерживают Flash-анимацию. Вместо полезной информации о компании пользователь увидит следующее окно:
Окно ошибки
Поэтому упрощайте: добавляйте простую текстовую информацию, JPEG и PNG файлы. Используйте GIF вместо Flash-анимации. Пусть на мобильных устройствах ваш сайт будет выглядеть не так наворочено. Но это лучше, чем страница с окнами ошибок.
7.Скорость загрузки страницы 3 секунды
Проблема скорости характерна для любых устройств, но сильнее всего она влияет на мобильных пользователей. После понятного интерфейса для них приоритетна скорость: если пользователь смог разобрать, какую кнопку нажать, чтобы совершить покупку, то следующей загвоздкой станет время ожидания этой самой кнопки на экране смартфона.
Для справки:
  • 1 секунда задержки сайта снижает конверсию на 3-7%;
  • 10 секунд – на 20-40%.
8.Оставьте пользователям кнопку «перейти на полную версию сайта», и они сами найдут то, что им нужно
Конечно, мобильные пользователи должны попадать на

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

. Но иногда возникают ошибки переадресации.
Допустим, вы настроили таргетированную рекламу «ВКонтакте». Добавили ссылку на определённый акционный товар в интернет-магазине. Ваш потенциальный клиент заинтересовался объявлением. Он кликнул по нему с телефона, но попал на главную страницу сайта. Теперь ему приходится заново искать нужный товар в каталоге.
Почему так получилось?
Если бы клиент кликнул на объявление с ПК, то открылась бы нужная страница. Но система определила заход со смартфона и перенаправила пользователя на мобильную версию сайта, которая ему была не нужна. Поэтому правильно настаивайте редирект и всегда оставляйте возможность вернуться к полной версии сайта.
Что нужно учесть при создании мобильной версии сайта

Запомните: каждый 12-ый посетитель вашего сайта хочет купить прямо с экрана своего смартфона. Удастся ли вам заполучить этого клиента – зависит только от вас! Наши рекомендации помогут вам создать удобное рабочее решение. Становитесь мобильнее прямо сейчас!
Следите за нами в социальных сетях
Сайт использует файлы cookies и сервис сбора технических и гео данных его посетителей.
Продолжая использовать данный ресурс, вы автоматически соглашаетесь с использованием данных технологий.
ООО "АйТиБрик" © 2010-2018

Разработка программ по всей России

Политика обработки персональных данных
г. Казань, ул. Каюма Насыри 25, офис 410
Пн-Пт: 09.00 - 18.00, Сб и Вс - выходной
info@itbrick.ru

Оставить заявку

Ваше имя:
Телефон:
E-mail:
Ваша идея:
Прикрепить файл

Спасибо за обращение!

Наш специалист свяжется с вами в течении рабочего дня.