Anasayfa › Web Tasarım
Web Tasarım
Web tasarım, sitenin görünümünü ve sitede kullanılan araçları planlar: sitenin tamamı birden değil, bölüm bölüm yenilenmesi, site için yapılacak fotoğraf çekiminin planlanması, ziyaretçinin soru yazabileceği canlı sohbet penceresinin siteye eklenmesi ve online randevu sistemi seçilirken bakılacak özellikler.
Web Tasarım Çalışmasında Site Bölüm Bölüm Yenilenebilir mi?
Bölüm bölüm yenileme, sitenin tasarımını bir kerede değiştirmek yerine her aşamada bir sayfa grubunu yenilemektir. Sayfa grubu, aynı düzeni paylaşan sayfalardır; hizmetler, blog ve yasal metin sayfaları ayrı gruplardır. Anasayfa ve iletişim sayfası kendi başına birer gruptur. Web tasarım çalışmasında bu yol, sitenin altyapısı grupların ayrı ayrı değiştirilmesine izin veriyorsa uygulanır.
WordPress sitelerinde her sayfa grubu bir şablonla görüntülenir. Elementor Pro’nun Tema Oluşturucu bölümünde üst alan, alt alan, blog yazısı ve arşiv sayfaları için ayrı şablonlar bulunur. Şablonlar ayrıysa bir grup, ötekilere dokunmadan değiştirilir. Tema artık güncellenmiyorsa ya da sayfa düzenleri temanın dosyalarına yazılmışsa bu ayrım yapılamaz. O durumda site bütün olarak yeniden kurulur.
Her sayfada görünen ortak öğeler önce ele alınır. Bunlar üst menü, alt alan, renkler, yazı tipleri ve düğme biçimleridir. Elementor’da renkler, yazı tipleri ve düğme biçimleri Site Ayarları bölümünde tanımlanır. Ortak öğeler değişince bütün gruplar yeni görünümü aynı anda alır. Sayfa düzenleri ardından sırayla yenilenir. Böylece eski ve yeni sayfalar arasında renk ve düğme farkı oluşmaz.
Yenileme sırası ziyaret verilerine göre belirlenir. GA4’ün Sayfalar ve ekranlar raporu, en çok görüntülenen sayfaları gösterir. Search Console’un Performans raporu ise aramada en çok gösterim ve tıklama alan sayfaları listeler. Gösterim, sayfanın arama sonucunda görüntülenmesidir. İki listede üstte yer alan grup önce yenilenir. Her grup aylık iş listesinde ayrı bir madde olarak yer alır ve onayınızdan sonra başlar.
Yenileme sırasında sayfa adresleri değişmez. Sayfa başlığı, meta açıklama, ara başlıklar ve iç bağlantılar korunur. Meta açıklama, arama sonucunda başlığın altında gösterilebilen kısa özettir. Çalışma, canlı sitenin kopyası olan bir hazırlık sitesinde yapılır. Hazırlık sitesi parolayla kapatılır ve Google bu kopyayı dizine almaz. Yeni düzen orada farklı ekran boyutlarında denendikten sonra canlı siteye aktarılır.
Her aşamadan sonra yenilenen sayfalar PageSpeed Insights ile ölçülür. Ölçümde Core Web Vitals değerlerine bakılır. Core Web Vitals, Google’ın sayfanın yüklenmesini, etkileşime tepkisini ve görsel kararlılığını ölçtüğü değerlerdir. Core Web Vitals raporu Search Console’da yer alır ve gerçek kullanıcı verisinden hesaplanır. Rapor, değişikliği bu yüzden gecikmeli gösterir. Sayfa dizine ekleme raporunda yeni hata yoksa sıradaki gruba geçilir.
Site İçin Fotoğraf Çekimi Nasıl Planlanır?
Çekim planı, çekimden önce hazırlanan fotoğraf listesidir. Listede her fotoğrafın hangi sayfada ve hangi alanda kullanılacağı yazar. Fotoğrafın yatay mı dikey mi olacağı, karede neyin yer alacağı ve yazı için boşluk bırakılıp bırakılmayacağı da belirtilir. Plan, sitenin sayfa yapısından çıkarılır. Böylece çekim günü her görsel alanı için gereken kare alınır.
Bir sitede görsel kullanan alanlar sayfa sayfa listelenir. Anasayfanın üst alanı, hizmet kartları, hakkımızda sayfası ve blog kapakları bu alanlardandır. Paylaşım görseli de listeye girer; bu görsel, sayfa sosyal medyada paylaşıldığında bağlantının yanında çıkar. Her alanın en-boy oranı tasarımdan alınır. Telefonda biçimi değişen alanlar için aynı karenin yatay ve dikey hâli yazılır.
Çekim ayarları, yan yana kullanılacak fotoğrafların uyumunu belirler. Aynı alanda duracak fotoğraflar aynı ışıkta ve aynı beyaz dengesiyle çekilir. Beyaz dengesi, renklerin sıcak ya da soğuk görünmesini belirleyen ayardır. Fotoğraf makinesi yere paralel tutulur ve arka plan sade bırakılır. Çözünürlük, yüksek yoğunluklu ekranlarda en geniş görsel alanını dolduracak kadar büyük seçilir.
Çekim günü liste satır satır izlenir. Her kare birkaç kez çekilir, gerekiyorsa iki yönde de alınır ve tamamlanan satır işaretlenir. Google İşletme Profili’ne eklenecek fotoğraflar da aynı gün çekilir. Google’ın profil fotoğrafı yönergeleri, fotoğrafların net ve iyi aydınlatılmış olmasını ister. Aynı yönergelere göre fotoğrafta belirgin değişiklik ya da aşırı filtre bulunmaz. Profil fotoğrafları bu nedenle filtresiz bırakılır.
Çekimden sonra fotoğraflar seçilir, düzeltilir ve alanların oranına göre kırpılır. Düzeltme, ışığın, rengin ve eğik çizgilerin ayarlanmasıdır. Dosyalar sıkıştırılır ve WebP biçiminde dışa aktarılır. Dosya adı fotoğrafın içeriğini anlatan sözcüklerden oluşur. Her görsel için alternatif metin hazırlanır. Bu metin, görseli göremeyen kullanıcıya ve Google’a görselde ne bulunduğunu anlatır. Özgün boyutlu dosyalar web tasarım çalışmasının arşivinde ayrıca saklanır.
Fotoğraflar, anlattıkları konunun metnine yakın yerleştirilir. Google’ın görsel arama belgesi açıklayıcı dosya adını, alternatif metni ve görselin ilgili metnin yakınında durmasını önerir. WordPress, yüklenen her görsel için farklı genişliklerde kopyalar oluşturur. Tarayıcı bunlardan ekranın genişliğine uyanı indirir. Böylece telefonda küçük, geniş ekranda büyük dosya yüklenir. Yayından sonra PageSpeed Insights’ın görsel boyutuyla ilgili önerilerine bakılır. Gereğinden büyük sunulan görseller yeniden boyutlandırılır.
Canlı Sohbet Penceresi Siteye Nasıl Eklenir?
Canlı sohbet penceresi, ziyaretçinin sayfadan ayrılmadan yazılı mesaj gönderdiği küçük penceredir. Web tasarım açısından pencere, sohbet hizmetinin sunucusundan yüklenen bir JavaScript koduyla çalışır. JavaScript, tarayıcıda çalışan ve sayfaya etkileşim ekleyen programlama dilidir. Gelen mesajlar hizmetin panelinde ya da telefon uygulamasında görünür. Kurulumdan önce pencerenin görüneceği sayfalar ve mesajlara kimin cevap vereceği belirlenir.
Sohbet hizmeti, kurulum için kısa bir kod ya da bir WordPress eklentisi verir. Kod, bütün sayfalara kod eklemeye yarayan bir alana bir kez yerleştirilir; Elementor Pro’da bu alan özel kod bölümüdür. Sayfalara tek tek eklenmez. Eklenti kullanılıyorsa hesap bağlantısı eklentinin ayarlarından kurulur. Pencerenin açılacağı sayfalar hizmetin panelinden seçilir. Yasal metin sayfalarında pencere kapatılabilir.
Sohbet kodu başka bir sunucudan yüklendiği için sayfaya ağırlık ekler. Bu ağırlık sayfanın ilk açılışını ve dokunuşlara verilen tepkiyi yavaşlatabilir. Core Web Vitals’taki INP, sayfanın bir tıklamaya ya da dokunuşa ne kadar sürede cevap verdiğini ölçer. Birçok sohbet hizmeti, pencereyi sayfa yüklendikten sonra getiren bir ayar sunar. Kurulumdan önce ve sonra PageSpeed Insights ile ölçüm yapılır.
Pencere sayfanın alt köşesine yerleştirilir. Kapalıyken yalnızca küçük bir düğme görünür. Düğme, çerez bandını, öteki sabit düğmeleri ve formun gönderme düğmesini örtmez. Telefonda pencere kendiliğinden açılmaz. Google, telefonda ana içeriği örten pencerelerin içeriğe erişimi zorlaştırdığını belirtir. Düğme klavyeyle de seçilebilir. Ekran okuyucu, yani ekrandaki yazıları sesli okuyan yazılım için düğmeye bir etiket verilir.
Mesai saatleri hizmetin panelinde tanımlanır. Bu saatlerin dışında pencere bir mesaj formuna dönüşür. Formdan gelen mesaj belirlenen e-posta adresine iletilir ve ziyaretçiye cevabın ne zaman verileceği yazılır. Sohbet kayıtları ad, telefon ve mesaj içeriği taşır; yani kişisel veri içerir. Bu yüzden gizlilik politikasına sohbet hizmeti eklenir. Hizmet çerez kullanıyorsa bu çerezler, sitenin çerez onay aracındaki listeye yazılır.
Sohbetin kullanımı GA4’te etkinliklerle ölçülür. Etkinlik, GA4’te sayfada yapılan bir işlemin kaydıdır. Pencerenin açılması ve mesajın gönderilmesi ayrı etkinlikler olarak tanımlanır. Mesaj gönderimi anahtar etkinlik olarak işaretlenir. Anahtar etkinlik, GA4’te sitenin amacına giden işlemlere verilen addır. Bu sayılar form gönderimleri ve telefon tıklamalarıyla yan yana konur. Böylece sitedeki iletişim yollarından hangisinin kullanıldığı görülür.
Online Randevu Sistemi Seçilirken Nelere Bakılır?
Online randevu sistemi, ziyaretçinin uygun gün ve saati seçip kaydını kendisinin oluşturduğu araçtır. İki türü bulunur. Birincisi WordPress’e kurulan eklentidir; kayıtlar sitenizin veritabanında tutulur. İkincisi dış hizmettir; sistem hizmetin sunucusunda çalışır ve sitenizde gösterilir. Web tasarım sürecinde seçim, her iki türe aynı ölçütler uygulanarak yapılır. Seçim kurulumdan önce yapılır; sistemi sonradan değiştirmek kayıtların taşınmasını gerektirir.
İlk ölçüt, sistemin sitede nasıl gösterildiğidir. Sistem sayfanın içine yerleşebilir, gömülü bir çerçevede açılabilir ya da hizmetin kendi sayfasına giden bir bağlantıyla çalışabilir. Son iki yolda randevu adımları başka bir alan adında tamamlanır. Bu adımları sitenizdeki ziyaretle birleştirmek için GA4’te alanlar arası ölçüm kurulur. Bu ayarı desteklemeyen hizmette randevudan sonra sitenize dönüş adresi tanımlanır.
İkinci ölçüt takvim ve kurallardır. Sistem, randevuları yöneten kişinin kullandığı takvimle iki yönlü eşitlenir. Böylece başka yoldan alınan bir randevu sitedeki saati de kapatır. Hizmet süreleri, iki randevu arasındaki ara, en erken ve en geç randevu günü panelden ayarlanır. İptal ve değişiklik kuralları ile e-posta ya da kısa mesaj hatırlatmaları da bu ölçüte girer.
Üçüncü ölçüt telefonda kullanımdır. Gün seçimi dokunarak yapılabilmeli, takvim ekrandan taşmamalı ve yana kaydırma gerektirmemelidir. Formda yalnızca gerekli alanlar bulunur. Telefon alanına dokunulduğunda rakam klavyesi açılır. Hata mesajı ilgili alanın yanında görünür. Onay ekranı, randevunun gününü, saatini ve iptal yolunu gösterir. Takvim klavyeyle gezilebilmeli ve günler ekran okuyucuya adlarıyla okunmalıdır. Bu denemeler farklı ekran boyutlarındaki telefonlarda yapılır.
Dördüncü ölçüt veridir. Sistemin hangi bilgileri topladığı, bu bilgilerin nerede saklandığı ve kimlerin erişebildiği öğrenilir. Randevu ve müşteri listesinin tablo dosyası olarak dışa aktarılıp aktarılamadığına bakılır. Dışa aktarma, hizmet değiştirildiğinde kayıtların sizde kalmasını sağlar. Formun altına gizlilik politikasına giden bir bağlantı eklenir. Bu politika, randevu bilgilerinin hangi amaçla işlendiğini ve ne kadar süre saklandığını anlatır.
Son ölçüt hız ve görünürlüktür. Sistemin kodunun sayfa hızına etkisi, kurulumdan sonra PageSpeed Insights raporunda görülür. Randevu sayfası kendi adresiyle menüde yer alır. Google İşletme Profili, uygun profillerde randevu bağlantısı eklemeye izin verir; bu alana randevu sayfasının adresi yazılabilir. Randevu sistemi, web tasarım ve SEO işlerini birlikte yürüten aynı ekip tarafından bu ölçütlerle kurulur.
Hazırlık sitesinde yaptığım değişiklikleri canlı siteye nasıl aktarırım?
Barındırma panelinizde hazırlık sitesi aracı varsa aktarma aynı araçtan yapılır. Aktarmadan önce canlı sitenin tam yedeğini alın. Hazırlık sitesindeki parola koruması ve arama motorlarını engelleme ayarı canlıya taşınmamalıdır. WordPress’te bu ayar, Ayarlar menüsündeki Okuma bölümündedir. Aktarmadan sonra önbelleği temizleyin ve sayfaları telefonda ve bilgisayarda açarak kontrol edin.
Fotoğraflardaki çekim yeri bilgisini siteye yüklemeden önce silmeli miyim?
Telefonlar ve fotoğraf makineleri dosyanın içine çekim yeri ve cihaz bilgisi yazabilir. Bu bilgi, dosyayı indiren herkes tarafından okunabilir. Görsel düzenleme programında dışa aktarma sırasında bu bilgiyi kaldırma seçeneğini işaretleyin. Bazı görsel sıkıştırma eklentileri de yükleme sırasında bu bilgiyi siler; ayarlarını kontrol edin.
Sohbet düğmesi sayfa açıldıktan sonra yükleniyor ve içerik kayıyor; bunu nasıl önlerim?
Düğme içeriği iten bir öğe olarak eklenmişse sayfada kayma olur. Core Web Vitals’taki CLS, sayfa açılırken oluşan bu kaymaları ölçer. Düğme sayfanın akışına değil, ekranın köşesine sabitlenmelidir. Sohbet hizmetinin konum ayarlarına bakın ve değişiklikten sonra CLS değerini PageSpeed Insights ile yeniden ölçün.
Randevu hatırlatma e-postalarım istenmeyen e-posta klasörüne düşüyor; ne yapabilirim?
E-postalar hizmetin sunucusundan alan adınız adına gönderiliyorsa, hizmetin verdiği SPF ve DKIM kayıtlarını alan adınızın DNS ayarlarına ekleyin. DNS, alan adının hangi sunucularla çalışacağını belirleyen kayıt sistemidir. Bu kayıtlar, gönderen sunucunun yetkili olduğunu gösterir. Ardından deneme randevusu oluşturup gelen e-postanın gönderen bilgisini kontrol edin.