Skygate Brisbane Airport

Skygate — торговый, ресторанный и деловой квартал при аэропорте Брисбена. CimpleO построила сайт на Drupal 8 для Brisbane Airport Corporation (BAC), развёрнутый на Acquia рядом с основным сайтом аэропорта bne.com.au.

Задача

По брифу нужен был каталог магазинов и заведений с реальной фильтрацией, не плоский список, причём редакторы контента должны были сами назначать фильтры каждому магазину через чекбоксы в CMS: без участия разработчика при добавлении новой записи. Дизайны пришли от BAC в виде InVision-макетов; вёрстка должна была совпадать с ними пиксель в пиксель на трёх адаптивных брейкпоинтах, с гамбургер-меню на мобильных.

Сайт также должен был встроиться в существующую экосистему, а не жить отдельно: форма подписки работает через iframe на существующую e-mail-платформу BAC, поиск по сайту должен был повторять паттерн, уже работающий на bne.com.au, а даже URL магазина должен был формироваться так же: bargain-mania, а не Bargain%20Mania, по конвенции основного сайта аэропорта. Согласованность с bne.com.au была важнее дизайна с нуля.

Что построили

Каталог магазинов и заведений

Фильтруемый список, где у магазина может быть сразу несколько атрибутов фильтра (тип кухни, расположение в квартале, удобства): все назначаются по каждому магазину прямо в CMS через чекбоксы, сортировка всегда алфавитная независимо от активного фильтра. У страниц магазинов и заведений свой баннер на каждую запись, а иконки соцсетей (Facebook, Instagram, YouTube, Twitter) редактор выбирает из фиксированного набора вместо того, чтобы вписывать текст ссылки вручную.

Курируемая главная страница

Четыре якорных арендатора (DFO, Woolworths, Novotel и Dan Murphy’s) закреплены на фиксированных позициях на главной странице, а не сортируются по алфавиту вместе со всеми; остальные арендаторы прокручиваются в карусели, построенной на флаге Drupal «promoted to front page». Редактор курирует ротацию, просто отмечая магазин, без правки шаблона. Content type главной страницы также несёт редактируемую сетку иконок (часы работы, как добраться, магазины, рестораны) и навигацию хедера/футера, переработанную под три брейкпоинта, с гамбургер-меню, несущим первичную и вторичную навигацию на мобильных.

Подписка и аналитика

Форма подписки, встроенная в хедер и футер как iframe на существующую e-mail-платформу BAC, и контейнер Google Tag Manager, подключённый в head и body страницы по спецификации трекинга BAC.

SEO-инфраструктура

ЧПУ через Pathauto (заголовок страницы вместо node/141, через дефис по формату слагов bne.com.au), XML sitemap и поиск по сайту на Drupal 8, смоделированный по странице результатов поиска bne.com.au. Так оба сайта вели себя одинаково для посетителя, переходящего между ними.

Работа с изображениями

Логотипы ритейлеров привели к единой спецификации 298×194px после жалоб на пикселизацию на странице каталога, а плиточные изображения, которые весили ~2.4МБ при разрешении 3000×2000px, сжали. До этого никто не замечал их вес, пока страница каталога не начала тормозить при отрисовке. На баннерные изображения добавили focal point, чтобы текст поверх фото оставался читаемым независимо от того, какую часть кадра обрезает конкретный брейкпоинт.

Кросс-девайсная доводка

Длинный хвост фиксов, проверенных на реальной матрице устройств: Samsung Galaxy S6, iPhone 5s/6/6+, iPad Air 2, плюс прогоны в BrowserStack для iPad Pro и iPad 5-го поколения. Гамбургер-меню, скрытое за баром часов работы в Android Chrome и на iPhone 6, горизонтальный скролл и «сплющенный» виджет часов работы на iPad, стрелки карусели, съезжающие при наведении, слишком быстрые переходы, плитки магазинов, которые в каждой третьей колонке рендерились на 10px шире, и специфичные баги вёрстки в Safari 11.

Разработка

Разработка шла с конца сентября по середину декабря 2017 года, от первых content type до финального раунда доводки под конкретные устройства перед запуском.