Yakitori

01О клиенте

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

02Что сделали

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

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

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

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

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

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

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

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

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

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

• На планшете сетка принудительно встаёт в две колонки.
• На телефоне цена уходит под название, а не делит с ним строку.
• На самых узких экранах весь текст становится на ступень мельче.

Размеры подбирались под Montserrat: при одинаковом кегле он примерно на пятую часть шире Manrope, так что «на глаз» здесь не работает.

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

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