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

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

С чего начать: пройдите путь покупателя на своём телефоне

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

Технически основа простая: в шаблоне страницы должен быть метатег viewport, например width=device-width, initial-scale=1, а вёрстка должна перестраиваться под ширину экрана через media queries. Для небольшого магазина адаптивный сайт обычно проще вести, чем отдельную версию на поддомене: один адрес, один каталог, одни и те же цены и остатки в обеих версиях.

Каталог и фильтры: как уместить выбор на узком экране

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

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

Карточка товара: условный пример для экрана 360 пикселей

Возьмём условную электрогитару «Модель X». Один из разумных вариантов порядка блоков при прокрутке сверху вниз:

• название и артикул;
• галерея, которую листают свайпом: общий вид, гриф, голова грифа, корпус сзади;
• цена и статус: «В наличии в магазине» или «Под заказ, срок уточняется»;
• крупная кнопка «В корзину» и рядом ссылка «Позвонить и уточнить» вида tel:, чтобы звонок начинался одним нажатием;
• пять-шесть ключевых характеристик списком: тип корпуса, мензура, звукосниматели, комплектация (чехол, ключ);
• видео или аудиопример звучания;
• полная таблица характеристик, свёрнутая по умолчанию;
• габариты упаковки, способы доставки и самовывоза.

Кнопки делайте высотой не меньше 44 пикселей и оставляйте между ними свободное место, иначе вместо «В корзину» человек нажмёт соседнюю ссылку. Таблицу характеристик стоит строить в две колонки «параметр — значение», без широких таблиц с горизонтальной прокруткой. Для сравнения моделей лучше сделать отдельный сценарий, а не пытаться уместить пять столбцов в один экран.

Звук и видео: что работает на телефоне

Для музыкального магазина пример звучания часто важнее описания. Но на iPhone не работает Flash, и многие плееры в стиле прошлых лет там просто не откроются. Используйте стандартные HTML5-элементы audio и video или встроенный плеер видеохостинга. Не запускайте звук автоматически: человек может быть в транспорте или на работе. Рядом с видео указывайте, что именно в нём показано: «Звук с чистого канала» или «Подключение к комбоусилителю». Так не придётся включать ролик ради ответа на простой вопрос.

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

Заказ и контакты: где теряются покупатели

Форму заказа сократите до необходимого: имя, телефон, способ получения, город или адрес. Для поля телефона задайте тип tel, для почты email: тогда на экране появится подходящая клавиатура. Для крупногабаритных товаров, например пианино или ударной установки, заранее покажите условия доставки: вынос, подъём, срок. Не откладывайте это до последнего шага.

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

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

• В шаблоне есть метатег viewport, страницы не требуют горизонтальной прокрутки.
• Меню и фильтры работают нажатием, а не наведением.
• Кнопки и ссылки легко нажимать пальцем и не стоят вплотную.
• В карточке цена, наличие и кнопка заказа видны без долгой прокрутки.
• Телефон кликабелен, адрес и часы работы легко найти.
• Аудио и видео воспроизводятся без Flash и не включаются сами.
• Фотографии сжаты, страница каталога открывается за разумное время на мобильной сети.
• Форма заказа корректно работает на реальном телефоне, поля вызывают нужную клавиатуру.
• Цены и остатки в мобильной и обычной версии совпадают.

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

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