Kafe · Specialty Coffee
Tailor Brothers
Canlıdatailorbrothers.com.tr, Şehreküstü, Bursa
Bir kafenin sitesini, Şehreküstü'nün sokaklarını anlatan bir saha defterine çevirdik.
Bursa Şehreküstü'nde el işçiliğiyle demlenen kahve için marka sitesi. İmza Cedric Pasta, sezonluk lateler ve soğuk demler menü üzerinden tanıtılıyor.

- Menü kalemi
- 78
- Menü kategorisi
- 5
- Bursa Notları
- 6 not
- Sadakat
- 6 mühür, 7. kahve
Tailor Brothers kimdir?
Tailor Brothers, Bursa'nın tarihi Şehreküstü mahallesinde, Sevinç Sokak'ta bir specialty coffee atölyesi ve espresso bar. Sıcak ve soğuk kahvelerden cold brew'a, Türk kahvesinden salep ve chai'ye uzanan bir menüyü ve imza tatlısı Cedric Pasta'yı sunuyor. Mahalle sakinlerine, Heykel–Ulu Cami hattında yürüyenlere ve Yemeksepeti üzerinden sipariş verenlere hizmet ediyor.
Adres: Sevinç Sk. No:9 · Şehreküstü · 16050 Osmangazi · Bursa
İhtiyaç
Bir kafenin web sitesi çoğu zaman bir menü PDF'i ve bir harita bağlantısından ibaret kalır. Tailor Brothers'ın ise anlatacak bir hikâyesi vardı: bir terzinin titizliğiyle ölçülen kahve ve Bursa'nın ipek, koza ve terzi geleneği. Site bu kimliği taşırken telefondan gelen “şu an açık mı, ne var, nasıl sipariş veririm” sorularına saniyeler içinde cevap vermeliydi.
Menü kalabalıktı: elliyi aşan içecek, boy seçenekleri, sezonluk ürünler. Bunu dükkânda QR kodla açılan, mobilde rahat gezilen ve kafenin kendisinin kolayca güncelleyebileceği bir yapıya oturtmak gerekiyordu.
Nasıl çözdük?
Ana sayfayı numaralı bölümlerle bir dergi gibi kurguladık: Hikâye, İmza (Cedric Pasta), Menü, Bursa Notları, Bir Gün, Sadakat ve Ziyaret. “Atölye Notları” kutusunda demleme ısısı, espresso oranı, cold brew bekleme süresi ve Türk kahvesi öğütüm inceliği gibi barista ayrıntıları paylaşılıyor.
Menüyü ayrı bir /menu sayfasına, tek bir menu.json dosyasından beslenen hafif bir uygulamaya dönüştürdük: ürün sayılarıyla beş kategori çipi, Türkçe karakterleri normalize eden anlık arama, kaydırdıkça aktif kategoriyi vurgulayan scrollspy ve İMZA, YENİ, TREND, SEZONLUK, UNESCO gibi rozetler. Menü değişince yalnızca JSON dosyası güncelleniyor.
Yerel aramada görünmek için içeriği gerçek bir semtin diliyle yazdık: Bursa Notları'nda Şehreküstü adının anlamı, Koza Han, Ulu Cami ve Heykel'e yürüme mesafeleri, UNESCO listesindeki Türk kahvesi, Uludağ ve Bursa mutfağıyla kahve eşleştirmeleri var. Sayfada CafeOrCoffeeShop yapılandırılmış verisi, koordinatlar ve çalışma saatleri tanımlı.
Projede öne çıkanlar
Canlı açık / kapalı göstergesi
Sayfa İstanbul saat dilimine göre günü ve saati okuyup “Açık şimdi”, “Kapanışa 20 dk” ya da “Kapalı · 08:00 açılır” gibi bir etiket gösteriyor. Hafta içi, cumartesi ve pazar saatleri ayrı ayrı tanımlı; cumartesi gece yarısına kadar açık olması da hesaba katılıyor.
Aranabilir mobil menü
78 kalem beş kategoride: sıcak kahve, soğuk kahve, soğuk içecek, sıcak içecek ve tatlı. “sutlu turk” yazan da “Sütlü Türk Kahvesi”ni buluyor, çünkü arama Türkçe karakterleri sadeleştiriyor. Altta Ara, WhatsApp ve Yemeksepeti düğmeleri sabit duruyor.
Bursa Notları
Altı not ve küçük bir sözlük: Şehreküstü, 2013'te UNESCO listesine giren Türk kahvesi geleneği, Uludağ, Koza Han, Bursa mutfağı eşleştirmeleri (kestane şekeri ile espresso, İskender ile sade Türk kahvesi, cantık ile cortado) ve sezon planı. Bir kafe sitesi, semtin kısa bir rehberine dönüşüyor.
Dokunulabilir sadakat kartı
Kafenin “6 mühür, 7. kahve bizden” kartı sitede tıklanabilir: ziyaretçi mühürleri tek tek vuruyor, altıncısında “bir sonraki içeceğin bizden” mesajı çıkıyor. Uygulama yok, hesap yok; dükkândaki kağıt kartın dijital tanıtımı.
Şehreküstü'de bir gün
08:00'deki ilk öğütümden 22:00'deki son bardağa saat saat bir zaman çizelgesi. Her saate bir içecek eşleşiyor: öğlen İskender sonrası Türk kahvesi, ikindi Koza Han'dan sonra Spanish Latte, akşam Tophane'de cold brew.
Çatısız, hafif kod
Site hiçbir framework kullanmadan düz HTML, CSS ve birkaç KB JavaScript ile yazıldı. Telefonda anında açılıyor; canlı saat, menü araması ve mühür kartı bu küçük betiklerin içinde.
Sitenin içinden

