Дизайн — статьи о сайтах
Родители часто выбирают товары для детей на ходу: в дороге, на прогулке, пока ребёнок занят. Одна рука нередко занята коляской или самим ребёнком. Сколько таких посетителей именно у вашего магазина, покажет счётчик посещаемости: посмотрите отчёт по устройствам. Если смартфонов много, мобильная подготовка сайта станет частью работы с каталогом, а не косметикой.
Сначала пройдите путь покупателя на настоящем телефоне
Откройте сайт на смартфоне и выполните сценарий: главная страница, категория, фильтр, карточка товара, корзина, оформление заказа. Делайте это одной рукой и без увеличения экрана щипком. Записывайте каждое место, где пришлось промахиваться по ссылке, приближать текст или прокручивать страницу вбок. Такой список заменяет абстрактные пожелания «сделать удобнее» и даёт студии конкретное задание.
Адаптивная вёрстка или отдельная мобильная версия
Есть два пути. Адаптивный сайт имеет один адрес и один набор данных. Расположение блоков меняется правилами CSS (media queries) в зависимости от ширины экрана. Отдельная версия на поддомене вроде m. требует второго шаблона и переадресации. Для каталога с сотнями позиций обычно проще поддерживать один сайт: цены, остатки и описания правятся в одном месте. Отдельную версию стоит рассматривать, если система управления устарела и не позволяет менять шаблоны.
Для адаптивного варианта в шаблоне нужна строка, задающая масштаб страницы:
<meta name="viewport" content="width=device-width, initial-scale=1">
Без неё телефон показывает уменьшенную копию десктопной страницы, и все правила для узких экранов не сработают.
Как перестроить каталог с фильтрами по возрасту и размеру
На компьютере фильтры обычно стоят колонкой слева. На телефоне эта колонка отнимает весь первый экран, и товаров не видно. Условный пример страницы «Зимние комбинезоны»:
- над списком одна кнопка «Подобрать»; она открывает панель с фильтрами «Возраст», «Рост», «Пол», «Цена»;
- выбранные значения показаны строкой под кнопкой, например «80–86 см» и «до 3000 ₽», у каждого есть крестик для сброса;
- в списке две колонки карточек или одна, если названия длинные: фото, название, цена, пометка «есть размеры 80, 86»;
- кнопка «Показать» в панели фильтров сообщает число найденных товаров.
Важно, чтобы возраст и рост были главными фильтрами: в детских товарах покупатель думает именно так. Размерные значения лучше делать крупными кнопками-переключателями, а не мелкими флажками.
Что показать в карточке товара до прокрутки
На первом экране карточки уместите название, цену, выбор размера и кнопку «В корзину». Описание, состав, уход и таблицу размеров переносите ниже, в раскрывающиеся блоки. Фотографии удобно листать свайпом, а количество кадров обозначить точками.
Отдельная проблема — таблицы соответствия размеров. Широкая таблица на узком экране уходит за край. Либо заверните её в блок с горизонтальной прокруткой, либо замените строками вида «86 см — 1,5 года — длина стопы 12 см». Размеры и возраст приводите как справочные сведения от производителя, без рекомендаций, что выбирать конкретному ребёнку.
Корзина и оформление заказа без лишнего набора текста
Набирать текст на телефоне неудобно, поэтому сократите форму до необходимого: имя, телефон, способ получения, адрес только при доставке. Полям задайте правильные типы: type="tel" открывает цифровую клавиатуру, type="email" даёт символ @. Подписи оставляйте над полями, а не внутри них, чтобы они не пропадали при вводе. Кнопка «Оформить заказ» должна быть крупной, а условия доставки видны до последнего шага. Телефон магазина сделайте ссылкой вида tel:, чтобы звонок начинался одним касанием.
Скорость загрузки и итоговый чек-лист
Мобильный интернет бывает медленным, а каталог детских товаров полон фотографий. Не отдавайте телефону картинки в размере для большого монитора: готовьте уменьшенные копии для списков и отдельно крупные для галереи. Проверьте сайт с отключённым Wi-Fi.
- В шаблоне есть метатег viewport, страница не прокручивается вбок.
- Основной текст читается без увеличения, размер шрифта не меньше 14–16 пикселей.
- Кнопки и ссылки в списках достаточно крупные и не прижаты друг к другу; ориентир — около 44 пикселей по высоте.
- Фильтры по возрасту и росту открываются отдельной панелью, выбранные значения видны.
- В карточке на первом экране есть цена, выбор размера и кнопка покупки.
- Таблица размеров читается без горизонтального «убегания».
- Форма заказа короткая, поля имеют правильные типы, телефон можно набрать касанием.
- Изображения в списках уменьшены, страница открывается приемлемо по мобильной сети.
- Всплывающие окна и баннеры легко закрыть пальцем и они не закрывают кнопку покупки.
Если большинство пунктов не выполняется, начните с карточки товара и оформления заказа: именно там посетитель решает, довести ли покупку до конца. Остальное можно улучшать поэтапно.
