Задача
Клиент обратился с задачей доработки и исправления мобильной версии сайта, работающего на PHP 7.1. Сайт частично не соответствовал предоставленному макету в Figma, имел множество визуальных и функциональных несоответствий, а также некорректную верстку.
Важно было адаптировать интерфейс под мобильные устройства, устранить баги и привести отображение элементов в точное соответствие с дизайн-макетом, при этом не нарушая текущую бизнес-логику сайта.
Подход
Мы провели полный аудит фронтенда мобильной версии сайта и сопоставили его с макетом в Figma. После ревизии был составлен приоритетный список задач по доработке интерфейса, логики и верстки.
Работа велась поэтапно: от критичных ошибок отображения до улучшения юзабилити. Использовались инструменты Figma, Chrome DevTools, а также PHP отладка на уровне шаблонов и контроллеров. Каждый блок верстки и функционала протестировался отдельно на различных устройствах.
Что реализовано
Главная
Адаптирована мобильная версия: выравнивания, кнопки, отступы, центрирование.
Устранено смещение элементов (баннер, таймер).
Оптимизированы блоки: категории, акции, новинки, блог, отзывы.
Настроены стрелки, эффекты, иконки, ховеры.
Навигация
Полностью переработано мобильное меню: на весь экран, с логикой закрытия по тапу вне и свайпу.
Устранены ошибки и дубли категорий, обеспечен переход без вложенных списков.
Настроено переключение «бургер ↔ крестик», а также ховеры и отступы.
Исправлено отображение хлебных крошек: теперь показывается корректная категория и адекватный перенос строк.
Каталог и карточки
Исправлено качество изображений в карточках и категориях.
Введена горизонтальная прокрутка для блоков «Рекомендуемые», «Акции» и пр.
Исправлены стили и отступы в карточке: заголовки, вкладки, характеристики, кнопки, блок «Купить в 1 клик».
Адаптировано встроенное видео и убран задний фон.
Корзина и оформление
Настроено мгновенное перенаправление в корзину (в mobile).
Оформление объединено на одной странице и адаптировано под макет.
Исправлена логика валидации форм: теперь не блокирует оформление при корректных данных.
Введен попап при добавлении товара вместо полоски сверху.
Поиск
Расширяемое поле при нажатии, убрана иконка внутри.
Оформлена страница поиска (включая случай без результатов) в стиле десктопа.
Страницы сайта
О компании, Доставка, Контакты — приведены к макету, добавлена карта.
Блог: карточки, тени, кнопка «Загрузить ещё».
Результат
-
Мобильная версия сайта приведена к полному соответствию с Figma.
-
Повышена читаемость и удобство использования на всех мобильных устройствах.
-
Исправлены баги, мешавшие оформлению заказов.
-
Ускорена работа интерфейса за счёт упрощения DOM и снижения количества ненужных элементов.
-
Снижено количество обращений в поддержку по вопросам оформления и отображения.
-
Улучшена визуальная идентичность между десктопной и мобильной версиями сайта.
Сайт корректно отображается на всех видах устройств:
монитор компьютера, планшет и телефон
Другие проекты
