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

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

Почему PDF-меню неудобно на телефоне

Меню в PDF на маленьком экране приходится увеличивать и двигать пальцем в обе стороны. Цену сложно связать с блюдом, а ссылку на конкретный раздел не отправишь. Файл также скачивается дольше обычной страницы.

Лучше сделать меню обычными страницами или разделами: «Фуршеты», «Банкеты», «Кофе-брейки», «Доставка в офис». Внутри каждого раздела у наборов должен быть свой адрес, чтобы его можно было переслать. PDF оставьте как дополнительную версию для печати, а не как основной формат.

Как выглядит карточка набора на узком экране

Условный пример карточки в списке. Значения в квадратных скобках подставляются из ваших данных:

• Название: «Фуршет на 30 гостей».
• Цена: «[сумма] ₽ за гостя», а не «см. прайс».
• Состав: «5 холодных закусок, 2 горячих блюда, десерт, напитки», с раскрывающимся списком позиций.
• Условия одной строкой: «Заказ за [N] дней, минимальный заказ [N] гостей, доставка по [зонам]».
• Кнопка «Рассчитать на мою дату», ведущая к форме с уже выбранным набором.

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

Форма заявки, которую можно заполнить одной рукой

Заявка на мероприятие обычно требует нескольких данных, и на телефоне каждое лишнее поле повышает шанс, что форму бросят. Для первого обращения хватает даты, числа гостей, района или адреса и телефона. Остальное уточнит менеджер.

• Для телефона задайте тип поля tel, для числа гостей — цифровую клавиатуру, для даты — встроенный выбор даты.
• Шрифт в полях не меньше 16 px: на части устройств при меньшем размере страница сама увеличивается при вводе.
• Подписи оставляйте над полями, а не внутри них: подсказка внутри поля исчезает при вводе.
• Кнопку называйте по действию, например «Отправить запрос на расчёт». Слово «Отправить» без пояснения мало что говорит.
• Ошибки показывайте рядом с проблемным полем и не стирайте введённое.

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

Кнопки связи и закреплённая панель

Телефон в шапке и подвале должен быть ссылкой tel:, чтобы звонок начинался одним нажатием. Удобна закреплённая нижняя панель из двух кнопок: «Позвонить» и «Рассчитать». Проверьте, чтобы она не закрывала поля формы, баннер с cookie и последние строки страницы. Зона нажатия должна быть примерно 44–48 px по высоте, а между кнопками нужен зазор, чтобы не попасть не туда.

Фото блюд: красиво, но без лишнего веса

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

• Загружать для телефона уменьшенные версии через srcset, а не десктопные изображения.
• Включить отложенную загрузку для всего, что ниже первого экрана.
• Задать размеры или пропорции изображений, чтобы текст не «прыгал» при загрузке.
• Не ставить на первый экран тяжёлый слайдер или видеофон: достаточно одного снимка, заголовка и кнопки.
• В галерее мероприятий показывать первые 6–8 снимков и подгружать остальные по кнопке.

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

Пройдите сценарий «выбрать набор и отправить заявку» на реальном телефоне, лучше на двух разных, через мобильный интернет, а не домашний Wi-Fi.

• Текст читается без увеличения, горизонтальной прокрутки нет.
• Цена и условия набора видны в карточке без открытия файла.
• У каждого набора есть собственная ссылка, которая открывается из мессенджера.
• Телефон и мессенджер нажимаются с любой страницы.
• Форма заявки умещается в 4–5 полей, клавиатура подходит к типу поля.
• Закреплённая панель не перекрывает контент и поля.
• Первый экран появляется быстро, фото ниже подгружаются по мере прокрутки.
• Тестовая заявка доходит до менеджера, а гость видит подтверждение.

Если на каком-то пункте вы споткнулись сами, гость, скорее всего, споткнётся тоже. Начните с меню и формы: именно там чаще всего теряются обращения.

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