Anasayfa › Web Tasarım
Web Tasarım
Web tasarım, ziyaretçinin sayfayı okumasını ve kullanmasını kolaylaştıran düzeni kurar: formlarda zorunlu ve isteğe bağlı alanların belirtilmesi, yüksek çözünürlüklü ekranlarda bulanık görünen görsellerin düzeltilmesi, menüde ziyaretçinin bulunduğu sayfanın gösterilmesi ve başlık düzeyi ile yazı boyutunun neden ayrı ayrı belirlendiği.
Web Tasarım Sürecinde Formlardaki Zorunlu ve İsteğe Bağlı Alanlar Nasıl Belirtilir?
Zorunlu alan, form gönderilmeden önce doldurulması gereken alandır. İsteğe bağlı alan ise boş bırakılabilir. Web tasarım sürecinde önce formun amacı yazılır ve yanıt vermek için hangi bilgilerin gerektiği belirlenir. Çoğu iletişim formu için ad, telefon ya da e-posta ve mesaj yeterlidir. Amaca hizmet etmeyen alanlar çıkarılır, kalanlar zorunlu ve isteğe bağlı olarak ikiye ayrılır.
Ayrım her alanın etiketinde yazıyla gösterilir. Zorunlu alanların etiketinin yanına yıldız işareti konur. Yıldız, etiket metniyle aynı satırda ve okunabilir bir renk karşıtlığıyla yazılır. Erişilebilirlik yönergeleri, bu işaretin ne anlama geldiğinin formun başında kısa bir cümleyle açıklanmasını önerir. Alanların çoğu zorunluysa yıldız yerine isteğe bağlı alanların etiketine “isteğe bağlı” sözcüğü eklenir. Aynı formda bu iki yöntemden yalnızca biri seçilir.
Zorunlu alan yalnızca renkle gösterilmez. Kırmızı çerçeve ya da kırmızı etiket, renkleri ayırt edemeyen ziyaretçiye bir bilgi aktarmaz. Renk ancak yazılı işarete ek bir vurgu olarak kullanılır. Alanın zorunlu olduğu sayfanın kodunda da belirtilir. Böylece ekran okuyucu, alana gelindiğinde etiketle birlikte zorunluluğu da seslendirir. Tarayıcı da bu bilgiyle boş alanı gönderim sırasında yakalar ve ziyaretçiyi o alana götürür.
Web tasarım aşamasında form, sayfa düzenleyici eklentisinin form bileşeniyle kurulur. Bileşende her alanın ayarlarında bir zorunlu seçeneği bulunur. Seçenek açıldığında alan kodda zorunlu olarak işaretlenir. Bileşenin alan ayarlarındaki zorunlu işareti seçeneği ise etiketin yanına yıldızı ekler. Etiketler gizlenip yalnızca kutu içindeki yer tutucu metin bırakılmaz; yer tutucu metin yazmaya başlanınca kaybolur.
Ziyaretçi zorunlu bir alanı boş bırakırsa hata iletisi alanın hemen altında yazıyla çıkar. İleti eksik alanı adıyla söyler. Ne yazılması gerektiğini de belirtir: “Telefon numaranızı yazın.” Biçim hatalarında beklenen yazılış da gösterilir. Gönderim başarısız olduğunda ziyaretçinin yazdığı bilgiler silinmez. Alan düzeltildiğinde ileti kaybolur. Hata iletileri, ekran okuyucunun kendiliğinden duyuracağı biçimde sayfaya eklenir.
Form yayına alınmadan önce üç denemeden geçer. Önce bütün alanlar boş bırakılıp gönderilir ve her iletinin doğru alanın altında çıktığına bakılır. Ardından form yalnızca klavyeyle, sekme tuşuyla alandan alana geçilerek doldurulur. Son olarak telefondan gönderim yapılır ve gelen e-posta okunur. GA4’te form gönderimi bir etkinlik olarak kaydedilir ve aylık raporda yer alır.
Yüksek Çözünürlüklü Ekranlarda Bulanık Görünen Görseller Nasıl Düzeltilir?
Yüksek çözünürlüklü ekran, aynı büyüklükteki alana daha fazla fiziksel piksel yerleştiren ekrandır. Telefonların ve birçok dizüstü bilgisayarın ekranı bu türdendir. Tarayıcı sayfayı bu ekranlarda da aynı boyutta gösterir, ama her öğeyi daha çok pikselle çizer. Görsel dosyası yeterli piksel içermiyorsa tarayıcı onu büyütür. Büyütülen görselin kenarları yumuşar ve görüntü bulanıklaşır.
Bulanıklığın nedeni tarayıcının geliştirici araçlarında görülür. Görsel incelendiğinde iki ölçü yan yana çıkar: görselin sayfada kapladığı boyut ve dosyanın kendi boyutu. Ölçüler geniş ekranda ve telefon görünümünde ayrı ayrı açılarak karşılaştırılır. Dosya, yüksek çözünürlüklü ekranın o alan için çizdiği piksel sayısından küçükse görüntü bulanık olur. Sorun en çok logolarda, küçük simgelerde ve tam genişlikte duran üst görsellerde ortaya çıkar.
WordPress, yüklenen her görselin birkaç boyutta kopyasını üretir. Görsel bir yazıya eklendiğinde bu kopyaların listesi sayfaya kendiliğinden yazılır. Tarayıcı listeden ekranın çözünürlüğüne ve görselin kapladığı alana uyan kopyayı seçer. Bu nedenle yüklenen asıl dosya yeterince büyük hazırlanır. Küçük bir dosyadan büyük kopya üretilmez ve liste yüksek çözünürlüklü ekrana yetecek bir seçenek içermez.
Sayfa düzenleyici eklentilerinin görsel bileşenlerinde görselin boyutu ayrıca seçilir. Küçük önizleme ya da orta boy seçilen bir görsel geniş bir alana konursa tarayıcı onu büyütür. Bu alanlarda tam boyut ya da alana uygun büyük bir boyut seçilir. Arka plan olarak kullanılan görseller için kopya listesi oluşmaz. Bu yüzden telefon görünümüne ayrı, daha dar bir arka plan dosyası atanır.
Logo ve simgeler için vektör biçimi kullanılır. Vektör dosya, şekilleri piksel yerine çizgilerin ve eğrilerin matematiksel tanımı olarak saklar ve her ekranda keskin kalır. Vektör logo büyütülse de dosya boyutu değişmez. WordPress varsayılan olarak vektör dosya yüklemeye izin vermez. Bu izin, yüklenen dosyaları zararlı koddan temizleyen bir eklentiyle açılır. Logo yalnızca fotoğraf biçiminde varsa gösterildiği alandan belirgin biçimde geniş hazırlanır.
Büyük dosya, sayfanın açılma süresini de etkiler. Core Web Vitals ölçülerinden LCP, ekrandaki en büyük öğenin çizilme süresini ölçer. Bu öğe çoğu zaman üst görseldir. Fotoğraflar sıkıştırılmış WebP biçiminde kaydedilir. PageSpeed Insights, gerekenden büyük gönderilen görselleri ayrı bir uyarıda sıralar. Web tasarım denetiminde netlik ve dosya boyutu bu uyarıyla birlikte kontrol edilir.
Menüde Ziyaretçinin Bulunduğu Sayfa Nasıl Belirtilir?
Bulunulan sayfayı menüde belirtmek, açık olan sayfanın menüdeki adını öteki öğelerden ayırmaktır. Ziyaretçi menüye baktığında sitenin hangi bölümünde olduğunu görür. WordPress menüyü oluştururken açık sayfaya karşılık gelen öğeyi kodda ayrı bir sınıfla işaretler. Tema ya da sayfa oluşturucu bu işarete bir görünüm atar. Görünüm atanmamışsa işaret kodda kalır, ekranda fark oluşmaz.
Bulunulan sayfa yalnızca renkle ayrılmaz. Renk farkı, renkleri ayırt edemeyen ziyaretçide ya da güneş altındaki telefon ekranında kaybolabilir. Bu nedenle renge ek olarak alt çizgi, kalın yazı ya da öğenin altında ince bir çubuk kullanılır. Bu vurgu, fare imleci öğenin üzerine geldiğinde çıkan vurgudan farklı tutulur. İkisi aynı görünürse açık sayfa ayırt edilemez.
Görsel işaretin yanında, bağlantının bulunulan sayfayı gösterdiği kodda da belirtilir. Erişilebilirlik yönergelerinde tarif edilen bu bilgi sayesinde ekran okuyucu, menüdeki o öğeyi okurken geçerli sayfa olduğunu da seslendirir. Bu bilgi görünümü değiştirmez, yalnızca sesli okumada fark yaratır. WordPress’in standart menüsü bu bilgiyi kendiliğinden ekler. Sayfa düzenleyici eklentilerinin menü bileşenlerinde ve elle kurulan menülerde bilginin varlığı geliştirici araçlarıyla kontrol edilir.
Alt menüdeki bir sayfa açıkken, o sayfanın bağlı olduğu üst öğe de vurgulanır. Hizmetler başlığı altındaki bir hizmet sayfasında Hizmetler öğesi de işaretli görünür. WordPress üst öğeyi ayrı bir sınıfla belirtir. Blog yazıları menüde tek tek yer almaz. Bir yazı açıkken Blog öğesinin vurgulanması için menüde ya da şablonda ayrıca bir kural tanımlanır.
İşaretin çalışmamasının birkaç bilinen nedeni vardır. Menüye sayfa listesinden değil, elle yazılmış tam adresle eklenen bir öğe, adres yazılışı farklıysa açık sayfayla eşleşmez. Aynı sayfaya giden iki öğe varsa ikisi birden vurgulanır. Tek sayfalık menülerde bölüm bağlantıları işaretlenmez. Bu durumda sayfa kaydırıldıkça vurguyu değiştiren ek bir ayar kullanılır. Ayar, ziyaretçinin ekranda gördüğü bölüme göre çalışır.
Telefon menüsünde de aynı işaret kullanılır; açılır menüde bulunulan sayfa ve üst öğesi aynı biçimde vurgulanır. Menüdeki işaret sayfa yoluyla birlikte çalışır: menü bölümü, sayfa yolu ise bölüm içindeki yeri gösterir. Web tasarım kontrolünde menüdeki her bağlantı tek tek açılır. Vurgunun doğru öğede çıktığı masaüstünde ve telefonda ayrı ayrı kontrol edilir.
Başlık Düzeyi ile Yazı Boyutu Neden Ayrı Ayrı Belirlenir?
Başlık düzeyi, bir başlığın sayfanın yapısındaki yerini gösterir. Yazı boyutu ise başlığın ekrandaki büyüklüğünü belirler. Düzey kodda başlık etiketiyle, boyut ise biçim ayarlarıyla verilir. Web tasarım çalışmasında ikisi ayrı kararlardır. Düzey içeriğin sırasına göre seçilir. Boyut tasarımın görsel dengesine göre ayarlanır ve başlığın düzeyini değiştirmez. Bu ayrım kurulmadığında görünümdeki bir değişiklik sayfanın yapısını da bozar.
Sayfanın ana başlığı birinci düzeydir ve sayfanın konusunu söyler. Ana bölümler ikinci düzeyle, bu bölümlerin alt başlıkları üçüncü düzeyle işaretlenir. Erişilebilirlik yönergeleri, düzeylerin içeriğin hiyerarşisini yansıtmasını ve aradaki bir düzeyin atlanmamasını önerir. Dördüncü ve daha alt düzeylere çoğunlukla uzun ve çok bölümlü metinlerde ihtiyaç duyulur. Bir alt başlık, tasarım gereği üst başlığından büyük yazılsa da düzeyi içerikteki yerine göre kalır.
Ekran okuyucu kullanan ziyaretçiler sayfada başlıktan başlığa atlayarak gezinir. Ekran okuyucu her başlığı düzeyiyle birlikte okur ve başlıkların bir listesini çıkarır. Bu liste ziyaretçi için sayfanın içindekiler bölümüdür. Düzeyler doğru seçildiğinde liste bölümleri iç içe gösterir. Düzeyler görünüme göre seçilmişse liste sayfanın gerçek yapısını yansıtmaz. Yalnızca büyük görünsün diye başlık yapılan bir cümle de listeye karışır.
Google, başlıkların sayfanın içeriğini ve bölümlerini anlamasına yardım ettiğini belirtir. Arama sonucundaki başlık oluşturulurken sayfanın ana başlığı da kullanılabilir. Google, düzeylerin belirli bir sırada dizilmesini bir sıralama koşulu olarak açıklamaz. Bu nedenle düzey sırası öncelikle ziyaretçi ve erişilebilirlik için kurulur. Başlık etiketi taşımayan büyük ve kalın satırlar düz metin olarak okunur.
Sayfa düzenleyici eklentilerinin başlık bileşeninde düzey ve boyut ayrı yerlerde durur. Düzey, HTML etiketi seçeneğinden seçilir. Boyut, stil sekmesindeki yazı biçimi ayarından verilir. Site Ayarları’ndaki genel yazı biçimlerinde her düzey için varsayılan bir boyut tanımlanır. Böylece sitenin bütün sayfalarında aynı düzey aynı boyutta görünür. Farklı görünmesi gereken bir başlıkta düzey değiştirilmez, yalnızca o bileşenin boyutu değiştirilir. Telefonda boyut ayrıca küçültülür.
Sık görülen hata, sayfa altında ve yan alanlarda tekrarlanan satırlardır. “Bize ulaşın” ve “Son yazılar” satırları her sayfada başlık etiketiyle işaretlenir ve sayfanın yapısına karışır. Bu satırlar düz metin olarak bırakılır, yalnızca kalın ve büyük yazılır. Her sayfanın başlık listesi geliştirici araçlarıyla çıkarılır; listede atlanan düzeyler ve birden fazla ana başlık işaretlenir. Bulunan düzeltmeler aylık iş listesine eklenir.
Formumdaki yıldız işaretinin ne anlama geldiğini ziyaretçiye nasıl açıklarım?
Formun başına, ilk alandan önce kısa bir cümle ekleyin: “Yıldızla işaretli alanların doldurulması gerekir.” Yıldızı etiketin içinde, alan adının hemen yanında tutun. Alanın zorunlu olduğunu kodda da işaretleyin; form bileşeninde bu, alan ayarlarındaki zorunlu seçeneğiyle yapılır ve ekran okuyucu bilgiyi seslendirir.
Logom bilgisayarda net ama telefonda bulanık görünüyor; nedeni nedir?
Telefon ekranı aynı alana daha çok fiziksel piksel yerleştirir. Logo dosyası bilgisayardaki gösterim boyutu kadar genişse telefonda büyütülür ve kenarları yumuşar. Logoyu vektör biçiminde yükleyin ya da gösterildiği alandan belirgin biçimde geniş bir dosya hazırlayın. Görsel bileşeninde boyut olarak tam boyutu seçin.
Menümde açık olan sayfa vurgulanmıyor; bunu nereden ayarlarım?
WordPress açık sayfanın menü öğesini kodda işaretler; eksik olan çoğu zaman bu işaretin görünümüdür. Sayfa düzenleyicinizin menü bileşeninde stil sekmesindeki etkin öğe ayarlarını açın ve renge ek olarak alt çizgi ya da kalın yazı seçin. Öğe menüye elle yazılmış adresle eklendiyse sayfayı listeden yeniden ekleyin.
Sayfa altındaki başlıkları küçültmek için düzeylerini değiştirebilir miyim?
Düzeyi değiştirmek görünümü değil, sayfanın yapısını değiştirir. Boyutu küçültmek için bileşenin stil sekmesinden yazı boyutunu ayarlayın. Sayfa altındaki iletişim ve bağlantı satırları içeriğin bir bölümü değilse başlık etiketi yerine düz metin olarak işaretleyin; kalın ve büyük görünümleri korunabilir.