Anasayfa › Web Tasarım
Web Tasarım
Web tasarım, sayfaları ziyaretçinin formu, menüyü ve arama kutusunu kullanma biçimine göre planlar: formlardaki tarih seçme alanının tasarımı, form gönderilirken aynı başvurunun tekrar gitmesinin önlenmesi, sabit üst menünün sayfa içi bağlantıların hedefini örtmesi ve site içi aramada sonuç bulunamadığında ziyaretçiye gösterilen sayfa.
Web Tasarım Çalışmasında Formlardaki Tarih Seçme Alanı Nasıl Tasarlanır?
Tarih seçme alanı, formda gün, ay ve yılın girildiği alandır. Ziyaretçi tarihi ya bir takvimden seçer ya da elle yazar. Web tasarım çalışmasında alanın biçimi, sorulan tarihin türüne göre belirlenir. Yakın bir randevu günü, geçmişteki bir tarih ve iki günden oluşan bir aralık farklı alanlar gerektirir. Alan türü, formun hangi bilgiyi topladığına göre seçilir.
İlk seçenek tarayıcının kendi tarih alanıdır. Bu alan ek bir dosya yüklemez ve telefonda cihazın kendi tarih seçicisini açar. Klavye ve ekran okuyucu desteği tarayıcıdan gelir. Görünümü ise tarayıcıya göre değişir ve tamamen değiştirilemez. İkinci seçenek JavaScript ile açılan özel bir takvimdir. Görünümü siteye uyar, ama klavye ve ekran okuyucuyla ayrıca denenmesi gerekir.
Uzak bir geçmişteki tarih sorulduğunda takvim, ayları tek tek geriye almayı gerektirir. Bu durumda gün, ay ve yıl için üç ayrı kutu kullanılır. Kutular telefonda sayısal klavyeyle açılır. Türkçe formlarda sıra gün, ay, yıl biçimindedir ve bu sıra alanın etiketinde yazılır. Kutunun içine yazılan soluk örnek metin, ziyaretçi yazmaya başladığında silindiği için etiketin yerine kullanılmaz.
Seçilebilecek günler alanın amacına göre sınırlanır. Randevu alanında geçmiş günler ve kapalı günler takvimde seçilemez hâle getirilir. Aralık seçiminde bitiş günü başlangıç gününden önce olamaz. Bu sınırlar tarayıcıda ziyaretçiye hemen gösterilir. Tarayıcıdaki denetim aşılabildiği için aynı kurallar sunucuda da uygulanır. Geçersiz bir tarih geldiğinde form kaydedilmez ve hata alanın yanında yazılır.
Erişilebilirlik yönergeleri, her form alanının görünür bir etiketi olmasını ve hataların metinle açıklanmasını ister. Takvim açıldığında ok tuşlarıyla günler arasında gezinilir, seçim giriş tuşuyla yapılır, takvim kaçış tuşuyla kapanır. Ekran okuyucu, seçilen günü ay ve gün adıyla birlikte okur. Telefonda takvim ekrana sığar ve günler parmakla seçilecek kadar büyük olur.
Elementor Pro’nun form bileşeninde tarih, ayrı bir alan türü olarak bulunur. Bu alanda tarayıcının kendi seçicisini kullanma ayarı da vardır. Web tasarım sürecinde seçilen alan Android ve iOS telefonlarda, masaüstü tarayıcılarda ayrı ayrı denenir. Denemede elle yazma, takvimden seçme ve geçersiz tarih girme adımları uygulanır. Denemenin sonuçları aylık iş listesindeki form maddesine eklenir.
Form Gönderilirken Aynı Başvurunun Tekrar Gitmesi Nasıl Önlenir?
Çift gönderim, aynı form içeriğinin sunucuya birden fazla kez ulaşmasıdır. Sonuçta aynı başvuru için iki e-posta gelir ve kayıt listesinde iki satır oluşur. En sık nedeni, yanıt gecikirken gönder düğmesine yeniden basılmasıdır. Sayfanın yenilenmesi ve tarayıcının geri tuşuyla forma dönülmesi de aynı sonucu verebilir. Bağlantı hızı düştüğünde bu durum daha sık görülür.
İlk önlem gönder düğmesinin davranışıdır. Düğmeye basıldığı anda düğme devre dışı bırakılır ve metni gönderimin sürdüğünü bildirir. Yanında küçük bir yükleme göstergesi döner. Sunucudan yanıt gelince düğmenin yerine sonuç mesajı çıkar. Gönderim başarısız olursa düğme yeniden açılır ve hata metni görünür. Ziyaretçi bekleme süresince düğmeye ikinci kez basamaz. Düğmenin durumu ekran okuyuculara da metinle bildirilir.
Sayfa yenilendiğinde tarayıcı, son gönderilen formun yeniden gönderilip gönderilmeyeceğini sorabilir. Onay verilirse başvuru ikinci kez gider. Bunu önlemek için başarılı gönderimden sonra ziyaretçi, form verisi taşımayan bir teşekkür sayfasına yönlendirilir. Bu sayfa yenilendiğinde form verisi yeniden gönderilmez. Sayfada başvurunun alındığı ve sonraki adım yazılır. Teşekkür sayfasına noindex eklenir; sayfa arama sonuçlarına alınmaz ve menüde gösterilmez.
Tarayıcıdaki önlemler tek başına yetmez, çünkü JavaScript çalışmayabilir ya da istek ağda tekrarlanabilir. Bu yüzden sunucu tarafında da denetim yapılır. Form her açıldığında tek kullanımlık bir anahtar üretilir ve forma gizli olarak eklenir. Sunucu, aynı anahtarla gelen ikinci isteği kaydetmez. Süresi dolan anahtarla gelen istek de kaydedilmez. Kısa sürede aynı içerikle gelen başvurular da ayrıca işaretlenir.
Çift gönderim ölçümü de bozar. Form gönderimi GA4’te anahtar etkinlik olarak sayılıyorsa, her tekrar ayrı bir kayıt olarak görünür. Etkinlik teşekkür sayfasının açılmasına bağlıysa sayfa yenilemeleri de sayılır. Bu durum GA4’ün DebugView ekranında denetlenir: tek bir gönderimde etkinliğin kaç kez geldiğine bakılır. Sayı birden fazlaysa etkinlik, yalnızca sunucudan başarılı yanıt geldiğinde gönderilecek biçimde ayarlanır.
Web tasarım testlerinde bu durum bilerek oluşturulur. Tarayıcının geliştirici araçlarında ağ hızı düşürülür ve düğmeye arka arkaya basılır. Gönderimden sonra sayfa yenilenir, geri tuşuyla forma dönülür. Her denemeden sonra gelen e-posta ve kayıt sayısı sayılır. Tek başvuru tek kayıt bırakana kadar ayarlar düzeltilir. Sonuçlar aylık raporda form başlığı altında yer alır.
Sabit Üst Menü Sayfa İçi Bağlantıların Hedefini Örterse Ne Yapılır?
Sayfa içi bağlantı, aynı sayfadaki bir bölüme götüren bağlantıdır. İçindekiler listesi, soru listesi ve başa dön düğmesi bu bağlantıları kullanır. Tıklandığında tarayıcı hedef bölümü ekranın en üst kenarına kaydırır. Sabit üst menü ekranın üstünde durmayı sürdürdüğü için bölümün başlığı menünün altına girer. Ziyaretçi başlığı görmeden metnin ortasından okumaya başlar. Sorun en çok uzun sayfalarda ve soru listelerinde görülür.
Bu sorun sitenin stil ayarlarıyla çözülür. Kaydırma payı adı verilen ayar, sayfanın üstünde menü yüksekliği kadar bir boşluk tanımlar. Tarayıcı hedefe kaydırırken bölümü bu boşluğun altında durdurur. Ayar sayfanın tamamına bir kez verilir ve bütün sayfa içi bağlantılar için geçerli olur. Pay, menünün gerçek yüksekliğine eşit ya da ondan biraz fazla verilir. Belirli başlıklar için ayrıca ek bir pay tanımlanabilir.
Menünün yüksekliği her ekranda aynı değildir. Telefonda menü daha kısa, masaüstünde daha yüksek olabilir. Kaydırıldıkça küçülen menülerde yükseklik sayfa içinde de değişir. Yükseklik, tarayıcının geliştirici araçlarında her genişlik için ölçülür. Menünün üstünde bir duyuru çubuğu varsa onun yüksekliği de hesaba eklenir. Bu yüzden kaydırma payı telefon, tablet ve masaüstü genişlikleri için ayrı belirlenir ve menünün küçülmüş hâline göre ayarlanır.
Bazı temalar ve sayfa düzenleyicileri sayfa içi kaydırmayı JavaScript ile yapar. Bu betikler genellikle kendi uzaklık ayarını taşır. Stil ayarındaki pay ile betiğin uzaklık ayarı birlikte çalışırsa boşluk iki katına çıkar. Bu durumda yalnızca biri kullanılır. Hedef bölümün kimliği de denetlenir: aynı kimlik sayfada iki kez geçerse tarayıcı ilkine gider.
Erişilebilirlik yönergeleri, klavyeyle odaklanılan öğenin sabit alanlar tarafından tamamen örtülmemesini ister. Sekme tuşuyla ilerleyen bir kullanıcı, odaktaki bağlantıyı ya da alanı ekranda görebilmelidir. Kaydırma payı, çoğu tarayıcıda odak değiştiğinde yapılan kaydırmada da uygulanır. Sayfanın başındaki içeriğe atla bağlantısı da aynı paya göre çalışır. Denetimde sayfa yalnızca klavyeyle baştan sona gezilir. Odak çerçevesi menünün altında kalıyorsa pay artırılır.
Web tasarım denetiminde her sayfa içi bağlantı hem telefon hem masaüstü görünümünde tıklanır. Hedef başlığın menünün hemen altında tam olarak göründüğüne bakılır. Aynı deneme klavyeyle ve adresine bölüm kimliği eklenmiş bağlantılarla da yapılır. Google bazı sonuçlarda ziyaretçiyi sayfanın ilgili bölümüne götürür. Bu girişte de başlığın menünün altında kalmadığı ayrıca denetlenir.
Site İçi Aramada Sonuç Bulunamadığında Ziyaretçiye Ne Gösterilir?
Site içi arama, ziyaretçinin sitedeki sayfalar arasında kelimeyle arama yapmasını sağlar. WordPress’in kendi araması yazıların ve sayfaların başlığında, özetinde ve metninde arar. Aranan kelime hiçbir yerde geçmiyorsa sonuç bulunamadı sayfası açılır. Bu sayfada en az üç bilgi yer alır. Bunlar aranan ifade, sonuç çıkmadığını bildiren kısa bir cümle ve yeniden arama kutusudur.
Arama kutusu, aranan ifade içinde yazılı hâlde gelir. Ziyaretçi ifadeyi silmeden düzeltip yeniden arayabilir. Kutunun altında sitenin ana bölümlerine giden bağlantılar sıralanır: hizmet sayfaları, blog kategorileri ve iletişim sayfası. WordPress’in kendi araması yazım hatalarını düzeltmez ve eş anlamlı kelimeleri tanımaz. Bu özellikler gerekiyorsa ayrı bir arama eklentisi kurulur ve ayarlanır.
Sonuç bulunamadı sayfasının arama motorlarındaki durumu da ayarlanır. Site içi aramanın sonuç sayfalarına noindex eklenir. Google, değer katmayan otomatik sayfaların taranmasının sınırlanmasını önerir ve arama sonuç sayfaları bu gruba girer. Bu sayfalara site içinden bağlantı verilmez. Bu adreslerin noindex nedeniyle dizin dışında kaldığı, Search Console’un Sayfa dizine ekleme raporunda denetlenir.
Ziyaretçilerin ne aradığı GA4 ile ölçülür. Geliştirilmiş ölçüm ayarlarında site içi arama seçeneği açıldığında her arama, ifadesiyle birlikte kaydedilir. Sonuçsuz aramaları ayırmak için sonuç bulunamadı sayfası ayrı bir etkinlik gönderir. Bu etkinliğin raporu, sitede karşılığı olmayan ifadeleri listeler. Sık aranan ifadeler yeni bir sayfanın ya da mevcut bir sayfaya eklenecek bölümün konusu olur.
Erişilebilirlik yönergeleri, sayfanın tamamı yenilenmeden çıkan durum mesajlarının ekran okuyucuya iletilmesini ister. Arama sonuçları sayfa yenilenmeden gösteriliyorsa, sonuç sayısı ya da sonuç bulunamadı mesajı ekran okuyucuya duyurulur. Telefonda arama kutusu ekranın üst bölümünde yer alır ve parmakla rahatça seçilecek büyüklükte olur. Mesajın metni aranan ifadeyi de içerir. Mesaj ve öneriler, sayfa açıldığında ilk ekranda görünür.
Web tasarım çalışmasında bu sayfa, Elementor Pro’daki Tema Oluşturucu ile arama sonuçları şablonu olarak hazırlanır. Şablondaki arşiv yazıları bileşeninde, sonuç bulunamadığında gösterilecek mesaj ayrı bir alana yazılır. Öneri bağlantıları bu mesajın altına eklenir. Sayfa, sitede geçmeyen bir kelimeyle ve yazım hatalı bir kelimeyle aranarak denenir. Yapılan değişiklikler aylık iş listesine işlenir.
Formumdaki tarih alanı telefonda masaüstünden farklı görünüyor; bu bir hata mı?
Alan tarayıcının kendi tarih seçicisini kullanıyorsa bu bir hata değildir. Bu seçici her cihazda o cihazın kendi takvimini açar ve görünümü tarayıcıya göre değişir. Seçilen tarih sunucuya aynı biçimde ulaşır. Görünümün her cihazda aynı olması isteniyorsa JavaScript ile açılan özel bir takvim kullanılır ve klavyeyle ayrıca denenir.
Formumdan aynı başvuru iki kez geliyor; nedenini nasıl bulabilirim?
İki e-postanın geliş zamanını karşılaştırın. Aralık birkaç saniyeyse düğmeye iki kez basılmış ya da sayfa yenilenmiş olabilir. Formu yavaş bir bağlantıda kendiniz deneyin ve düğmenin ilk basışta devre dışı kalıp kalmadığına bakın. Düğme açık kalıyorsa düğme ayarı düzeltilir ve sunucuya tek kullanımlık anahtar denetimi eklenir.
Sayfa içi bağlantıya tıklayınca başlık menünün altında kalıyor; bunu panelden düzeltebilir miyim?
Temanızda ya da sayfa düzenleyicinizde sayfa içi kaydırma için bir uzaklık ayarı varsa, değeri menü yüksekliği kadar artırabilirsiniz. Böyle bir ayar yoksa kaydırma payı sitenin stil ayarlarına eklenir. Menü telefonda farklı yükseklikteyse pay her genişlikte ayrıca verilir. Değişiklikten sonra önbellek temizlenip sayfa yeniden denenir.
Ziyaretçilerin sitemde hangi kelimeleri aradığını nereden görebilirim?
GA4’ün yönetici bölümünde veri akışınızı seçin. Geliştirilmiş ölçüm ayarlarında site içi arama seçeneğinin etkin olup olmadığına bakın. Etkinse arama ifadeleri, arama etkinliğiyle birlikte kaydedilir. İfadeleri görmek için rapora bu etkinliğe ait arama terimi boyutu eklenir. Seçenek kapalıysa açılmadan önceki aramalar sonradan görüntülenemez.