Sitenin yapısı
- 01 Hikâye ve Atölye Notları
- 02 İmza: Cedric Pasta
- 03 Menü özeti: 5 kategori
- 04 Bursa Notları: 6 not ve sözlük
- 05 Bir Gün: saat saat Şehreküstü
- 06 Sadakat: etkileşimli mühür kartı
- 07 Ziyaret: adres, saatler, harita
- Tam menü (/menu): arama, kategori çipleri, rozetler
Ziyaretçi nasıl müşteriye dönüşüyor?
Ziyaretçi üst bantta ve her bölümde üç seçenek görüyor: WhatsApp'tan sipariş vermek, Yemeksepeti'nden ısmarlamak ya da tek dokunuşla aramak. Cedric Pasta bölümü doğrudan Yemeksepeti'ne bağlanıyor. Dükkâna gelmek isteyen canlı açık/kapalı etiketine bakıp Google Maps bağlantısıyla yola çıkıyor; menü sayfasının altında da Ara, WhatsApp ve Yemeksepeti düğmeleri sabit duruyor.
Ekipten
Bu projeyi neden seviyoruz?
Tailor Brothers'ta en çok sevdiğimiz şey, bir kafe sitesinin aynı zamanda bir semt rehberi olabilmesi. Koza Han'dan latte'ye yürünen bir ikindi, İskender'den sonra sade bir Türk kahvesi, Tophane'ye bakarken bir cold brew: bunları yazarken markanın sesini bulduk. Teknik tarafta da hiçbir çatıya yaslanmadan canlı açık/kapalı durumu, aranabilir menü ve tıklanabilir mühür kartı çıkarmak ayrı bir keyifti.
Bu projeden yola çıkarak sık sorulanlar
Menümüzü sık değiştiriyoruz; sitede güncellemek zor olur mu?
Tailor Brothers'ta menü tek bir JSON dosyasından besleniyor. Yeni bir içecek eklemek ya da sezonluk bir ürünü çıkarmak o dosyada tek satırlık bir değişiklik; kategori sayıları, arama ve rozetler kendiliğinden güncelleniyor.
Sitede “şu an açık mıyız” bilgisini gösterebilir misiniz?
Evet. Tailor Brothers'ta sayfa İstanbul saatine göre o anki durumu hesaplayıp “Açık şimdi”, “Kapanışa 20 dk” ya da “Kapalı · 08:00 açılır” gibi bir etiket gösteriyor. Hafta içi ve hafta sonu saatleri ayrı ayrı tanımlanabiliyor.
Yemeksepeti siparişlerimizi siteye bağlayabilir miyiz?
Tailor Brothers'ta Yemeksepeti bağlantısı üst bantta, imza ürün bölümünde, ziyaret bölümünde ve menü sayfasının sabit alt çubuğunda duruyor. Ziyaretçi hangi bölümdeyse oradan tek dokunuşla sipariş ekranına geçiyor; WhatsApp ve telefon da hemen yanında.
Bursa’nın yerel markaları: diğer projeler
Tüm referanslar
CanlıFitdans
Spor & Dans Okulu
42 dans stili, filtrelenebilir bir haftalık program ve iki dakikalık randevu: dans okuluna adım atmanın kısa yolu.
Bursa Nilüfer'de 2006'dan beri hizmet veren TDSF tescilli dans okulu ve %100 Technogym donanımlı fitness merkezi. Program kataloğu, eğitmen kadrosu ve ücretsiz deneme dersi akışı odaklı kurumsal site.
CanlıMaster Rowing Club
Su Sporları
Beş branşı beş ayrı rehber sayfaya, kurumsal dragon boat festivalini kendi sayfasına taşıdık.
Bursa'nın ilk ve tek 5 branşlı su sporları tesisi için tanıtım sitesi. Kürek, kano, SUP, dragon boat ve SUP yoga branşları Dağyenice Gölü'ndeki tesis üzerinden anlatılıyor.
CanlıArtopier
B2B E-Ticaret · Logolu Porselen
Logonu yükle, fincanın üzerinde 360° döndür, seti sepete at: hepsi tarayıcıda, tek ekranda.
Firmalara logolu porselen ofis setleri satan B2B e-ticaret sitesi. Satın almacı logosunu yüklüyor, fincanın, kupanın ve çerezliğin üzerinde 3D olarak 360° döndürüyor, kurumsal faturayla sipariş veriyor.