Web sitesi tasarımı ve geliştirme

Kurumsal site ile satış sayfası aynı iş değil

Kurumsal bir site, sizi arayan kişinin “doğru firma mı” sorusuna cevap verir: ne yaptığınız, kimlerle çalıştığınız, nasıl ulaşılacağı. Satış sayfasının işi ise tek bir eyleme götürmektir — form, arama, teklif. İkisini aynı sayfaya sıkıştırmaya çalışmak genellikle ikisini de zayıflatır.

İlk toplantıda sitenin hangisi olacağını, hangi sayfaların hangi soruya cevap vereceğini kâğıda döküyoruz. Sayfa listesi buradan çıkar. Bir sayfanın var olma sebebi yazılamıyorsa o sayfayı kurmuyoruz; menüde yer kaplayan ama kimsenin girmediği sayfa, sitenin yapısını da arama motorundaki sinyalini de bulandırır.

Statik üretim: bu siteyi neden böyle kurduk

Okuduğunuz bu site Next.js ile statik olarak üretiliyor. Yani sayfalar ziyaretçi geldiğinde bir sunucuda hesaplanmıyor; derleme anında hazır HTML olarak yazılıyor ve dağıtım ağından servis ediliyor. Sonucu şudur: açılış süresi sunucu yüküne bağlı değildir, saldırı yüzeyi küçüktür ve bakımı gereken bir yönetim paneli arka planda çalışmaz.

Her proje için doğru tercih bu değildir. Ürün stoğu, üyelik, sipariş ya da sık değişen liste içeren sitelerde dinamik tarafa geçeriz. Ayrımı şuna bakarak yaparız: içerik kaç kişi tarafından, ne sıklıkla değişiyor. Haftada birkaç güncelleme yapılan kurumsal bir sitede statik üretim hem daha hızlı hem daha ucuz kalır.

İkisinin karışımı da mümkün: sayfaların çoğu statik üretilirken, yalnızca gerçekten değişken olan parçalar istek anında hesaplanır ya da tarayıcıda yüklenir. Bir sitenin tamamını dinamik kurmak için tek bir bölümün değişken olması yeterli bir gerekçe değildir.

İki dil, hreflang ve adres yapısı

Bu sitenin metinleri iki ayrı içerik dosyasında tutuluyor ve her sayfa iki dilde ayrı adresle yayımlanıyor. Ürün ve hizmet yolları dile göre değişiyor: Türkçede /tr/hizmetler/, İngilizcede /en/services/. Sayfalar birbirine hreflang etiketiyle bağlı, ayrıca bir x-default tanımı var; böylece arama motoru hangi ziyaretçiye hangi sürümü göstereceğini biliyor.

Çok dilli yapıyı sonradan eklemek, ilk günde kurmaktan pahalıdır: adresler değişir, yönlendirme tablosu şişer, biriken bağlantı değeri dağılır. Bu yüzden ileride ikinci bir dil ihtimali varsa yapıyı baştan iki dilli kurmayı öneriyoruz — ikinci dil boş kalsa bile.

Telefonda okunabilirlik ve erişilebilirlik

Tasarımı önce dar ekranda kuruyoruz. Gövde metni telefonda yeterince büyük, satır uzunluğu okunabilir aralıkta, dokunulacak alanlar parmakla isabet alacak genişlikte olur. Menü ve form alanları klavyeyle gezilebilir; odak çerçevesi görünür bırakılır.

Erişilebilirlik tarafında başlık hiyerarşisinin gerçekten hiyerarşi olmasına, görsellerin alternatif metnine, renk kontrastına ve “içeriğe geç” bağlantısına bakarız. Bunlar ekran okuyucu kullanan ziyaretçi için gereklidir; yan faydası, aynı yapının arama motoru tarafından da daha net okunmasıdır.

Hareket ve animasyon tarafında da bir sınır koyarız: işletim sisteminde hareket azaltma tercihi açık olan ziyaretçide geçiş efektleri devre dışı kalır. Animasyon, sayfanın anlaşılmasına katkı yapmıyorsa süslemedir ve kaldırılmasında sakınca yoktur.

İçeriği kim, nasıl günceller

İçerik güncelleme yolunu ekibinize göre seçiyoruz. Metinlerin nadiren değiştiği ve teknik bir kişinin bulunduğu yerlerde içerik doğrudan proje dosyalarında tutulur; değişiklik yapılır, site yeniden üretilir. Pazarlama ekibinin sık sık yazı ekleyeceği yerlerde başsız bir içerik yönetim katmanı bağlarız ve yazı yayımlandığında site otomatik olarak yeniden derlenir.

Hangi yolu seçersek seçelim, teslimde içerik alanlarının ne olduğunu ve nerede düzenleneceğini gösteren kısa bir kullanım notu bırakırız. Amaç, her küçük metin değişikliği için bize dönmek zorunda kalmamanızdır.

Yayına alma sırası

Sıra şöyle işler: sayfa listesi ve metin taslakları, tasarım, geliştirme, ön izleme adresinde inceleme, sonra yayın. Ön izleme adresi gerçek siteyle aynı şekilde çalışır; onayınızı ekran görüntüsü üzerinden değil, gezinerek verirsiniz.

Yayın gününde alan adı yönlendirmesi, SSL, site haritası ve Search Console kaydı birlikte yapılır. Mevcut bir siteden geçiyorsanız eski adreslerin listesini çıkarır, karşılığı olanları kalıcı yönlendirmeyle yeni adreslere bağlarız; karşılığı olmayanlar için ne yapılacağına birlikte karar veririz. Yayından sonraki ilk günlerde hata kayıtlarını ve tarama raporlarını takip eder, çıkan kırık bağlantıları kapatırız.

Görseller, yazı tipleri ve sayfa ağırlığı

Bir kurumsal sitenin yavaş açılmasının sebebi neredeyse hiçbir zaman kod değildir; görsellerdir. Telefondan çekilmiş dört megabaytlık bir fotoğrafı sayfaya olduğu gibi koymak, yapılan bütün hız çalışmasını tek başına siler. Görselleri modern biçimlere dönüştürür, ekran genişliğine göre farklı boyutlarını üretir ve ekranın altında kalanların yüklenmesini geciktiririz.

Yazı tipleri ikinci kalemdir. Dışarıdan yüklenen bir yazı tipi gelene kadar metnin görünmez kalması, ziyaretçinin boş sayfaya bakması demektir. Yazı tiplerini kendi alan adımızdan servis eder, yedek yazı tipi zincirini yakın ölçülerde seçer ve metnin yazı tipi yüklenmeden de görünmesini sağlarız.

Üçüncüsü üçüncü taraf betikleridir: ölçüm kodları, sohbet balonları, harita gömüleri. Her biri sayfaya ağırlık ekler. Bunları sayfanın en üstünde değil, gerektiği anda yükleriz; sohbet balonu gibi bazılarını ise ziyaretçi etkileşime geçene kadar hiç yüklemeyiz.