Лендинг для театра Wordless Theatre

Задача

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

Выбрали GetSimple CMS — легкую систему для небольших проектов. Она быстро работает и не требует много ресурсов.

Дизайн

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

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

Верстка

Сверстали на Bootstrap 4. Это дает адаптивность из коробки и упрощает поддержку кода.

Сложные элементы

На лендинге несколько технически сложных блоков:

Слайдеры — для фотографий спектаклей
Всплывающие окна — для видео и дополнительной информации
Асинхронная загрузка изображений — страница загружается быстро, картинки подгружаются по мере прокрутки

Оптимизация скорости

Использовали lazy loading для изображений. Когда пользователь открывает страницу, загружаются только те картинки, которые видны на экране. Остальные подгружаются при прокрутке.

Это значительно ускоряет первую загрузку страницы, особенно на мобильном интернете.

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

GetSimple CMS для управления контентом
Bootstrap 4 для адаптивной сетки
JavaScript для слайдеров и модальных окон
Intersection Observer API для lazy loading
Мультиязычный плагин для переключения языков

Мультиязычность

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

Весь контент дублируется на двух языках. Пользователь выбирает язык один раз, и выбор сохраняется для следующих посещений.

Структура лендинга

Лендинг состоит из нескольких блоков:

Экран с видео или главным изображением
О театре — краткая информация
Спектакли — карусель с фотографиями
Отзывы зрителей
Расписание и афиша
Контакты и форма обратной связи

Результат

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

GetSimple CMS позволяет театру самостоятельно обновлять афишу, добавлять новые фотографии спектаклей и редактировать тексты.

Весь контент управляется через простой админ-интерфейс, не нужно знать код или HTML.