Дизайн — статьи о сайтах
Снабженец или инженер заказчика часто открывает сайт производства не за рабочим столом: в цеху, на складе, в машине, на выставке. Ему нужно быстро понять, делаете ли вы нужную операцию, и отправить задачу. Если страница на телефоне требует увеличивать текст и промахиваться по ссылкам, он закроет её и откроет сайт следующего подрядчика. Ниже перечислены конкретные действия для сайта металлообработки.
Что ищут на сайте цеха с телефона
Сценарии почти всегда практичные: проверить, есть ли резка, гибка, токарная или фрезерная обработка; узнать, с какими материалами и толщинами вы работаете; найти телефон или адрес производства; отправить чертёж или фото детали. Расположите на мобильной версии именно это. Длинная история компании и список наград пусть будут ниже или на отдельной странице.
Адаптивная вёрстка и масштаб страницы
Базовое решение — адаптивный шаблон, в котором колонки перестраиваются под ширину экрана. Проверьте, что в коде страниц есть мета-тег viewport: <meta name="viewport" content="width=device-width, initial-scale=1">. Без него телефон показывает уменьшенную версию для компьютера. Отдельный мобильный сайт на другом адресе нужен реже: его придётся наполнять и поддерживать вдвое больше.
Дальше пройдитесь по мелочам. Основной текст — не мельче 16 px. Между ссылками и кнопками должно быть достаточно места, чтобы палец не попадал в соседнюю. Меню услуг не должно открываться только при наведении курсора: на телефоне наведения нет.
Таблицы материалов, толщин и допусков
В этой отрасли таблицы почти неизбежны, и именно они чаще всего ломают мобильную версию. Таблица на шесть колонок на узком экране сжимается до нечитаемости или уезжает за край. Варианты решения:
- оставить в таблице две-три ключевые колонки (материал, толщина, операция), а остальное вынести в раскрывающиеся строки;
- превратить каждую строку в карточку: название материала сверху, параметры списком под ним;
- если таблицу сократить нельзя, включить горизонтальную прокрутку и показать подсказку, что таблицу можно листать;
- единицы измерения писать рядом со значением («до 20 мм»), а не только в шапке, которая при прокрутке пропадает.
Технические параметры берите только из паспортов оборудования и внутренних регламентов и пересматривайте при смене станков.
Условный пример: страница «Лазерная резка листового металла»
Ниже схема страницы. Значения в квадратных скобках — места для ваших реальных данных.
- Первый экран. Заголовок «Лазерная резка листового металла». Одно предложение: «Режем детали по вашему чертежу из [список материалов]». Две кнопки на всю ширину экрана: «Позвонить» (ссылка вида
tel:) и «Отправить чертёж». - Материалы. Карточки: «Конструкционная сталь — толщина [от … до …] мм», «Нержавеющая сталь — [от … до …] мм», «Алюминий — [от … до …] мм».
- Форматы файлов. Короткая строка: «Принимаем [DXF, DWG, PDF]. Нет чертежа — приложите фото или эскиз с размерами».
- Что влияет на срок. Три пункта: материал в наличии или под заказ, объём партии, нужна ли гибка или сварка после резки.
- Адрес производства. Адрес текстом, чтобы его можно было скопировать, и вторая кнопка звонка внизу страницы.
Так человек за два-три прокручивания экрана понимает, подходите ли вы, и может сразу действовать.
Заявка с телефона: чертежи, фото и звонок
Телефон в шапке должен быть ссылкой, чтобы набор начинался одним касанием. Форма заявки: минимум обязательных полей (имя, телефон или почта, комментарий). Для телефона используйте тип поля, который открывает цифровую клавиатуру. Не заставляйте вводить то, что вы можете уточнить по звонку.
Отдельно продумайте загрузку файлов. С телефона чаще приходят фотографии и PDF, а не DWG, поэтому в подсказке к полю прямо напишите, что фото детали с размерами тоже подойдёт. Укажите допустимый размер файла и покажите сообщение, когда загрузка прошла. Если форма не принимает файл молча, заказчик решит, что заявка не ушла. Проверьте также, как письмо с вложением доходит до вашей почты и кто на него отвечает.
Не запускайте на мобильной версии всплывающие окна, закрывающие весь экран: крестик в углу сложно найти, а закрыть окно нужно, чтобы вообще увидеть контент.
Проверочный список перед запуском
- Страницы услуг открываются на реальном смартфоне без горизонтальной прокрутки (кроме специально оформленных таблиц).
- Текст читается без увеличения.
- Телефон нажимается и сразу вызывает набор номера.
- Каждая таблица материалов читается на узком экране.
- Форму можно заполнить одной рукой, а клавиатура подходит типу поля.
- Фото и PDF-файл успешно прикрепляются и доходят до сотрудника.
- Каталоги и прайсы в PDF открываются на телефоне, а рядом есть краткое описание на самой странице.
- Страница не слишком тяжёлая: фотографии станков и деталей сжаты, чтобы открываться на мобильном интернете в цеху или на складе.
Проверяйте сайт на нескольких устройствах и в разных браузерах, а после каждого изменения шаблона повторяйте проверку заново. Если точно знать, что первым делом делает посетитель на телефоне, доработки получаются небольшими и понятными.
