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

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

Какие вопросы посетитель решает с телефона

Обычно человеку нужно узнать пять вещей: чем вы занимаетесь, для какого возраста есть группы, когда занятия, где это находится и как записаться. Если на первом экране мобильной версии лежит длинное приветствие директора и слайдер с достижениями, ответы придётся искать прокруткой. Поставьте в начало короткое описание направлений, ближайшие свободные группы и две кнопки: «Записаться на пробное» и «Позвонить». Награды и история секции лучше перенести ниже.

Как показать расписание на узком экране

Классическая таблица «дни недели × время» на экране шириной 360 пикселей либо сжимается до нечитаемых букв, либо уезжает за край и требует горизонтальной прокрутки. Картинка или PDF со сканом расписания тоже неудобны: их приходится увеличивать пальцами, а текст из них нельзя скопировать.

Надёжнее выводить расписание списком карточек. Сгруппируйте их по направлению и возрасту, а внутри каждой карточки укажите дни, время и площадку. Если групп много, добавьте фильтры «Возраст» и «Площадка». Рядом с расписанием напишите, когда оно обновлялось, и выделите отдельным блоком отмены и переносы занятий, чтобы их не пропустили.

Пример: карточка группы для мобильного экрана

Вот условный фрагмент страницы «Плавание». Он показывает порядок строк, который удобно читать одной рукой:

• Заголовок: «Плавание, 7–9 лет, начальная группа»;
• Дни и время: «Вт, Чт, 17:00–17:45»;
• Место: «Бассейн на ул. Школьной, вход со двора» (адрес условный);
• Тренер: имя и одна строка о направлении работы;
• Статус набора: «Есть места» или «Лист ожидания»;
• Кнопки: «Записаться на пробное» и «Позвонить».

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

Форма записи на пробное занятие

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

• для телефона включить цифровую клавиатуру, для имени — автозаполнение браузера;
• возраст и группу выбирать из списка, а не вводить вручную;
• сделать кнопку отправки крупной, с зазором от соседних элементов, чтобы не промахиваться пальцем;
• после отправки показывать понятное сообщение: когда перезвонят и что взять с собой на первое занятие;
• дать альтернативу — звонок или мессенджер, если форма не подходит.

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

Как объяснить дорогу и вход

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

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

• Страницы открыты на реальном телефоне через мобильную сеть, а не только в окне браузера на компьютере.
• Нет горизонтальной прокрутки ни на одной странице.
• Основной текст читается без увеличения пальцами.
• Расписание понятно без масштабирования, видны дата обновления и отмены.
• Кнопки «Записаться» и «Позвонить» видны без долгой прокрутки.
• Форма не требует лишних полей, телефон вводится на цифровой клавиатуре.
• Тестовая заявка доходит администратору, а посетитель видит подтверждение.
• Адрес можно скопировать, маршрут открывается в приложении карт.
• Крупные изображения сжаты, главная страница не зависает при слабой связи.

Пройдите этот список вместе с администратором секции: он лучше всех знает, о чём спрашивают по телефону, и сразу заметит, чего не хватает на экране.

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