Посетитель салона красоты часто открывает сайт в момент, когда нужно быстро что-то выяснить: сколько стоит окрашивание, есть ли свободное время в субботу, как найти вход. Он делает это с телефона, на ходу или в очереди. Если приходится увеличивать текст пальцами, а номер телефона нельзя нажать, страницу закроют и откроют сайт другого салона. Ниже описано, что именно стоит проверить и изменить.
Какие задачи решает посетитель с телефона
Как правило, их четыре: узнать цену, посмотреть работы мастеров, понять, как добраться, и записаться. История салона и описание философии нужны реже. Выпишите эти четыре задачи и посчитайте, сколько касаний экрана требует каждая. Разумный ориентир: с главной страницы до цен и контактов можно дойти за одно-два касания.
Адаптивный макет или отдельная мобильная версия
Сейчас используют два подхода. Адаптивная вёрстка — один адрес и одна разметка, блоки перестраиваются под ширину экрана. Отдельная мобильная версия обычно живёт на поддомене и устроена как самостоятельный сайт. Для салона с небольшим сайтом чаще удобнее адаптивный вариант: прайс и расписание мастеров правятся в одном месте и не расходятся между версиями. Если выбрана отдельная версия, следите, чтобы цены и контакты в ней совпадали с основным сайтом, и оставьте ссылку на полную версию.
Для адаптивного макета нужен метатег viewport: <meta name="viewport" content="width=device-width, initial-scale=1">. Без него смартфон покажет уменьшенную копию компьютерной страницы, и текст придётся увеличивать вручную.
Как показать прайс-лист на узком экране
Широкая таблица с колонками «услуга, длина волос, мастер, время, цена» на телефоне ломается или уходит за край экрана. Лучше превратить каждую строку в карточку. Условный фрагмент страницы «Окрашивание» на телефоне может выглядеть так:
- первая строка: название услуги крупным шрифтом, например «Окрашивание в один тон»;
- вторая строка: «от N ₽» справа, где N берётся из вашего актуального прайса;
- мелким текстом: примерная длительность и пометка «итоговая цена зависит от длины и густоты волос»;
- под карточкой: кнопка «Записаться» на всю ширину экрана, с уже выбранной услугой.
Разделы «Стрижки», «Окрашивание», «Маникюр» можно сделать сворачиваемыми, чтобы не прокручивать длинный список. Но не заменяйте прайс файлом для скачивания: PDF на телефоне открывается медленно и неудобно читается.
Кнопки «Позвонить» и «Записаться»
Телефон должен быть ссылкой вида tel:: касание сразу запускает набор номера. Номер, вставленный картинкой, этого не позволяет. Кнопку звонка удобно закрепить в шапке или внизу экрана, чтобы она оставалась на виду при прокрутке.
Кнопки делайте достаточно крупными. Apple в рекомендациях для iOS называет минимальным размером элемента касания около 44 пунктов; ориентируйтесь на это и оставляйте промежутки между соседними кнопками. В форме записи оставьте минимум полей: имя, телефон, услуга, желаемое время. Для поля телефона задайте тип tel, тогда откроется цифровая клавиатура. Не требуйте регистрацию и не ставьте капчу с неразборчивыми буквами. Если запись идёт через сторонний виджет, откройте его на телефоне и проверьте, помещается ли он в экран.
Галерея работ, карта и скорость загрузки
Мобильный интернет бывает медленным: в подвале торгового центра или на окраине сеть может ловить на уровне EDGE или слабого 3G. Страница с двадцатью полноразмерными фотографиями причёсок будет грузиться очень долго. Показывайте уменьшенные превью, а крупный снимок загружайте только по касанию. Слайдеры на Flash не работают на iPhone и iPad, поэтому галерею лучше делать на HTML и JavaScript.
Интерактивная карта на телефоне может перехватывать движение пальца, и страница перестанет прокручиваться. Рядом с картой обязательно напишите адрес текстом и добавьте ориентиры: «вход со двора, второй этаж, домофон 25». Режим работы тоже дайте текстом, а не картинкой.
Проверочный список перед запуском
- В коде страницы есть viewport, текст читается без увеличения.
- Нет горизонтальной прокрутки на главной, в прайсе и на странице контактов.
- Телефон — ссылка
tel:, кнопка звонка видна без поиска. - Прайс читается карточками или короткой таблицей, цены не спрятаны в PDF и картинки.
- Кнопка «Записаться» есть в прайсе, на страницах мастеров и в шапке.
- Форма записи короткая, для телефона открывается цифровая клавиатура.
- Фотографии сжаты, крупные версии открываются по касанию, Flash не используется.
- Адрес, ориентиры и часы работы написаны текстом рядом с картой.
Проверяйте сайт на реальных телефонах, как минимум на одном с iOS и одном с Android, а не только уменьшая окно браузера. Попросите кого-нибудь, кто не знает сайта, найти цену услуги и записаться. Места, где человек замешкался, и есть первые задачи для доработки.
