Сайт для сети кофеен с возможностью масштабирования без программистов

Мы отказались от тяжелых CSS-фреймворков вроде Bootstrap. Каждый блок был написан с нуля на чистом, семантическом HTML5, ванильном CSS (с использованием CSS Grid и Flexbox) и нативном JavaScript.

Как сделали с KC-конструктором: разработали блоки: «Герой с фоном-видео», «Сетка меню с фильтрами», «Карусель отзывов», «Форма заказа самовывоза», «Табы с акциями», «Интерактивная карта» и пр.

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

Клиент хотел не только менять текст, но и цветовую схему блоков для сезонных акций (например, осенняя акция — оранжевые кнопки, зимняя — серебристые).
Как сделали с KC-конструктором:

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

Для блока «Акция недели» клиент теперь может не только вписать текст и загрузить изображение, но и выбрать цвет фона и кнопки из палитры.

Что получил клиент: невиданную гибкость. Маркетолог может за 2 минуты полностью преобразить ключевой блок на главной, чтобы он соответствовал визуалу новой акции, без единой строчки CSS. Это мощнейшее преимущество для быстрого маркетингового реагирования.

Главная цель — независимость клиента в самых смелых идеях. После обучения менеджер компании сам:

• Добавил раздел «Мероприятия» с помощью 3 кликов
• Создал и оформил акцию «Осенний латте»: выбрал из библиотеки блок «Акция», загрузил фото, ввел текст и поменял цвет фона блока на теплый оранжевый
• Обновил фотографии во всех кофейнях, используя режим редактирования прямо на странице

Что получил клиент: Творческую свободу без потери производительности. Он может визуально экспериментировать, но код сайта остается при этом чистым и валидным, так как вся механика стилей была нами заранее продумана и корректно реализована.

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

Что получил клиент: 95 баллов из 100 в Google PageSpeed Insights для десктопной версии и 92+ для мобильной. Это прямое следствие нашего подхода с чистым кодом и оптимизацией.