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

Share
22.11.17

Содержание:

    Вступление

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

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

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

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

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

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

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

    • 1366

    • 768

    • 320

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

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

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

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

    Задачи в асане

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

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

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

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

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

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

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

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

    Слайдер

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

    Итог

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

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

    До связи,

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

    Подпишитесь на блог