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

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

Какие задачи посетитель решает со смартфона

Прежде чем менять дизайн, выпишите 4–5 типичных сценариев и пройдите их на своём телефоне, а лучше на двух: с большим и с маленьким экраном. Например: родитель ищет курс для ребёнка восьми лет рядом с домом; взрослый выясняет, подойдёт ли вечерняя группа после работы; студент хочет понять, как найти вход на пробный урок. Для каждого сценария посчитайте, сколько касаний экрана нужно до ответа. Если расписание спрятано на третьем уровне меню, это первая правка.

Что должна менять адаптивная вёрстка на узком экране

Самый надёжный вариант — адаптивный шаблон: один адрес, одна страница, блоки перестраиваются под ширину экрана. Проверьте базовые вещи:

• в коде страницы есть мета-тег viewport (width=device-width, initial-scale=1), иначе телефон покажет уменьшенную копию десктопной версии;
• нет горизонтальной прокрутки всей страницы;
• основной текст читается без увеличения пальцами, ориентир — от 16 px;
• колонки выстраиваются друг под другом, а меню открывается кнопкой с подписью «Меню», а не только значком.

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

Как показать расписание и цены, чтобы таблица не сломалась

Сетка «дни недели × время» на телефоне превращается либо в нечитаемый мелкий шрифт, либо в прокрутку вбок. Лучше показывать группы карточками. Условный пример страницы «Английский для взрослых, уровень A2»; значения вымышлены:

• заголовок карточки: «A2, вечерняя группа»;
• дни и время: пн и ср, 19:00–20:30;
• ближайший старт: дата;
• формат: группа до 10 человек, очно;
• стоимость: сумма и пояснение, за что она (месяц, курс или занятие) и входят ли учебники;
• кнопка «Записаться на пробный урок» прямо в карточке.

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

Форма записи на пробный урок: что убрать и что добавить

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

• Для телефона задайте тип поля tel, и откроется цифровая клавиатура; для почты — email.
• Подписи оставляйте над полями. Подсказка внутри поля исчезает при вводе, и человек забывает, что туда писать.
• Кнопка занимает всю ширину и называется действием: «Записаться», а не «Отправить».
• После отправки покажите сообщение о том, что будет дальше. Срок ответа указывайте только тот, который школа реально выдерживает.

Отправьте тестовую заявку со смартфона и убедитесь, что она дошла до администратора.

Телефон, адрес и карта: контакты, которыми можно воспользоваться одним касанием

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

Тяжёлые картинки, слайдеры и всплывающие окна

На мобильном интернете страница с десятью большими фотографиями классов открывается долго, и посетитель уходит, не дождавшись расписания. Сожмите изображения до размера, в котором они реально показываются. Слайдер на главной сократите до нескольких кадров или замените одним понятным блоком с кнопкой записи. Видео не должно запускаться само. Всплывающие окна с акциями не должны закрывать экран целиком, а крестик должен легко нажиматься. Элементы на Flash на iPhone и iPad не работают, поэтому такие блоки нужно заменить.

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

• Расписание, цену и кнопку записи можно найти с главной за два-три касания.
• Нет горизонтальной прокрутки, текст читается без увеличения.
• Кнопки и ссылки достаточно крупные (ориентир — около 44 px по высоте) и стоят не вплотную друг к другу.
• Таблицы заменены карточками или удобно прокручиваются.
• Форма записи короткая, с правильными типами полей, тестовая заявка приходит.
• Телефон нажимается, адрес с ориентирами, карта не мешает листать страницу.
• Страницы проверены на реальных телефонах и через мобильный интернет, а не только на Wi-Fi.
• Содержание мобильной и обычной версий совпадает.

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