Дизайн — статьи о сайтах
С телефона на сайт центра печати часто заходят в спешке: нужно быстро узнать адрес, до скольки вы работаете, сколько стоит распечатка и можно ли прислать файл заранее. Если страница открывается мелким «десктопным» полотном, такой посетитель просто позвонит в другое место. Ниже — что именно стоит проверить и изменить.
Что нужно человеку с телефона в первую очередь
Составьте список задач посетителя и сравните его с тем, что видно на первом экране смартфона без прокрутки. Обычно это четыре вещи: цена основных услуг (печать А4, копия, сканирование, переплёт), адрес с подсказкой, как добраться, часы работы и способ отправить документ. Слайдер с акциями и длинный рассказ «о компании» на первом экране этим задачам мешают. Их можно оставить ниже или убрать на отдельную страницу.
Масштаб страницы и адаптивная вёрстка
Без настройки смартфон показывает сайт так, будто экран шириной около тысячи пикселей, и уменьшает его. Читать такой текст можно только после увеличения пальцами. Первый шаг — указать в заголовке страницы ширину области просмотра:
<meta name="viewport" content="width=device-width, initial-scale=1">
Но одной строки мало: блоки должны перестраиваться под узкий экран. Для этого используют адаптивную вёрстку: колонки становятся одной, меню превращается в короткий список, ширина элементов задаётся в процентах, а не в фиксированных пикселях. Альтернатива — отдельная мобильная версия на поддомене, но тогда придётся вести два комплекта страниц и следить, чтобы цены и адреса в них совпадали.
Прайс-лист, который читается без увеличения
Самая частая проблема сайтов печатных центров — широкая таблица цен: формат, цветность, плотность бумаги, тиражи по столбцам. На телефоне она либо уходит за край экрана, либо сжимается до нечитаемого размера. Лучше разбить её на карточки по услугам. Условный фрагмент страницы «Печать документов»:
- Печать А4, чёрно-белая. Цена за лист: [значение]. Скидка от тиража: [условие].
- Печать А4, цветная. Цена за лист: [значение]. Бумага: офисная 80 г/м².
- Печать А3. Цена за лист: [значение].
- Брошюровка на пружину. Цена: [значение]. Срок: [значение].
Название услуги выделено, цена стоит сразу под ним, дополнительные условия — мелким, но читаемым шрифтом. Если таблицу всё же нужно оставить, сократите число столбцов до двух-трёх и не перегружайте её примечаниями.
Как принять документ с телефона
Посетитель может иметь файл в почте, в облачном хранилище или в памяти телефона. Предложите несколько способов: загрузить файл через форму, отправить на адрес электронной почты, позвонить. Учтите ограничения форм:
- поле выбора файла работает не на всех версиях мобильных браузеров, поэтому рядом всегда указывайте почту как запасной вариант;
- укажите допустимые форматы (например, PDF, DOC, DOCX) и максимальный размер файла — иначе человек будет ждать загрузки и увидит ошибку;
- оставьте в форме минимум полей: имя, телефон, комментарий о тираже и формате; каждое лишнее поле на маленьком экране раздражает;
- после отправки покажите понятное сообщение: что заявка получена и когда вы свяжетесь.
Предупредите, что вёрстка документов из текстовых редакторов может отличаться на разных устройствах, поэтому для точной печати лучше присылать PDF.
Телефон, адрес и часы работы под большой палец
Номер телефона должен быть ссылкой вида tel:, чтобы звонок начинался одним касанием. Кнопка должна быть достаточно крупной: палец точнее мыши не станет, а соседние ссылки не должны оказываться вплотную. Адрес напишите текстом, а не картинкой, и добавьте ориентир: «вход со двора, второй этаж». Часы работы разместите рядом с адресом, отдельно отметьте выходные и обеденный перерыв, если он есть. Карту лучше вставлять ниже текста: она часто «перехватывает» прокрутку, и человек застревает на ней, пытаясь пролистать страницу.
Проверочный список перед запуском
- На странице есть тег viewport, текст читается без увеличения.
- Нет горизонтальной прокрутки ни на одной странице.
- Цены на основные услуги видны не дальше второго экрана.
- Прайс не представляет собой широкую таблицу.
- Телефон кликабелен, адрес и часы работы набраны текстом.
- Форма заявки короткая, указаны форматы и размер файла, есть запасной способ отправки.
- Кнопки и ссылки не расположены слишком близко друг к другу.
- Страницы проверены на реальных телефонах разных производителей, а не только в уменьшенном окне компьютерного браузера.
- Тяжёлые изображения сжаты, чтобы страница открывалась и по мобильному интернету.
Начните с прайса и контактов: эти изменения занимают меньше всего времени, а отражаются на том, сможет ли человек с телефона сделать заказ.
