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

В каких условиях проверять

Условия важнее самой проверки: на офисном вайфае и на своём новом телефоне сайт выглядит лучше, чем у клиента.

• Выключите вайфай. Мобильный интернет — условия, в которых сайт открывают с улицы и из машины.
• Откройте сайт не из закладки, а через поиск по названию компании — как зашёл бы человек со стороны. Заодно увидите, что у вас в выдаче написано.
• Пройдите не только главную. Ломается обычно внутреннее: карточка услуги, прайс, блог, страница контактов со встроенной картой.
• Откройте в двух браузерах — том, что стоит по умолчанию, и любом другом: шрифты и формы они показывают по-разному.
• Идите как клиент — от первого экрана до отправленной заявки, а не пролистывая вниз.

Как поймать блоки, которые вылезают за экран

Самая частая поломка узкого экрана. Признак: страницу можно сдвинуть пальцем вбок, справа появляется полоса фона, а текст уходит за край.

Прокручивая страницу вниз, на каждом экране толкайте её влево и вправо. Поддаваться она не должна нигде. Сдвинулась — запомните, какой блок в этот момент виден: он и виноват.

Виновник почти всегда один из четырёх: широкая картинка, которая не умеет уменьшаться; встроенная карта или видео с чужого сервиса; длинное слово без пробелов — адрес почты, ссылка, артикул; таблица с прайсом или характеристиками. Последнюю проверяйте до конца: таблицы обрезаются первыми, а доматывает до них владелец сайта редко.

Читается ли первый экран без зума

Держите телефон как обычно, не приближая к лицу. На первом экране, без прокрутки, должно быть понятно: чем занимается компания, для кого и что нажать дальше. Если за ответом приходится листать — первый экран занят красивой картинкой и слоганом ни о чём; что на нём должно быть, мы разбирали в статье про первый экран сайта.

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

Попадает ли палец

Палец накрывает площадь заметно больше, чем курсор мыши, и работает вслепую: своя рука закрывает то, по чему вы целитесь.

• Пройдите сайт одной рукой. Так им и пользуются. Дотягивается ли большой палец до кнопки меню, до кнопки заявки, до крестика во всплывающем окне.
• Нажмите по каждой кнопке по разу. Промахнулись и попали в соседнюю ссылку — дело не в неловкости, а в мелкой или слишком тесно поставленной кнопке.
• Нажмите на номер телефона. Должен открыться набор номера. Если ничего не произошло, номер набран картинкой или обычным текстом, и звонка не будет.
• Нажмите на адрес и на почту. Адрес открывает карты, почта — почтовую программу.
• Посмотрите на липкую шапку. Приклеенная к верху полоса съедает высоту экрана, а при переходе по ссылке на раздел внутри страницы заголовок этого раздела часто оказывается спрятан под ней.
• Закройте баннер согласия. Полоса внизу про обработку данных не должна перекрывать кнопку заявки и обязана закрываться с одного нажатия. Что в ней должно быть написано — в разборе про согласие на обработку данных.

Что проверить в форме заявки

Форму надо не посмотреть, а заполнить до конца и отправить — со своим настоящим номером.

1. Нажмите на первое поле. Выскакивает клавиатура — видно ли при этом поле, в которое вы пишете, или оно ушло под клавиатуру.
2. Дойдите до поля для телефона. Должна открыться цифровая клавиатура, а не буквенная. Для почты — клавиатура со знаком собаки на виду. Это настройка типа поля, и видна она только пальцем.
3. Поставьте галочку согласия. Проверьте, нажимается ли сама галочка, а не только надпись рядом: мелкий квадратик — обычное место, где заявка застревает.
4. Отправьте. Сообщение об успешной отправке должно быть видно сразу, без прокрутки вверх.
5. Проверьте, что заявка пришла — на почту, в мессенджер, в журнал заявок, куда настроено.

Почему планшет пропускают чаще всего

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

