Drink2Go

Кофе всегда под рукой

О проекте

Drink2Go - это интернет-магазин кофейных напитков. Свежесваренный кофе без кофеина из Эфиопии — то, что нужно для расслабления после тяжёлого рабочего дня. Сочетание перуанской высокогорной арабики с молоком ламы и лавандовым сиропом унесёт вас прямо на вершину Радужных гор. А тройной эспрессо из Колумбии, чернее самой тёмной ночи, покажет вам, что такое настоящая бодрость.

Сайт Drink2Go Репозиторий на GitHub

Техническая реализация

Общая информация

Сайт представляет собой совокупность главной страницы и страницы каталога продукции.

Стек: HTML5, CSS3, JavaScript, БЭМ, Sass, Gulp, Swiper.

Адаптивная верстка

Для каждой страницы выполнена фиксированная верстка трёх состояний: мобильная, планшетная и десктопная.

Главная страница Дринк Ту Гоу на трех устройствах. Смартфон, планшет, компьютер.

Страница каталога Дринк Ту Гоу на трех устройствах. Смартфон, планшет, компьютер.

Разметка и Стилизация

Семантическая разметка страниц выполнена на HTML5 с применением методологии БЭМ, и отвечает критериям валидности и доступности.

Стилизация страниц выполнена на CSS3 c использованием препроцессора Sass (синтаксис SCSS).

Сетки страниц и компонентов

Сетки крупных структурных блоков и мелких компонентов построены при помощи Flexbox и Grid Layout, не боятся переполнения контентом, и перестраиваются в зависимости от разрешения экрана устройства пользователя.

Слайдер

Слайдер в проекте реализован сторонней библиотекой для создания самых современных мобильных сенсорных слайдеров Swiper.

Адаптивная графика

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

Растровая графика в проекте подготовлена для двух вариантов экранов: с обычной и двойной плотностью пикселей.

Интерактивные карты

Интерактивные карты в проекте реализованы с использованием API Яндекс Карт.

Интерактивная карта на сайте Дринк Ту Гоу.

На случай отказа работоспособности JavaScript предусмотрено отображение изображения карты.

Изображение карты на сайте Дринк Ту Гоу.

Мобильное меню

Мобильное меню реализовано с использованием нативного JavaScript, и работает по класической схеме: по клику на бургер - открывается, на крестик - закрывается.

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

Статичное мобильное меню на сайте Дринк Ту Гоу в открытом виде.

Оптимизация

Для браузеров, поддерживающих формат WebP, в проекте подготовлены контентные изображения в данном формате.

Векторные изображения на странице объединены в спрайт.

Реализована предзагрузка шрифтов и ленивая загрузка изображений.

Кроссбраузерность

Все страницы и элементы сайта идентично отображаются в последних версиях браузеров Chrome, Firefox, Safari.