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

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

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

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

Базовое условие — в шаблоне страницы есть строка <meta name="viewport" content="width=device-width, initial-scale=1">, а вёрстка подстраивается под ширину экрана. Без этого телефон показывает уменьшенную версию для компьютера.

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

Условный порядок блоков сверху вниз:

• название и автор — крупным шрифтом, до обложки или рядом с ней;
• обложка шириной не больше половины экрана, с увеличением по касанию;
• цена и статус: «В наличии», «Под заказ», «Нет в наличии» — отдельной строкой, а не мелким серым текстом;
• кнопка «В корзину» на всю ширину, высотой не меньше 44–48 px, с запасом до соседних элементов;
• характеристики списком «параметр — значение»: издательство, год, переплёт, число страниц, ISBN;
• аннотация: первые 4–5 строк и ссылка «Читать полностью»;
• отрывок для чтения, отзывы, похожие книги — ниже.

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

Поиск и каталог: фильтры без потери места

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

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

Оформление заказа: формы под клавиатуру телефона

• для телефона используйте поле type="tel", для почты — type="email", для индекса — inputmode="numeric": откроется нужная клавиатура;
• добавьте атрибуты autocomplete для имени, адреса и телефона, чтобы браузер подставлял сохранённые данные;
• размер текста в полях — не меньше 16 px: на ряде телефонов страница иначе приближается при вводе;
• оставьте только нужные поля и разрешите заказ без регистрации;
• пункты самовывоза показывайте списком с адресом и часами работы, а карту делайте дополнением;
• сообщение об ошибке пишите рядом с полем и объясняйте, что исправить.

Скорость загрузки: обложки и лишние скрипты

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

Измерьте страницу каталога и карточки в Lighthouse (вкладка Audits в Chrome) или в PageSpeed Insights. Сравнивайте результаты до и после правок и смотрите на конкретные рекомендации, а не на итоговый балл. Проверьте и медленное соединение: в инструментах разработчика Chrome есть имитация мобильной сети.

Короткий чек-лист перед запуском

• страница не прокручивается вбок ни в каталоге, ни в корзине;
• цена, наличие и кнопка покупки видны без прокрутки карточки до конца;
• кнопки и ссылки не меньше 44 px и не слипаются;
• текст читается без увеличения, таблицы характеристик помещаются в экран;
• поиск подсказывает по автору, названию и ISBN;
• фильтры открываются отдельной панелью и показывают число найденных книг;
• формы вызывают правильную клавиатуру;
• каталог загружается приемлемо при медленном соединении;
• заказ проверен на iPhone и Android, в Safari и Chrome.

Если на каком-то пункте тест не прошёл, отправьте разработчику описание шага, модель телефона и снимок экрана. Так задачу можно оценить и исправить точнее.

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