Yakitori: сайт ресторана

О клиенте

Yakitori · Asian Food - ресторан азиатской кухни в Баку, четвёртый этаж Sevinc Mall: суши и роллы, супы, лапша, жареный рис, удон, темпура, салаты, вафли, мороженое и напитки, плюс доставка по городу. Гость такого ресторана приходит на сайт за одним: посмотреть меню с ценами и позвонить. Значит, сайт обязан открываться мгновенно с телефона и показывать блюдо фотографией, а не строчкой в списке.

Что сделали

• Собрали сайт на чистом HTML, CSS и JavaScript: ни CMS, ни сборщика, ни одной внешней зависимости. Страницы отдаются готовыми файлами, обновление сводится к копированию папки, ломаться при обновлении плагинов нечему.
• Разделили данные и рендер. Всё меню лежит в отдельном файле-константе, скрипт строит из него и сетку карточек, и навигацию по разделам. Чтобы поменять цену или состав блюда, вёрстку трогать не нужно.
• Сделали две языковые версии отдельными страницами, а не переключателем на клиенте: русская на yakitori.az, азербайджанская на yakitori.az/az. У каждой свой canonical и полный кластер hreflang - ru, az и x-default. Поисковик видит два самостоятельных документа, а не один с подменой текста.
• Разложили меню на 15 разделов - от сетов и комбо до лимонадов, - с пятью группами внутри суши-роллов: хосомаки, урамаки, горячие роллы, печёные роллы, суши-бургер и рисовые шарики. Три последних раздела верстаются прайс-листом и автоматически складываются в колонки.
• Сделали липкую навигацию по разделам: активный пункт подсвечивается наблюдателем пересечений, лента прокручивается колесом и перетаскивается мышью, а клик после протяжки подавляется - иначе перетаскивание случайно уводило бы на другой раздел.
• Поставили лайтбокс: клик по любой фотографии открывает её во весь экран, закрывается кликом куда угодно и клавишей Escape.
• Кадрировали фотографии блюд только средствами CSS, не трогая файлы. У супов масштаб и точка кадра подобраны так, чтобы миски в ряду вышли одного размера; в лайтбоксе при этом открывается нетронутый оригинал, потому что он живёт вне кадрирующего контейнера.
• Прописали разметку для поиска: title, description, canonical, hreflang, гео-метаданные, Open Graph и Twitter-карточку, JSON-LD Restaurant с телефоном, адресом, часами работы, координатами и ценовой категорией.
• Всю растровую графику перевели в WebP и выложили на Cloudflare Pages; адрес с www уводится редиректом на основной, поэтому QR-код с печатного флаера, где напечатан вариант с www, остаётся рабочим.

Дизайн и структура

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

Типографика и азербайджанская версия

Три гарнитуры, четвёртой на сайте нет: Montserrat на заголовках, названиях блюд и ценах, Manrope на составах и описаниях, Noto Sans JP на японских подписях разделов. Разделение не декоративное. В Manrope физически отсутствуют знак маната и азербайджанская буква Ə, поэтому все цены набраны Montserrat, а Manrope подстрахован тем же Montserrat: именно он дорисовывает Ə в азербайджанских описаниях блюд. Без этого браузер молча подставил бы системный шрифт: по CSS такое не видно, шрифт вроде бы назначен, а буква выпадает из строки. Проверяли не глазами, а скриптом: он спрашивает у браузера, каким реальным шрифтом отрисован каждый текстовый узел на обеих страницах.

Вторая азербайджанская ловушка - регистр. Обычный uppercase переводит i в I, а по-азербайджански нужно İ, поэтому все строки, которые выводятся капсом, лежат в данных уже заглавными и преобразование остаётся холостым.

Как сайт ведёт себя на телефоне

Большая часть заказов приходит с телефона, поэтому сетку меню проверяли не на одном экране, а на четырнадцати ширинах - от широкого монитора до узкого телефона. Правило за всеми ними одно: название блюда нигде не должно разрываться на две строки и наезжать на цену. Ради него на планшете сетка принудительно встаёт в две колонки, на телефоне цена уходит под название вместо того, чтобы делить с ним строку, а на самых узких экранах весь текст становится мельче. Размеры подбирались под Montserrat: при одинаковом кегле он примерно на пятую часть шире Manrope, так что «на глаз» здесь не работает.

Сроки и процесс

Около недели работы. Сайт выложен на yakitori.az 17 августа 2026 года, а проект закрыт 18 августа, одновременно с флаером: на флаере печатается QR-код на сайт, поэтому сдать их порознь было нельзя.

Технологии