Yakitori: restoran saytı

Müştəri haqqında

Yakitori · Asian Food - Bakıda, Sevinc Mall-un dördüncü mərtəbəsində yerləşən Asiya mətbəxi restoranıdır: suşi və rollar, şorbalar, əriştə, qızardılmış düyü, udon, tempura, salatlar, vaflilər, dondurma və içkilər, üstəlik şəhər üzrə çatdırılma. Belə restoranın qonağı sayta bir şey üçün gəlir: qiymətlərlə menyuya baxmaq və zəng etmək. Deməli, sayt telefonda dərhal açılmalı və yeməyi siyahıdakı sətir kimi deyil, fotoşəkil kimi göstərməlidir.

Nə etdik

• Saytı təmiz HTML, CSS və JavaScript ilə qurduq: nə CMS, nə bilder, nə də bir dənə xarici asılılıq. Səhifələr hazır fayl kimi verilir, yeniləmə qovluğun köçürülməsinə çevrilir, plaginlərin yenilənməsində sınacaq bir şey yoxdur.
• Məlumatı və renderi ayırdıq. Bütün menyu ayrıca məlumat faylında yaşayır, skript ondan həm kart şəbəkəsini, həm də bölmələr üzrə naviqasiyanı qurur. Qiyməti və ya tərkibi dəyişmək üçün versdaya toxunmaq lazım deyil.
• İki dil versiyasını klient tərəfdə keçid deyil, ayrıca səhifə kimi hazırladıq: rus dili yakitori.az ünvanında, Azərbaycan dili yakitori.az/az ünvanında. Hər birinin öz canonical-ı və tam hreflang klasteri var - ru, az və x-default. Axtarış sistemi mətnini dəyişən bir sənəd deyil, iki müstəqil sənəd görür.
• Menyunu 15 bölməyə ayırdıq - setlərdən və kombolardan limonadlara qədər, - suşi və rollar daxilində beş qrupla: xosomaki, uramaki, isti rollar, bişmiş rollar, suşi-burger və düyü topları. Son üç bölmə qiymət cədvəli kimi verilir və avtomatik olaraq sütunlara yığılır.
• Bölmələr üzrə yapışqan naviqasiya qurduq: aktiv bənd kəsişmə müşahidəçisi ilə işıqlandırılır, lent təkərlə sürüşür və siçanla dartılır, dartmadan sonrakı klik isə söndürülür - əks halda dartma təsadüfən başqa bölməyə aparardı.
• Laytboks əlavə etdik: istənilən fotoya klik onu tam ekranda açır, istənilən klik və Escape düyməsi bağlayır.
• Yemək fotolarını fayllara toxunmadan, yalnız CSS vasitəsilə kadrladıq. Şorbalarda miqyas və kadr nöqtəsi elə seçilib ki, kasalar sırada eyni ölçüdə çıxsın; laytboks isə toxunulmamış orijinalı açır, çünki o, kadrlayan konteynerdən kənarda yaşayır.
• Axtarış üçün tam işarələmə yazdıq: title, description, canonical, hreflang, geo-metaməlumatlar, Open Graph və Twitter kartı, telefon, ünvan, iş saatları, koordinatlar və qiymət kateqoriyası ilə JSON-LD Restaurant.
• Bütün rastr qrafikanı WebP-yə çevirdik və Cloudflare Pages-də yerləşdirdik; www ünvanı yönləndirmə ilə əsas ünvana aparılır, ona görə çap olunmuş flayerdəki QR-kod işlək qalır - çapa məhz www variantı gedib.

Dizayn və struktur

Sayt brendin iki teması üzərində dayanır. Tünd tema - başlıq, birinci ekran və altlıq: tünd-qəhvəyi fon, krem mətn, qızılı yazılar və başlığın altında qırmızı xətt. Açıq tema - menyunun özü: seyqayha naxışlı krem kağız, ağ yemək kartları, qırmızı qiymətlər. Nəticədə tünd üz qabığının üzərinə qoyulmuş çap menyu-kartı alınır, yəni restoranın özü nədirsə, o. Birinci ekran reklam deyil: başlıq, bir cümlə, sifariş düyməsi və iki sətir fakt - iş saatları və ünvan. Telefon başlığa çıxarılıb və altlıqda təkrarlanıb, çünki burada sifariş səbətlə deyil, zənglə gedir.

Tipoqrafika və Azərbaycan versiyası

Üç qarnitur, saytda dördüncüsü yoxdur: başlıqlarda, yemək adlarında və qiymətlərdə Montserrat, tərkib və təsvirlərdə Manrope, bölmələrin yapon imzalarında Noto Sans JP. Bu bölgü dekorativ deyil. Manrope-da manat işarəsi və Azərbaycan Ə hərfi fiziki olaraq yoxdur, ona görə bütün qiymətlər Montserrat ilə yığılıb, Manrope isə həmin Montserrat ilə sığortalanıb: Azərbaycan təsvirlərindəki Ə hərfini məhz o çəkir. Bu olmasa, brauzer səssizcə sistem şriftini qoyardı: CSS-də bunu görmək mümkün deyil, şrift təyin olunub və hər şey «işləyir», amma hərf sətirdən düşür. Gözlə deyil, skriptlə yoxladıq: o, brauzerdən hər iki səhifədə hər mətn qovşağının hansı real şriftlə çəkildiyini soruşur.

İkinci Azərbaycan tələsi registrdir. Adi uppercase i hərfini I-ya çevirir, Azərbaycan dilində isə İ lazımdır, ona görə kapsla göstərilən bütün sətirlər məlumatlarda artıq böyük hərflərlə saxlanılır və çevirmə boşa işləyir.

Sayt telefonda özünü necə aparır

Sifarişlərin böyük hissəsi telefondan gəlir, ona görə menyu şəbəkəsini bir ekranda deyil, on dörd endə yoxladıq - geniş monitordan dar telefona qədər. Onların hamısının arxasında bir qayda dayanır: yeməyin adı heç yerdə iki sətrə qırılıb qiymətin üstünə düşməməlidir. Bunun üçün planşetdə şəbəkə məcburi iki sütuna keçir, telefonda qiymət adla sətri bölüşmək əvəzinə onun altına düşür, ən dar ekranlarda isə bütün mətn kiçilir. Ölçülər Montserrat-a görə seçilib: eyni keglldə o, Manrope-dan təxminən beşdə bir enlidir, ona görə burada «gözəyarı» üsul işləmir.

Müddət və proses

Təxminən bir həftəlik iş. Sayt 2026-cı il avqustun 17-də yakitori.az ünvanında dərc olunub, layihə isə avqustun 18-də, flayerlə eyni vaxtda bağlanıb: flayerdə sayta aparan QR-kod çap olunur, ona görə onları ayrıca təhvil vermək mümkün deyildi.

Texnologiyalar