Планшет проверяют в обеих ориентациях: книжная и альбомная сторона ведут себя по-разному. Если планшета под рукой нет, задайте ширину руками в режиме разработчика браузера на компьютере и проведите её через диапазон 768–1024 точки — это и есть та полоса, в которой макет перестраивается.

Поворот, тёмная тема и длинные прайсы

Четыре вещи, о которых вспоминают после жалобы клиента.

• Поворот экрана. Поверните телефон боком на главной, на прайсе и на форме. Содержимое не должно обрезаться, а позиция прокрутки — улетать в начало.
• Тёмная тема. Включите её в настройках телефона и пройдите главную ещё раз. Так находится пропавший текст — тёмные буквы на ставшем тёмным фоне, логотип в белом прямоугольнике, картинки с белой подложкой посреди тёмной страницы.
• Длинные прайсы. Перечень на десятки позиций и таблицу характеристик на телефоне читают построчно. Либо они превращены в карточки, где у каждой строки есть подпись, либо читать их невозможно.
• Вес картинок. На мобильном интернете видно то, чего не видно на вайфае: фотография догружается через пару секунд, а текст под ней прыгает. Значит, на страницу попал оригинал из телефона или из папки со съёмкой.

Что добавит проверка с компьютера и с чужого телефона

Режим разработчика в браузере открывается клавишей F12, а на Маке — сочетанием Cmd + Option + I; в нём есть панель с выбором устройства и поле ширины. Он удобен одним: прогнать все ширины подряд и увидеть, на какой макет ломается. Телефон он не заменяет — нет ни пальца, ни мобильного интернета, ни клавиатуры в пол-экрана. Порядок: пальцем находим проблему, на компьютере уточняем ширину.

Чужой телефон закрывает оставшееся. Возьмите аппарат другой системы и постарше, дайте человеку, который ваш сайт не знает, попросите найти цену на конкретную услугу и оставить заявку. Дальше молчите и смотрите, куда он тычет. Две минуты такого наблюдения находят больше, чем час собственной проверки: свой сайт вы знаете наизусть и нажимаете правильные места не глядя.

Что делать с тем, что нашли

Записывайте находки сразу, по строке: что, на какой странице, на каком экране. Снимок экрана к каждой строке объясняет подрядчику больше, чем абзац текста. Отделяйте поломку от вкуса: «текст уезжает за край» — поломка, «не нравится оттенок» — пожелание, обсуждаются они по-разному.

Вид на телефоне и планшете входит в любой наш тариф — это не отдельная услуга и не доплата; состав работ целиком на странице цен. На сданный сайт действует гарантия 30 дней, и в неё входит ровно то, что ловит этот список: разъехавшийся на узком экране блок — наша ошибка, а не повод для нового заказа. Дальше сайт живёт: таблица из Экселя, виджет чата, фотография прямо из галереи — и узкий экран ломается снова, а на мониторе это не видно. В обслуживании «База» за 4 900 ₽ в месяц есть две правки в месяц, в «Активе» за 9 900 ₽ — правки без ограничения, но заметить поломку должен кто-то живой.

Чек-лист на один проход

1. Вайфай выключен, сайт открыт с мобильного интернета.
2. Страница нигде не сдвигается вбок.
3. На первом экране без прокрутки понятно, чем вы занимаетесь и что нажать.
4. Текст читается без зума, в том числе на улице днём.
5. Сайт проходится одной рукой, по кнопкам палец попадает с первого раза.
6. Номер телефона набирается нажатием, адрес открывает карты.
7. Липкая шапка и баннер согласия ничего не перекрывают.
8. Форма заполняется и отправляется, для телефона открывается цифровая клавиатура.
9. Заявка дошла.
10. Прайс и таблицы читаются построчно и не обрезаются.
11. Ширина планшета, книжная и альбомная, проверена отдельно.
12. Поворот экрана и тёмная тема ничего не ломают.
13. Чужой человек на чужом телефоне нашёл цену и оставил заявку.

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