Сначала закрыли главный вопрос
Тому, кто ищет водопады Дюден, нужен ответ на одно: верхний или нижний? Сайт построен так, чтобы это было видно на первом экране, а таблица сравнения служит хребтом страницы.
Кейс · BLN Global
Как создавался путеводитель
по водопадам Дюден
Независимый путеводитель по самому искомому природному месту Антальи, не принадлежащий ни одному ведомству. Задача была честно ответить на вопросы, которые люди задают перед поездкой.
1,9 МБ
Вес страницы
было 12 МБ
198
Классов стилей
выжато из ~700 инлайновых стилей
23
Лицензированных фотографий
без нейросетевых пейзажей
4
Языка
турецкий, английский, немецкий, русский
Дизайн никогда не переписывали руками
Файл дизайна проходит через конвертер: инлайновые стили сводятся в классы, слоты под изображения привязываются к настоящим фотографиям, ссылки подключаются к маршрутам. Меняется дизайн, и код пересобирается одной командой, поэтому они не расходятся.
Настоящие фотографии настоящего места
Путеводителю нечего выдумывать виды. Каждый кадр это настоящая фотография Дюдена или Антальи под свободной лицензией, с известным источником и автором. Снимки Верхнего и Нижнего Дюдена никогда не путаются между собой.
Мы говорили, когда не знали
Цены на вход, часы работы, автобусные маршруты: всё это меняется. Публиковать это как твёрдые данные значит оставить посетителя у закрытых ворот. По таким темам сайт отсылает к актуальному источнику и показывает дату проверки на каждой странице.
Мобильный это не уменьшенный десктоп
Переданный дизайн был рассчитан на широкие экраны. Для телефона собрали отдельную композицию: раскрывающееся меню, закреплённая полоса внизу экрана и лента фотографий, которую листают пальцем.
Скорость это свойство
Статическая сборка, почти без JavaScript, изображения WebP ровно той ширины, в которой они показываются. Страница спустилась с 12 МБ до 1,9 МБ. Ни один сторонний скрипт не задерживает первую отрисовку.
Где всё это сейчас
Турецкая, английская, немецкая и русская версии на месте. Путеводитель собран так, чтобы расти вместе с содержанием.
Стратегия · Пользовательский опыт · Дизайн · Разработка, BLN Global
