Anasayfa › Web Tasarım
Web Tasarım
Web tasarım, sayfa yerleşimini ve sitenin kolay kullanılmasını planlar: erişilebilirlik eklentilerinin hangi sorunları çözüp hangilerini çözemediği, sosyal medya akışını siteye eklemenin hıza ve görünüme etkisi, sipariş ve ödeme adımlarının sade tutulması ve tasarım dosyalarıyla kaynakların düzenli saklanması.
Web Tasarım Çalışmasında Erişilebilirlik Eklentileri Ne Kadar Yeterlidir?
Erişilebilirlik, bir sitenin görme, duyma, el hareketleri ya da okuma ve anlama güçlüğü yaşayan kişilerce de sorunsuz kullanılabilmesidir. Bu kişilerin bir kısmı siteyi ekran okuyucuyla, yalnızca klavyeyle ya da ekran büyütme aracıyla gezer. Erişilebilirlik eklentileri, siteye bir düğme ve ayar paneli ekleyen hazır yazılımlardır. Web tasarım çalışmasında bu eklentiler bazı ayarları kolaylaştırır, ama sitenin kendi yapısındaki düzeltmelerin yerine geçmez.
Eklenti paneli genellikle yazıyı büyütme, kontrastı artırma, bağlantıları vurgulama ve hareketli öğeleri durdurma seçenekleri sunar. Bazı eklentiler sayfa yüklendikten sonra sayfanın yapısını JavaScript ile tarar. Eksik bilgileri kendiliğinden tamamlamaya çalışır; görsellere otomatik açıklama eklemek bunlardan biridir. Bu değişiklikler her ziyarette tarayıcıda yeniden yapılır. Sitenin kendi kaynağında ise hiçbir şey değişmez.
Bazı eksikleri eklenti gideremez. Görselin içeriğini anlatan alternatif metni, sayfanın konusunu bilen biri yazar; otomatik açıklamalar yanlış ya da eksik olabilir. Başlıkların sırası, form alanlarının etiketleri ve hata iletileri sayfanın yapısında kurulur. Videolar için alt yazı, PDF belgeleri için okunabilir metin hazırlanır. Klavyeyle gezinme sırası da tema ve sayfa düzeniyle belirlenir.
Eklentinin yan etkileri de vardır. Ekran okuyucu kullanan ziyaretçi kendi cihazında ayarlarını zaten yapmıştır; eklentinin değişiklikleri bu ayarlarla çakışabilir. Eklentinin dosyaları her sayfada yüklenir ve sayfanın tepki süresini uzatabilir. Telefonda eklenti düğmesi içeriğin ya da iletişim düğmesinin üstüne binebilir. Bu yüzden kurulu bir eklenti, her sayfada ve her ekran genişliğinde ayrıca denenir.
Kalıcı düzeltmeler tasarımın kendisinde yapılır. Yazı ve zemin renkleri, erişilebilirlik yönergelerinin önerdiği kontrastı sağlayacak biçimde seçilir. Yazı boyutları, tarayıcı yakınlaştırıldığında düzen bozulmadan büyüyecek şekilde ayarlanır. Klavye odağını gösteren çerçeve gizlenmez. Sayfanın başına, menüyü atlayıp içeriğe geçiren bir bağlantı eklenir. Elementor’da her başlığın düzeyi ayrı seçilir, alternatif metinler ortam kütüphanesinde yazılır.
Denetim üç yolla yapılır. Önce bütün sayfalar yalnızca klavyeyle, sekme tuşuyla gezilir. Ardından bilgisayarın ve telefonun yerleşik ekran okuyucusuyla sayfalar dinlenir. PageSpeed Insights raporunun Erişilebilirlik bölümü otomatik bulguları listeler; otomatik testler sorunların ancak bir kısmını bulabilir. Eklenti kullanılacaksa bu denetimler eklenti açıkken de tekrarlanır. Web tasarım denetiminde çıkan eksikler sayfa sayfa değerlendirme raporuna yazılır.
Sosyal Medya Akışını Siteye Eklemek Neleri Etkiler?
Sosyal medya akışı, bir hesabın son gönderilerinin sitede bir kutu içinde gösterilmesidir. Akış iki yolla eklenir. Birincisinde platformun verdiği gömme kodu kullanılır ve gönderiler platformun sunucusundan bir çerçeve içinde yüklenir. İkincisinde bir WordPress eklentisi gönderileri platformdan çeker ve sayfada gösterir. Web tasarım kararında iki yolun etkileri ayrı ayrı ele alınır.
İlk etki hızdır. Gömülü akış, platformun JavaScript dosyalarını, görsellerini ve yazı tiplerini başka sunuculardan yükler. Bu istekler sayfanın toplam ağırlığını artırır. Akış sayfanın üst bölümündeyse LCP, yani ilk ekrandaki en büyük görselin veya metin alanının yüklenme süresi uzayabilir. PageSpeed Insights, üçüncü taraf kaynakların sayfaya etkisini tanılama bölümünde gösterebilir ve en çok süre alanları sıralar.
İkinci etki düzen kaymasıdır. Akış kutusu, gönderiler gelmeden önce yüksekliği belli olmayan boş bir alan olarak açılır. Gönderiler yüklenince kutu büyür ve altındaki içerik aşağı kayar. Bu kayma, Core Web Vitals içindeki CLS değerine yansır. Kutunun yüksekliği bu nedenle baştan sabitlenir. Akış sayfanın alt bölümüne alınır ve ancak ziyaretçi o bölüme kaydırınca yüklenir.
Üçüncü etki arama tarafındadır. Gönderilerin metni platformdaki sayfaya aittir; çerçeve içinde gösterilen içerik sitenizin kendi metni sayılmaz. Google, çerçeve içeriğini onu barındıran sayfayla ilişkilendirmeye çalışabildiğini, ama bunun her zaman gerçekleşmeyebileceğini belirtir. Bu nedenle akış sayfadaki asıl metnin yerine konmaz. Sayfanın konusu kendi başlıkları ve paragraflarıyla anlatılır. Akıştaki bağlantılar da platformun adreslerine gider ve sitenizin iç bağlantı yapısına bir katkı vermez.
Dördüncü etki bakım ve gizlilikle ilgilidir. Eklentiler platforma bir erişim anahtarıyla bağlanır. Anahtarın süresi dolarsa ya da platform bağlantı yöntemini değiştirirse kutu boş kalır veya hata iletisi gösterir. Gömülü içerik, platformun çerezlerini ziyaretçinin tarayıcısına yazabilir. Bu çerezler sitenin çerez bildiriminde yer alır; akış, ziyaretçi izin verdikten sonra yüklenecek biçimde de ayarlanabilir.
Daha hafif seçenekler de vardır. Akış yerine hesaplara giden simgeler konabilir. Seçilen birkaç gönderi görsel olarak siteye yüklenip kendi alternatif metniyle gösterilebilir. Eklenti kullanılacaksa gönderileri sitenin sunucusunda saklayan ve görselleri küçülten ayarlar açılır. Karar vermeden önce sayfanın akışlı ve akışsız sürümü PageSpeed Insights’ta ayrı ayrı ölçülür. Akışın sayfadaki yeri ve gösterilecek gönderi sayısı da bu ölçüme göre belirlenir.
Sipariş ve Ödeme Adımları Nasıl Sade Tutulur?
Sipariş ve ödeme adımları, ziyaretçinin sepetten onay sayfasına kadar geçtiği ekranlardır. Bu ekranlar sırasıyla sepet, teslimat ve iletişim bilgileri, ödeme ve onaydır. Her ekran tek bir işi yapar ve adımların sayısı az tutulur. Ekranların üstünde ziyaretçinin hangi adımda olduğunu gösteren bir adım çubuğu bulunur. Web tasarım çalışmasında bu adımlar, gereksiz alan ve ara sayfa kalmayacak biçimde kurulur.
Form yalnızca siparişi tamamlamak için gereken bilgileri ister. Üyelik zorunlu tutulmaz; ziyaretçi isterse hesap açmadan sipariş verebilir. Her alanın üstünde, alanın neyi istediğini söyleyen görünür bir etiket bulunur. Fatura adresi teslimat adresiyle aynıysa ikinci kez istenmez. Alanlar doğru türde tanımlanır. Böylece telefonda numara alanında sayı klavyesi, e-posta alanında e-posta klavyesi açılır ve tarayıcının otomatik doldurma özelliği çalışır.
Hatalar alanın hemen yanında, ne yapılması gerektiğini söyleyen bir cümleyle gösterilir. Hata yalnızca kırmızı renkle belirtilmez; renge bir metin de eşlik eder. Hata oluştuğunda ziyaretçinin yazdığı öteki bilgiler silinmez. Kargo ücreti ve vergiler dâhil toplam tutar, ödeme adımından önce gösterilir. Ziyaretçi ödeme düğmesine basmadan önce ödeyeceği toplamın tamamını görür. İade ve teslim koşullarına giden bağlantı da bu özetin yanında durur.
Ödeme bölümü güvenli bağlantı üzerinden açılır; tarayıcı sitenin sertifikasını doğrular ve aktarılan bilgiyi şifreler. Kart bilgileri çoğunlukla ödeme hizmetinin kendi formunda ya da sayfasında alınır ve sitenin sunucusunda saklanmaz. Bankanın doğrulama ekranı açıldığında ziyaretçi kısa bir süre sitenin dışına çıkabilir. Doğrulama bitince ziyaretçi sitenin onay sayfasına döner. Onay sayfasında sipariş numarası ve sonraki adım yazar.
Sepet ve ödeme sayfaları teknik olarak ayrı ayarlar ister. Önbellek eklentisinde bu sayfalar önbellek dışında bırakılır; aksi hâlde bir ziyaretçinin sepeti başka birine görünebilir. Bu sayfalar noindex ile arama sonuçlarının dışında tutulur ve XML site haritasına eklenmez. Kaydırıcı, sohbet penceresi ve sosyal medya akışı bu sayfalarda yüklenmez. Böylece sayfa hızlı açılır ve forma ayrılan alan daralmaz.
Sipariş akışı yayına girmeden önce ödeme hizmetinin test modunda denenir. Test siparişleri telefonda ve masaüstünde verilir; başarılı ödeme, reddedilen kart ve yarıda bırakılan sipariş ayrı ayrı denenir. GA4’te satın alma etkinliğinin yalnızca onay sayfasında ve bir kez kaydedildiğine bakılır. Her denemenin sonucu bir tabloya yazılır. Bulunan aksaklıklar onayınızla aylık iş listesine alınır.
Sitenin Tasarım Dosyaları ve Kaynakları Nasıl Saklanır?
Tasarım dosyaları, sitenin görünümünü yeniden kurmak için gereken her şeydir. Bu gruba logonun asıl çizim dosyası, renk ve yazı tipi kararları ve yazı tipi dosyaları girer. Görsellerin yüksek çözünürlüklü asılları, simgeler ve sayfa şablonları da bu gruptadır. Web tasarım işi bittiğinde bu dosyalar tek bir klasör düzeninde toplanır ve sitenin sahibine ait bir alanda saklanır.
Klasör düzeni baştan belirlenir. Logo, renkler ve yazı tipleri bir klasörde, görseller ise sayfalara göre ayrılmış başka bir klasörde durur. Her dosyanın adı içeriğini söyler ve sürüm sırasını gösterir. Değiştirilen bir dosyanın eski hâli silinmez, eski sürümler klasörüne taşınır. Böylece hangi dosyanın sitede kullanıldığı ve hangisinin eskidiği ilk bakışta anlaşılır.
Logo vektör biçiminde saklanır. Vektör dosyası her boyutta netliğini korur; piksel tabanlı bir kopyadan büyütülen logo bulanıklaşır. Yazı tipi dosyalarının ve satın alınan görsellerin lisans belgeleri, dosyaların yanında tutulur. Lisans, dosyanın hangi işlerde ve kaç sitede kullanılabileceğini söyler. Lisansı bulunmayan bir görsel, sitede kullanılmadan önce lisanslı ya da size ait bir görselle değiştirilir.
Elementor’da sitenin renkleri ve yazı tipleri, Site Ayarları bölümünde ortak değerler olarak tanımlanır. Bir rengin değişmesi bu yüzden bütün siteye yansır. Elementor’un dışa aktarma özelliğiyle şablonlar ve site ayarları tek bir paket olarak indirilip tasarım klasörüne eklenir. Temada yapılan özel değişiklikler ise alt temada tutulur. Alt tema, ana temaya bağlı çalışan ayrı bir temadır; ana tema güncellendiğinde içindeki değişiklikler silinmez.
Sitenin tam yedeği de kaynakların parçasıdır. Tam yedek, sitenin dosyalarını ve veritabanını birlikte içerir. Yedek, sitenin çalıştığı sunucunun dışında, ikinci bir konumda tutulur; sunucuda sorun çıktığında yedeğe yine ulaşılabilir. Yedeğin çalıştığı, ayrı bir deneme kopyasına geri yüklenerek denetlenir. Yedekleme sıklığı, sitedeki içeriğin ne sıklıkla değiştiğine göre seçilir. Her yedeğin hangi gün alındığı ve neleri içerdiği bir listeye yazılır.
Hesaplar ve erişim bilgileri dosyalardan ayrı tutulur. Alan adı, barındırma, Search Console, GA4 ve Google İşletme Profili hesapları sitenin sahibine ait bir hesapla açılır. Sitede çalışan kişiler bu hesaplara kullanıcı olarak eklenir. Parolalar tasarım klasörüne yazılmaz, bir parola yöneticisinde saklanır. SEO, tasarım ve yazılım tek ekipte yapıldığından tasarım dosyalarıyla SEO ayarlarının listesi birlikte tutulur.
Siteme kurduğum erişilebilirlik eklentisinin sayfayı yavaşlatıp yavaşlatmadığını nasıl anlarım?
Aynı sayfayı eklenti açıkken ve geçici olarak kapalıyken PageSpeed Insights’ta ölçün. İki raporun performans bölümünü ve üçüncü taraf kaynakları karşılaştırın. Tarayıcının geliştirici araçlarındaki Ağ sekmesinde eklentinin yüklediği dosyalar ve boyutları da görülür. Ölçümü telefon görünümünde de tekrarlayın.
Sitemdeki sosyal medya akışı bazen boş görünüyor; neden olabilir?
Eklentinin erişim anahtarının süresi dolmuş, hesap gizliye alınmış ya da platform bağlantı yöntemini değiştirmiş olabilir. Eklentinin ayarlarından hesabı yeniden bağlayın ve önbelleği temizleyin. Akış gelmediğinde boş kutu yerine profile giden bir bağlantı gösterilecek biçimde yedek bir görünüm de ayarlayın.
Sepet ve ödeme sayfalarımın Google’da görünmesi gerekir mi?
Gerekmez. Bu sayfaların içeriği her ziyaretçiye göre değişir ve aramada kullanılacak bir bilgi taşımaz. Noindex ile dizin dışında tutulur ve XML site haritasına eklenmez. Bu sayfaların önbelleğe alınmadığını da kontrol edin; alınırsa bir ziyaretçinin sepeti başka birine görünebilir.
Logomun asıl dosyası bende yok; ne yapmalıyım?
Önce logoyu hazırlayan kişiden vektör biçimindeki asıl dosyayı isteyin. Dosyaya ulaşılamıyorsa logo, elinizdeki en yüksek çözünürlüklü kopyaya bakılarak vektör olarak yeniden çizilebilir. Yeni dosyayı yazı tipi lisanslarıyla birlikte tasarım klasörüne koyun ve size ait bir alanda saklayın.