Сегодня телефон главный экран для интернета. Клиент находит компанию в поиске, сравнивает предложения и звонит, не вставая с дивана. На неудобном сайте он не задержится и на пять секунд. Он просто вернётся в выдачу и откроет сайт конкурента. Поэтому мобильная версия должна быть продумана не меньше основной. Разберёмся, на что обратить внимание.
Что учитывать при разработке мобильной версии
Исходите из реальных привычек пользователей. Человек держит телефон одной рукой. Он листает страницу большим пальцем. Он часто отвлекается и спешит. Значит, главное нужно показывать сразу. Лишние шаги и длинные вступления здесь не работают. Каждый экран должен отвечать на один вопрос.
Основа мобильного сайта — адаптивная вёрстка. Страница подстраивается под размер экрана. Текст читается без увеличения. Блоки идут в один столбец. Горизонтальной прокрутки быть не должно. Если вы решили создать сайт для бизнеса, запишите адаптивность в договор. Это обязательное условие, а не приятный бонус.
Не забывайте про скорость. Мобильная сеть бывает слабой. Тяжёлые фото и лишние скрипты тормозят загрузку. Сжимайте изображения и убирайте ненужное. Хорошая страница открывается за две-три секунды. Проверяйте результат на реальных телефонах разных марок. Опытное создание сайтов всегда включает такое тестирование. Смотрите и на разные браузеры.
Как сделать меню и кнопки удобными на телефоне
Меню на смартфоне обычно прячут под значок с тремя полосками. Этот приём знаком всем. Но самое важное лучше оставить на виду. Кнопка звонка и заявка не должны скрываться. Пунктов меню должно быть немного. Пяти-семи разделов хватает. Длинные списки утомляют и путают.
Размер кнопок решает многое. Палец менее точен, чем курсор мыши. Мелкую кнопку легко пропустить. Высота элемента должна быть не меньше сорока четырёх пикселей. Между кнопками оставляйте свободное место. Так случайных нажатий станет меньше. Подписи делайте конкретными. «Позвонить» понятнее, чем «Подробнее».
Подумайте и о расположении. Зона удобного нажатия находится внизу и в середине экрана. Туда стоит поместить главные действия. Хорошо работает закреплённая панель со звонком и мессенджерами. Она остаётся на экране при прокрутке. Номер телефона должен набираться одним касанием. Адрес пусть открывается в картах. Для столичного бизнеса создание сайтов Москва нередко включает именно такие решения. Они заметно увеличивают число звонков.
Какие элементы особенно мешают мобильным пользователям
Сильнее всего раздражают всплывающие окна. Они закрывают половину экрана. Крестик маленький, и попасть в него трудно. Человек злится и уходит. Поисковики тоже не любят такие баннеры. Если окно нужно, делайте его компактным. Показывайте его после действия посетителя, а не сразу. Закрыть его должно быть просто.
Мешает и мелкий шрифт. Читать его без увеличения невозможно. Размер текста должен быть не меньше шестнадцати пикселей. Длинные абзацы превращаются в сплошную стену. Разбивайте их на короткие части. Добавляйте подзаголовки и пустое пространство. Светлый текст на светлом фоне тоже плохо виден. Проверьте контраст при ярком свете.
Есть и другие помехи. Это формы с большим числом полей. Это видео, которые запускаются сами. Это таблицы, не помещающиеся на экран. Это ссылки и кнопки, стоящие слишком близко. Планируя создание сайта для телефонов, сократите форму до двух-трёх полей. Замените таблицы карточками. Отключите автозапуск видео. Затем пройдите весь путь клиента на своём смартфоне. Неудобства станут очевидными сразу.
Итоги
Хороший мобильный сайт быстрый, простой и удобный для пальца. Используйте адаптивную вёрстку и следите за скоростью. Делайте меню коротким, а кнопки крупными. Уберите навязчивые окна, мелкий текст и сложные формы. Проверяйте сайт на разных устройствах. Тогда посетители будут оставаться дольше и чаще обращаться в компанию.