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

Сайт принимают на компьютере, где его и делали. А клиент может открыть его с телефона, по ссылке из соцсетей, из рекламы или из переписки. Ниже - чек-лист, по которому можно проверить мобильную версию самому, без технических знаний.

Почему мобильную версию нужно проверять отдельно?

На телефоне страница сжимается в узкую колонку. Блоки, которые на компьютере стоят рядом, выстраиваются друг под другом, текст переносится, картинки уменьшаются. То, что выглядело аккуратно на большом экране, на маленьком может ломаться.

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

Как проверить текст и вёрстку?

Откройте главную и ключевые страницы и пролистайте их до конца:

Текст - читается без увеличения, строки не убегают за край экрана.

Нет горизонтальной прокрутки - страница не сдвигается вбок при пролистывании.

Картинки - не обрезаны, важные детали видны, подписи читаются.

Таблицы и прайсы - не превращаются в нечитаемую кашу.

Удобно ли нажимать кнопки и ссылки?

На телефоне нажимают пальцем, а не мышкой. Проверьте:

Крупные кнопки - в кнопку легко попасть с ходу.

Расстояние между ссылками - соседние ссылки не стоят вплотную, и нажатие не уходит на чужую.

Кнопка заявки - заметна на первом экране и повторяется ниже по странице.

Работает ли меню на телефоне?

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

Если меню длинное, оставьте на телефоне главное. Человеку важнее найти услуги, цены и контакты, чем полный список страниц.

Как проверить форму заявки на телефоне?

Форма - главное, ради чего человек пришёл. Заполните её сами:

Правильная клавиатура - для телефона открывается цифровая, для почты - с символом @.

Поля видны - клавиатура не закрывает поле, в которое вы пишете.

Отправка работает - заявка доходит, а на экране появляется подтверждение.

Чем меньше полей, тем проще заполнить форму с телефона. Какие поля оставить, я описал в статье форма заявки на сайте.

Как работают звонок и мессенджер?

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

Удобно, когда кнопка связи закреплена внизу экрана и видна при пролистывании. Главное, чтобы она не закрывала текст и другие кнопки.

Что мешает на маленьком экране?

На телефоне место дорогое, и мешает то, что на компьютере почти незаметно:

Всплывающие окна - закрывают страницу, и их трудно закрыть маленьким крестиком.

Виджеты поверх контента - чат, баннер cookie и кнопка связи, которые накладываются друг на друга.

Тяжёлые видео и картинки - страница грузится тяжело и тратит мобильный трафик.

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

Сколько стоит сайт с удобной мобильной версией?

Лендинг - от $190, многостраничный сайт - от $490, сложный проект - по запросу. Мобильную версию я проверяю на телефоне до сдачи, а не только в уменьшенном окне. Что выбрать по формату, поможет понять статья лендинг или многостраничный сайт.

Если ваш сайт неудобен на телефоне, пришлите мне ссылку - посмотрю и скажу, что мешает.