Кейсы

Кейс: верстка интернет-магазина «Ремит»

Александр Рыбка 22:11:2017 267

Проект: Интернет-магазин «Ремит»

Над проектом работали: 1 верстальщик

Объем работ: 14 страниц для верстки по готовым макетам

Срок выполнения: 20 рабочих дней

Общие положения

Ко мне обратились с просьбой верстки интернет -магазин для завода «Ремит». Заказчик поставил задачу сверстать страницы по готовым макетам, с адаптивной версткой (Минимальное разрешение  320, максимальное - согласно макетам).

Были предоставлены готовые дизайны под расширения:

• 1366

• 768

• 320

По ходу ресайза весь контент должен растягиваться, визуальных багов быть не должно ни на каких разрешениях.

Расширения на разных экранах

Этапы выполнения

1. Для начала структурируются задачи проекта, для этого используется Asana. В них перечисляются: дизайн заказчика с комментариями, вопросы по верстке и срокам реализации, скидываем ссылку на битбакет. Выглядит это примерно следующим образом:

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

В этом же документе проставляю сроки по реализации каждой страницы.

3. Приступаю к выполнению: По ходу выполнения проекта заливаю на сервер и битбакет, анализирую что готово и насколько движусь по намеченному плану.

4. Промежуточные результаты показываются заказчику раз в 2 дня.

Подробности проекта

В проекте было 14 страниц: Главная, каталоги, предложения, корзина, рецепты и пр.

На сайте решили применять несложную анимацию. Большинство из осуществленных анимаций происходит при взаимодействии с выбранным элементом.

На страницах товаров и рецептов использовались слайдеры и  stiky панельки созданные с помощью библиотеки Jquery.

На главной странице также была создан адаптивная карусель c акционными предложениями.

Сама структура у проекта довольно не простая. Ее реализовали колонками на CSS, с помощью свойства column, не разбивая при этом на отдельные дивы.

Итог

За короткое время получилось качественно реализовать проект. Макет соответствует pixel perfect, корректно отображается во всех браузерах и стандартных устройствах. Благодаря наработанной за 6 лет системе оптимизации скорости написания кода и опыту в ведении подобных проектов его реализация заняла всего 20 дней: от начала переговоров с заказчиков до полной сдачи.

Хотите также? Оставьте заявку на профессиональную верстку сайта по макету.

До связи,

Александр Рыбка

Видео