Zenka Dijital'i Nasıl Yaptık? Sıfırdan Bir Blogun Hikâyesi

Şu an okuduğun site, kısa bir süre önce boş bir klasördü. Bu yazıda Zenka Dijital'i sıfırdan nasıl kurduğumuzu, hangi kararları neden aldığımızı ve yol boyunca bulduğumuz hataları anlatıyoruz. Kendi web sitesini yapmayı düşünen herkes için bir yol haritası olsun istedik.

1. Önce plan, sonra kod

İlk kural şuydu: Hemen kod yazmaya başlamak yok. Önce bir yol haritası çıkardık ve projeyi sekiz aşamaya böldük:

1. Temel yapı ve tasarım sistemi
2. Ortak parçalar: menü, footer, tema düğmesi
3. Ana sayfa
4. Blog ve kategoriler
5. Yazı detay sayfası
6. Hakkımızda ve iletişim
7. Kalite kontrolü
8. Yayına alma

Her aşamanın sonunda durup sonucu inceledik ve onay vermeden bir sonrakine geçmedik. Bu sayede hiçbir zaman "her şey birbirine girdi" noktasına gelmedik.

2. Renkleri tek bir yerde topladık

Lacivert, beyaz ve mavi ağırlıklı bir palet istiyorduk. Bütün renkleri, yazı boyutlarını ve boşlukları tek bir dosyada CSS değişkenleri olarak tanımladık:

:root {
  --renk-metin: #0F1B3D;   /* lacivert */
  --renk-vurgu: #156CB8;   /* mavi */
}

[data-theme="dark"] {
  --renk-metin: #E8EAF6;
  --renk-vurgu: #4CB8EE;
}

Koyu tema da tam olarak bu sayede kolaylaştı: Sadece değişkenlerin değerlerini değiştirdik, sitenin geri kalanına dokunmadık. Renkleri seçtikten sonra her metin-zemin eşleşmesinin okunabilirlik oranını tek tek ölçtük; hepsi en az 4.5:1 olan erişilebilirlik sınırını geçti.

3. Önce telefon

Tasarımı önce telefon ekranına göre yaptık, sonra tablet ve bilgisayar için genişlettik. Buna mobil öncelikli tasarım denir. Yazı kartlarını dizmek için CSS Grid yazımızda anlattığımız tek satırlık yöntemi kullandık: Telefonda 1, tablette 2, bilgisayarda 3 sütun, hiç medya sorgusu yazmadan.

4. Bütün yazılar tek bir dosyada

Bir veritabanı ya da sunucu kullanmak istemedik. Bunun yerine bütün yazıların bilgilerini (başlık, özet, kategori, tarih) bir JavaScript dosyasında listeledik. Ana sayfadaki kartlar, blog listesi, kategori sayıları ve ilgili yazılar hep bu listeden kendiliğinden oluşuyor. Yeni bir yazı eklemek, listeye bir satır eklemek kadar kolay. Bu yazıyı da tam olarak böyle ekledik.

5. Sahte "Gönderildi!" mesajı yok

Sunucusu olmayan bir site e-posta gönderemez. Birçok şablon bu durumda yine de "Mesajınız iletildi!" yazar. Biz bunu yapmadık. İletişim formumuz bütün alanları gerçekten kontrol ediyor, ama sistem henüz aktif olmadığı için mesajın gönderilmediğini açıkça söylüyor. Ziyaretçiye karşı dürüst olmak, güzel görünen bir yalan mesajdan daha önemli.

6. Test, test, test

Her aşamadan sonra siteyi telefon, tablet ve bilgisayar boyutlarında, açık ve koyu temada otomatik olarak denedik. Bu testler gerçekten işe yaradı; bulduğumuz hatalardan bazıları:

• Hamburger menü: Menü açılınca üç çizgi "✕" yerine "+" şeklini alıyordu. Sebep, CSS seçicinin yanlış öğeyi de döndürmesiydi.
• Klavye odağı: Telefon menüsü açıldığında klavye odağı menüye geçmiyordu; çünkü menü o an hâlâ "gizli" sayılıyordu.
• Tablet görünümü: Ana sayfadaki öne çıkan kartın başlığı tablette beş satıra bölünüyordu. Yan yana düzeni sadece bilgisayar ekranında açarak çözdük.
• Koyu tema: 404 sayfasındaki "404" yazısının ilk rakamı, koyu zeminle aynı renge gelip kayboluyordu.

Son kalite kontrolünde bütün sayfaları kırık bağlantı, eksik görsel açıklaması, etiketsiz form alanı, düşük kontrast ve yana taşma için taradık. Denetim aracının gerçekten hata yakaladığından emin olmak için onu bir kez de bilerek hatalarla doldurduğumuz bir deneme sayfasında çalıştırdık.

7. Ücretsiz ve yasal kalmak

Baştan iki kural koyduk: Ücretli hiçbir servis yok ve her şey yasal olacak. Bu yüzden:

• Bütün yazılar ve kapak çizimleri bu site için özgün olarak hazırlandı; telifli görsel kullanılmadı.
• Yazı tipleri, ticari kullanıma da açık olan ücretsiz lisanslı yazı tipleri.
• Site ziyaretçiden hiçbir kişisel veri toplamıyor; tarayıcıda yalnızca seçtiğin tema hatırlanıyor.
• Hakkımızda sayfasına uydurma kişiler, sahte yorumlar ya da şişirilmiş rakamlar koymadık.

Öğrendiklerimiz

• Küçük adımlar büyük projeleri yönetilebilir kılar. Sekiz küçük aşama, tek bir dev işten çok daha az korkutucu.
• Düzenli dosya yapısı geleceğe yatırımdır. Renkler bir dosyada, yazılar bir dosyada, ortak parçalar bir dosyada.
• Erişilebilirlik sonradan eklenmez. Klavyeyle gezinme, ekran okuyucu etiketleri ve okunabilir renkler baştan düşünülmeli.
• Dürüstlük de bir tasarım kararıdır. Çalışmayan bir şeyi çalışıyormuş gibi göstermemek, kullanıcının güvenini kazanır.

Sırada ne var?

Bu yazıyı yazdığımızda yol haritamızın son aşaması olan yayına alma hâlâ bizi bekliyordu. O adımı da tamamladık: Siteyi hosting'e para vermeden nasıl yayına aldığımızı Hosting'e Para Vermeden Web Sitesi Yayınlamak yazımızda anlattık.