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

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

Адаптивная вёрстка или отдельная мобильная версия

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

У магазина запчастей тысячи позиций, а цены и остатки меняются постоянно. Во второй схеме их придётся синхронизировать между двумя версиями. Любой сбой означает, что на телефоне цена или наличие отличаются от настольного сайта. Поэтому для большинства каталогов проще поддерживать адаптивный шаблон. Основа у него простая: в head страницы указан <meta name="viewport" content="width=device-width, initial-scale=1">, а блоки перестраиваются в одну колонку. Если движок старый и переделать всё сразу нельзя, начните с главной страницы, поиска, карточки товара и корзины.

Как сделать поиск по VIN, артикулу и автомобилю удобным на малом экране

Поиск в этой отрасли главный инструмент, поэтому ему нужно место в верхней части страницы. Что стоит сделать:

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

Условный пример: карточка запчасти на экране шириной 320 пикселей

Представим карточку масляного фильтра с условным артикулом AB-123. Один из разумных вариантов порядка блоков сверху вниз:

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

Принцип такой: всё, что нужно для решения «беру или нет» (номер, цена, наличие, применимость), помещается на первый-второй экран. Подробности скрыты до нажатия.

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

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

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

В оформлении заказа оставьте минимум полей: имя, телефон, способ получения. Для телефона используйте type="tel", чтобы открывалась цифровая клавиатура, для почты type="email". Обязательная регистрация перед покупкой на телефоне отпугивает: разрешите заказ без неё. Выбор между самовывозом и доставкой делайте крупными переключателями, а адреса пунктов выдачи показывайте списком с телефонами и временем работы.

Скорость загрузки и проверка на реальных устройствах

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

Проверяйте сайт на реальных телефонах (хотя бы на одном Android и одном iPhone), а не только уменьшением окна браузера. Дополнительно можно воспользоваться сервисом Google PageSpeed Insights, у которого есть отдельные замечания по удобству на мобильных. Результаты поисковой выдачи это не гарантирует, но сервис указывает на конкретные недочёты вёрстки.

Короткий список проверки перед запуском

• В коде страницы указан viewport, масштаб не ломает вёрстку.
• Поиск по артикулу и VIN виден без прокрутки на главной и в каталоге.
• Выбранный автомобиль запоминается.
• Цена, наличие и кнопка «В корзину» видны в карточке без прокрутки вправо.
• Телефон магазина набирается одним нажатием.
• Таблицы применимости читаются или прокручиваются.
• Кнопки и ссылки достаточно крупные, чтобы попадать пальцем.
• Заказ оформляется без регистрации, поля подбирают нужную клавиатуру.
• Страницы каталога открываются приемлемо на мобильном соединении.

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