Мобильная версия сайта: на что смотреть при приёмке

Значительная часть посетителей открывает сайты с телефона. Если сайт на телефоне неудобен — маленький текст, кнопки, в которые не попасть, форма, которая не отправляется, — человек уходит и пишет конкурентам. Поэтому мобильную версию нужно проверять на приёмке так же внимательно, как «большую».

Мобильная версия и адаптивный сайт: в чём разница

Раньше делали отдельную «мобильную версию» на другом адресе. Сегодня чаще используют адаптивный сайт: одна страница, которая подстраивается под ширину экрана — компьютер, планшет, телефон. Это удобнее поддерживать и лучше подходит для поиска, так как у страницы один адрес. Все наши сайты делаются адаптивными.

Как проверить сайт на телефоне

Открывайте сайт на реальном телефоне, а не только сужайте окно на компьютере: так проявляются проблемы со шрифтами, касаниями и скоростью. Если есть возможность — проверьте и на iPhone, и на Android.

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

Читаемость

• текст читается без увеличения;
• достаточный контраст на фоне;
• абзацы не слипаются в «стену»;
• заголовки не обрезаются и не вылезают за экран.

Навигация и кнопки

• меню открывается и закрывается без глюков;
• кнопки достаточно крупные, между ними есть отступы;
• важная кнопка («Оставить заявку», «Позвонить») видна без поисков;
• нет горизонтальной прокрутки.

Формы

• при вводе телефона открывается цифровая клавиатура;
• поля не перекрываются клавиатурой;
• отправка работает и показывает подтверждение;
• ссылка на политику конфиденциальности открывается.

Изображения и скорость

• картинки не растянуты и не обрезаны;
• страницы открываются быстро даже на мобильном интернете;
• нет «прыгающих» элементов во время загрузки.

Контакты

• номер телефона набирается по нажатию;
• мессенджер и почта открываются корректно.

Что делать, если нашли проблему

Сделайте скриншот, укажите модель устройства и браузер и отправьте исполнителю вместе с остальными замечаниями. Так проще воспроизвести проблему. Правки входят в оговорённые круги — подробности в статье «Приёмка сайта».

Мобильная версия и поиск

Удобство на телефоне — один из факторов, который учитывается при оценке страниц. Но одной мобильной версией позиции не гарантируются: они зависят ещё от контента, конкуренции и других сигналов. Какие технические основы мы закладываем при создании, описано в статье «SEO при создании сайта». О том, как проходит работа в целом, — в «Этапах создания сайта».

Частые вопросы

Нужна ли отдельная мобильная версия сайта?
Как правило, нет. Достаточно адаптивной вёрстки — одна версия, которая подстраивается под экран.

Как проверить, что сайт адаптивный?
Откройте его на телефоне и планшете. Все блоки должны перестраиваться, без горизонтальной прокрутки и обрезанного текста.

Входит ли адаптивная вёрстка в стоимость?
Да, во всех тарифах ascentech сайт делается адаптивным.

Что чаще всего ломается на телефоне?
Таблицы и широкие блоки, мелкий текст, кнопки близко друг к другу и формы, перекрытые клавиатурой.