Дизайн — статьи о сайтах
Салон часто выбирают на ходу: человек стоит на улице и ищет, где подстричься рядом, или листает сайты в транспорте. Если страница открывается в уменьшенном масштабе, прайс приходится растягивать пальцами, а телефон спрятан внизу, посетитель вернётся к поиску и выберет другой салон. Разберём, что стоит проверить и изменить, чтобы сайт был удобен на смартфоне.
Что посетитель ищет в телефоне в первую очередь
Прежде чем менять дизайн, определите, какие вопросы возникают у человека с телефоном в руке. Для парикмахерской это обычно:
- где находится салон и как до него дойти;
- работает ли он сейчас и до которого часа;
- сколько стоит нужная услуга;
- как записаться и есть ли свободное время;
- как выглядят работы мастеров.
Ответы на эти вопросы должны находиться не глубже одного-двух касаний от главной страницы. Всё остальное, например история салона и длинные тексты о философии, лучше убрать ниже или на отдельные страницы.
Первый экран: что должно поместиться без прокрутки
Представьте условную главную страницу салона «Пример». На экране шириной около 360 пикселей без прокрутки стоит разместить:
- название и короткое описание: «Женские и мужские стрижки, окрашивание. Метро …, 3 минуты пешком»;
- крупную кнопку «Записаться»;
- кнопку «Позвонить» рядом с ней или под ней;
- строку «Сегодня до 21:00», если график это позволяет.
Главное меню на телефоне сворачивают в значок, но кнопки записи и звонка туда прятать не нужно. Они должны быть видны сразу.
Первое технические условие: в коде страницы должен быть метатег viewport. Без него телефон показывает десктопную версию в уменьшенном виде:
<meta name="viewport" content="width=device-width, initial-scale=1">Второе условие: вёрстка перестраивается по ширине экрана, а блоки не вылезают за края и не требуют горизонтальной прокрутки. Поисковые системы, в частности Google, всё активнее ориентируются на мобильную версию страниц, поэтому она не должна быть урезанной копией основной.
Прайс-лист, который читается без увеличения
Широкая таблица с пятью колонками на телефоне превращается в нечитаемую мелочь. Лучше показывать каждую услугу отдельной строкой: название слева, цена справа, под названием маленькая строка с пояснением, например «длина волос, время работы».
Если цена зависит от длины волос или категории мастера, пишите это прямо: «от … ₽, итог зависит от длины». Услуги группируйте под заголовками «Женские стрижки», «Мужские», «Окрашивание», «Уход». Для длинного прайса подойдут раскрывающиеся разделы, но первый раздел лучше оставить открытым. Размер шрифта цен и названий не меньше 16 пикселей.
Запись: звонок, мессенджер и форма
Номер телефона должен быть ссылкой, чтобы звонок начинался одним касанием:
<a href="tel:+70000000000">Позвонить в салон</a>Если администратор отвечает в WhatsApp, Viber или Telegram, добавьте кнопки этих мессенджеров, но только те, за которыми реально следит сотрудник. Не отвеченное сообщение вредит больше, чем отсутствие кнопки.
В форме онлайн-записи оставьте минимум полей: имя, телефон, услуга, желаемое время. Для телефона задайте тип поля tel, чтобы открывалась цифровая клавиатура. Кнопки отправки делайте высотой не меньше 44–48 пикселей и с отступами, чтобы не попасть по соседней. После отправки покажите понятное сообщение, что заявка принята и когда перезвонят. Если подключён внешний сервис онлайн-записи, проверьте, как его окно выглядит на узком экране.
Фотографии работ и скорость загрузки
Портфолио главное доказательство для парикмахерской, но тяжёлые снимки с фотоаппарата замедляют страницу в мобильной сети. Уменьшите изображения до реально нужного размера, сожмите их и загружайте нижние фотографии по мере прокрутки. Подписывайте работы: «Окрашивание, каре» полезнее, чем набор безымянных кадров. Галерею делайте так, чтобы фото увеличивалось касанием и листалось пальцем.
Отдельно проверьте блок контактов: адрес текстом, а не картинкой, карта без перехвата прокрутки страницы, рядом описание пути от остановки или метро.
Проверочный список перед запуском
- В коде есть viewport, страница не прокручивается вбок.
- Кнопки «Записаться» и «Позвонить» видны на первом экране.
- Телефон — ссылка tel:, адрес и часы работы доступны текстом.
- Прайс читается без увеличения, цены указаны понятно.
- Основной текст не мельче 16 пикселей, ссылки и кнопки удобно нажимать.
- Форма записи короткая, на поле телефона открывается цифровая клавиатура.
- Фотографии сжаты, страница открывается быстро и в обычной мобильной сети.
- Сайт проверен хотя бы на одном iPhone, одном Android и в браузере с имитацией телефона.
Пройдите этот путь сами: найдите цену, адрес и запишитесь. Если на любом шаге хочется приблизить экран или вернуться назад, значит, именно это место нужно исправлять в первую очередь.
