Задача
Покупателю строящейся квартиры предлагают поверить в план. Обычный ответ — папка рендеров и планировка: она показывает результат и ничего не говорит о том, как к нему приходят.
Поэтому сайт построили вокруг самой стройки. Пять этапов от котлована до ключей, конструкция объясняется там, где её видно, готовый дом показан со всех сторон, планировки и окружение — на той же странице. Три языка, потому что покупатель часто не местный.
Что сделали
Стройка показана фильмом из пяти этапов
Первый экран — это сама площадка, а прокрутка ведёт стройку вперёд: котлован, фундамент, каркас, фасад, сдача. Каждый этап одной строкой называет, что происходит, рядом две цифры, а лента из пяти шагов внизу показывает, где вы сейчас.
Поверх кадра стоят точки. Точка раскрывается и объясняет узел там, где его видно: шпунтовое ограждение вокруг котлована, буронабивные сваи в скалу, самоподъёмная опалубка, лестница, врезанная в обрыв.
Дом, который можно повернуть рукой
После фильма готовый дом остаётся один и поворачивается на полный круг. Это девяносто шесть кадров, снятых на одной высоте и с одного расстояния, их тянут мышью или пальцем. Если оставить в покое, дом поворачивается сам.
Покупателю важна и та сторона, что смотрит во двор. Набор кадров отвечает лучше видео: он останавливается ровно там, где остановилась рука.
Этажи, планировки и что внутри
Дом на странице разрезан: семь жилых этажей вокруг одного ядра с двумя лифтами и лестницей и два уровня паркинга, врезанных в скалу под ними. Каждый уровень подписан, поэтому разрез читается и без архитектора рядом.
На этаже четыре квартиры, ядро стоит по центру, поэтому у каждой есть угол и гостиная с видом на воду. Таблица показывает их рядом: комнаты, площадь, ориентация. Ниже общие пространства: лобби, зал, детская, коворкинг, бассейн на крыше.
Сгенерированная графика и три языка
На странице нет ни одной фотографии. Все кадры фильма, все ракурсы обзора и все интерьеры сгенерированы — иначе дом, которого ещё нет, не покажешь, и не удержишь один свет и один сезон по всей странице.
Страница работает на английском, португальском и русском, переключатель стоит в шапке, а вёрстка проверяется на каждом языке перед публикацией.
Техническая часть
Страница с таким количеством графики обычно грузится долго и прыгает по ходу загрузки. Эту замерили: вот цифры и то, на чём они держатся.
Скорость
Скорость 96 на десктопе
Lighthouse замеряет десктопную версию на 96 по скорости загрузки: самый крупный элемент появляется примерно за секунду.
Ничего не прыгает при загрузке
Замеренный сдвиг вёрстки на мобильном — 0,002, это практически ноль по этой метрике.
Картинки
Картинки кешируются на год
Файлы изображений отдаются с кешем на год, поэтому при повторном визите они не скачиваются заново.
Вся графика в webp
Все двадцать одно изображение на странице — в формате webp, и у каждого есть несколько размеров: телефон качает файл под телефон, большой экран — большой.
Поиск и доступность
Доступность 99 на мобильном
Проверка доступности даёт 99 на мобильном и 94 на десктопе: контраст, порядок заголовков, описания картинок и подписи у элементов управления.
Сто баллов за SEO и практики
Lighthouse ставит странице 100 по SEO и 100 за лучшие практики — и на мобильном, и на десктопе, ни один пункт в этих разделах не проваливается.
Надёжность
HTTPS без пути назад
Незащищённый адрес переадресуется на HTTPS, сервер отдаёт заголовок HSTS с preload, и браузер перестаёт пробовать небезопасный вариант.
Одна статическая сборка без CMS
Сайт — написанные руками HTML, CSS и JavaScript: заходить некуда, обновлять нечего.
Мобильная версия
По всему экрану телефона
На экране в 390 пикселей страница ровно 390 пикселей шириной, поэтому случайной горизонтальной прокрутки нет.
Мобильная версия
Что получилось
- Двадцать девять месяцев стройки помещаются в один экран.
- Готовый дом поворачивается на круг из девяноста шести кадров, которые тянутся рукой.
- Вся графика на странице сгенерирована, страница работает на трёх языках.
Сайт делает работу, которую раньше делал буклет, и делает её больше. Покупатель, который никогда не был на мысу, видит, как дом растёт, обходит его кругом, находит планировку с нужной стороны и отправляет запрос с последнего экрана.
