Как подготовить сайт поставщика промышленного оборудования к просмотру с телефона

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

Какие задачи решает человек с телефона на сайте поставщика

Прежде чем менять вёрстку, выпишите сценарии. Обычно это пять действий: найти модель по обозначению или артикулу, сверить ключевые параметры (производительность, мощность, давление, напряжение), открыть паспорт или чертёж, позвонить или написать менеджеру, переслать ссылку коллеге. Посмотрите в Яндекс Метрике или Google Analytics, какие страницы чаще открывают с мобильных устройств. С них и начинайте, не гадая.

Как показать таблицу характеристик на узком экране

Таблица из восьми колонок на телефоне ломается первой: если её сжать, текст становится микроскопическим, а если оставить как есть, вся страница уезжает вбок. Рабочие варианты:

• в карточке одной модели заменить таблицу списком «параметр — значение» в две колонки;
• для сравнения моделей оставить таблицу, но поместить её в блок с собственной горизонтальной прокруткой и закрепить первый столбец с названием модели;
• 3–4 главных параметра вынести над таблицей, а полную спецификацию убрать в раскрывающиеся блоки.

Единицу измерения держите в одной строке со значением («7,5 кВт»), чтобы при переносе они не разделились.

Условный пример: карточка винтового компрессора на экране телефона

Это схема порядка блоков, а не реальный товар. Сверху вниз:

• название и обозначение модели, например «Компрессор винтовой, серия X, 15 кВт»; наличие или срок поставки показывайте, только если готовы поддерживать их актуальными;
• сразу под заголовком кнопки «Позвонить» и «Запросить КП»;
• четыре ключевых параметра: производительность, рабочее давление, мощность двигателя, напряжение питания;
• фото, которое можно увеличить;
• полная спецификация списком «параметр — значение»;
• документы: «Паспорт, PDF, 2,4 МБ»;
• комплектация, расходники и запчасти для этой модели.

Логика простая: человеку на объекте нужно за несколько прокруток понять, подходит ли модель, и сразу связаться. Длинное описание уходит в конец.

Паспорта, чертежи и каталоги: как не потерять посетителя на PDF

PDF на 60 страниц на телефоне долго открывается и читается только с увеличением. Рядом со ссылкой указывайте название, формат и размер файла. Вместо общего каталога давайте короткие файлы по каждой модели. Самые востребованные данные, такие как габариты, присоединительные размеры и масса, продублируйте текстом на странице: их можно найти поиском по странице и скопировать в мессенджер. Проверьте, что файлы открываются не только по Wi-Fi, ведь на объекте связь часто слабая.

Кнопка звонка и форма запроса, которыми удобно пользоваться одним пальцем

Телефон оформите ссылкой формата tel:, тогда нажатие запустит звонок, а для почты используйте mailto:. В форме оставьте минимум полей: имя, телефон или почта, комментарий. Название модели подставляйте автоматически из карточки. Для поля телефона включите цифровую клавиатуру (тип поля tel). Кнопки делайте высотой не меньше 44 пикселей и с отступами, чтобы не промахнуться. Если принимаете запросы в мессенджере, проверьте, что кнопка ведёт на рабочий аккаунт, который кто-то читает. Не закрывайте форму всплывающим окном, которое трудно убрать на маленьком экране.

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

• Страница не прокручивается вбок, ничего не обрезано по краям.
• Основной текст читается без увеличения (ориентир — около 16 пикселей).
• До нужной группы каталога можно добраться за 2–3 нажатия.
• Поиск по артикулу виден на первом экране и находит позицию, если ввести её с пробелами или дефисами.
• Таблицы характеристик читаются без мелкого шрифта.
• Кнопки «Позвонить» и «Запросить КП» видны без прокрутки карточки.
• Фото сжаты и подгружаются по мере прокрутки.
• У каждого файла указаны формат и размер.
• Тестовая заявка с телефона по мобильному интернету дошла до менеджера, а модель в ней указана верно.

Проверяйте на реальных устройствах (и на iOS, и на Android), а не только в режиме эмуляции в браузере. Для начала возьмите 5–10 самых посещаемых карточек и доведите их до этого списка, а затем распространите решение на весь каталог.

Все статьи блога