Anasayfa › Web Tasarım
Web Tasarım
Web tasarım, sitenizin ekrandaki görünüşünü ve kullanım düzenini hazırlama işidir. Sayfa yerleşimi, renk seçimi, yazı büyüklüğü, menü ve formlar küçük ve büyük ekranlarda kolay kullanılacak şekilde hazırlanır. İş bitince her sayfa farklı ekran boylarında denenir.
Web Tasarımda Birincil ve İkincil Düğmeler Nasıl Ayırt Edilir?
Düğme, ziyaretçinin bir işlem başlatmak için tıkladığı ya da dokunduğu alandır. Bir sayfada çoğu zaman birden fazla düğme bulunur. Birincil düğme, o bölümde ziyaretçiden beklenen ana işlemi başlatır. Teklif formunu göndermek bu işlemlere bir örnektir. İkincil düğme ise ana işlemin yanında sunulan ek seçenektir. Hizmetin ayrıntılarını açmak bu türe girer. Web tasarım çalışmasında her düğmenin hangi türe girdiği, sayfa çizilmeden önce belirlenir. Bu karar düğmenin rengini, boyutunu ve sayfadaki yerini belirler. Sayfada kaç bölüm varsa her bölüm için bu karar ayrı ayrı verilir.
Ayrım görünüşle yapılır. Birincil düğmenin içi sitenin ana rengiyle doldurulur ve yazısı bu rengin üzerinde rahat okunur. İkincil düğmenin yalnızca çerçevesi çizilir ya da açık bir zemin üzerinde bırakılır. Bazen üçüncü bir tür olarak altı çizili bir yazı bağlantısı kullanılır. Bir bölümde tek bir birincil düğme bulunur. İki düğme yan yana durduğunda birincil olan, okuma yönünde önce görülen yere konur. Aynı türdeki düğmeler bütün sayfalarda aynı renk, aynı köşe ve aynı boyutla görünür. Düğmenin üzerine gelindiğinde ya da dokunulduğunda rengi hafifçe değişir. Bu değişim, ziyaretçiye düğmenin tıklanabilir olduğunu gösterir.
Düğmenin yazısı yapılacak işi söyler. “Teklif iste”, “Formu gönder” ve “Hizmetleri gör” bu tür yazılardır. Yazı kısa tutulur ve işi bir fiille anlatır. Düğme türleri yalnızca renkle ayrılmaz. Renkleri ayırt etmekte zorlanan ziyaretçiler düğmeleri biçiminden tanır. Bu yüzden birincil düğmenin dolgusu ve ikincil düğmenin çerçevesi birlikte kullanılır. Yazı ile zemin arasındaki renk farkı da ölçülür. PageSpeed Insights’ın erişilebilirlik bölümü, bu farkın okunmaya yetip yetmediğini sayfa sayfa denetler. Fark yetmiyorsa yazı rengi ya da zemin rengi koyulaştırılır. Düzeltmeden sonra aynı denetim yeniden çalıştırılır.
Telefonda düğmeler parmakla rahat basılacak kadar büyük yapılır ve aralarına boşluk bırakılır. Dar ekranda yan yana sığmayan iki düğme alt alta dizilir ve birincil düğme üstte durur. Tasarım bittiğinde her sayfadaki düğmeler bir listeye yazılır. Listede düğmenin yazısı, türü ve götürdüğü adres yer alır. Bu liste, bir bölümde iki birincil düğme kalıp kalmadığını ve aynı işi yapan düğmelerin aynı yazıyı taşıyıp taşımadığını gösterir. Düzeltilecek düğmeler aylık iş listesine eklenir. Liste, siteye yeni bir sayfa eklendiğinde de güncellenir. Böylece yeni sayfadaki düğmeler de aynı kurala göre dizilir.
Formlardaki Kişisel Veri Onay Kutusu Nasıl Yerleştirilir?
Kişisel veri, bir kişiyi tanımaya yarayan bilgidir. Ad, telefon numarası ve e-posta adresi formlarda en sık istenen kişisel verilerdir. Onay kutusu, ziyaretçinin bir metni okuduğunu ya da bir izin verdiğini işaretlediği küçük kutudur. Formda hangi onayın istenmesi gerektiğine ve metnin içeriğine siz ya da hukuk danışmanınız karar verir. Web tasarım tarafında yapılan iş, bu kutunun forma doğru yerde, okunur biçimde ve sorunsuz çalışacak şekilde yerleştirilmesidir. Bu iş formun görünüşünü ve çalışmasını kapsar. Kutuya bağlanan metin hazırlandıktan sonra sitede ayrı bir sayfa olarak yayımlanır.
Kutu, doldurulan alanların altında ve gönder düğmesinin hemen üstünde durur. Ziyaretçi formu bitirdiğinde kutuyu görür ve göndermeden önce işaretler. Kutunun yanındaki yazı kısa tutulur ve neye onay verildiğini söyler. Ayrıntılı metin bu yazının içindeki bir bağlantıyla açılır. Formda yazılmış bilgiler silinmesin diye metin yeni bir sekmede ya da formun üstünde açılan bir pencerede gösterilir. Kutu, sayfa açıldığında boş gelir. İşareti ziyaretçinin kendisi koyar. Metnin bulunduğu sayfa, sitenin en alt bölümünde de bir bağlantı olarak yer alır. Böylece ziyaretçi metne formu açmadan da ulaşabilir.
Birden fazla izin isteniyorsa her biri için ayrı bir kutu konur. Formun gönderilmesi için gereken onay ile tanıtım iletisi almak için verilen izin aynı kutuda birleştirilmez. Gerekli kutu işaretlenmeden form gönderilirse kutunun yanında kısa bir uyarı yazısı çıkar. Bu uyarı, ziyaretçinin girdiği bilgileri silmez. Uyarı çıktığında ekran o kutuya kaydırılır. Kutunun yazısı kutuyla eşleştirilir. Böylece yazıya tıklamak da kutuyu işaretler ve ekran okuyucu kutunun ne için olduğunu sesli okur. Ekran okuyucu, ekrandaki yazıyı seslendiren ve görme engelli kişilerin kullandığı programdır.
Kutu yerleştirildikten sonra form birkaç kez denenir. Önce kutu boş bırakılarak gönderilir ve uyarının çıktığı görülür. Sonra kutu işaretlenerek gönderilir ve teşekkür yazısının açıldığı kontrol edilir. Formdan size gelen e-postada onayın verildiğini gösteren satırın bulunup bulunmadığına bakılır. Deneme bilgisayarda, telefonda ve yalnızca klavyeyle tekrarlanır. Klavyeyle denemede kutuya sekme tuşuyla gelinip boşluk tuşuyla işaret konabildiği görülür. Form gönderildikten sonra gelen kayıtların nerede saklandığına da bakılır. Kayıtlar sitenin panelinde tutuluyorsa bu kayıtları kimlerin görebildiği WordPress kullanıcı ayarlarından okunur. Bulunan eksikler aylık iş listesine yazılır.
Yazıların Başına Tahmini Okuma Süresi Eklemek Ne Sağlar?
Tahmini okuma süresi, bir yazının baştan sona kaç dakikada okunabileceğini gösteren kısa bilgidir. Yazının başında, tarih ve yazar adının yanında durur. Süre, yazıdaki sözcük sayısının ortalama bir okuma hızına bölünmesiyle hesaplanır. Bu hesap yaklaşık bir sonuç verir, çünkü herkes aynı hızda okumaz. Bu yüzden bilginin önüne “tahmini” ya da “yaklaşık” sözcüğü eklenir. Web tasarım çalışmasında bu bilginin yeri, yazı boyutu ve rengi sayfanın geri kalanıyla uyumlu seçilir. Hesapta kullanılan okuma hızı bütün yazılar için aynı tutulur. Böylece bütün süreler aynı ölçüyle bulunmuş olur.
Okuma süresi ziyaretçiye yazıya başlamadan önce yazının uzunluğunu söyler. Ziyaretçi, açtığı yazının kısa bir not mu yoksa uzun bir rehber mi olduğunu ilk bakışta anlar. Telefonda okuyan kişi bu bilgiye bakarak yazıyı hemen okumaya ya da sonraya bırakmaya karar verebilir. Bu bilgi ziyaretçi için eklenir. Google’ın sıralama için okuma süresi istediğine dair bir açıklaması yoktur. Bu nedenle süre, arama sonuçlarındaki yeri değiştirmek amacıyla eklenmez. Uzun bir yazıda süre bilgisinin altına bir içindekiler listesi de eklenebilir. Bu liste, yazıdaki başlıklara tek tıklamayla gitmeyi sağlar.
Süre elle yazılmaz. WordPress’te yazının sözcükleri sayılır ve süre otomatik olarak hesaplanır. Bunun için temanın ayarlarındaki bir seçenek ya da siteye eklenen küçük bir işlev kullanılır. Yazı güncellendiğinde süre de kendiliğinden yenilenir. Hesaba yalnızca yazının gövdesi girer. Menü, yan sütun ve yorumlar sayılmaz. Görsellerin altındaki açıklamaların ve tabloların hesaba katılıp katılmayacağı baştan belirlenir. Çok kısa yazılarda süre gösterilmeyebilir ve yalnızca tarih yer alır. Hesaplama yazı kaydedilirken yapıldığında sayfanın açılışına ek bir iş yüklenmez. Süreyi gösteren yazının biçimi, “dakika” ya da kısaltılmış hâliyle, bütün sitede aynı seçilir.
Eklendikten sonra bilgi bütün yazı sayfalarında kontrol edilir. Sürenin her yazıda aynı yerde ve aynı biçimde göründüğüne bakılır. Telefonda tarih, yazar adı ve sürenin tek satıra sığıp sığmadığı denenir. Sığmıyorsa bu bilgiler alt alta dizilir. Ekran okuyucunun süreyi anlaşılır bir cümle olarak okuması için sayının yanına “okuma süresi” yazısı eklenir. GA4’teki ortalama etkileşim süresi, ziyaretçilerin yazıda ne kadar kaldığını gösterir. Bu süre ile tahmini okuma süresi aylık raporda yan yana yazılır. İki süre arasındaki fark, yazının ne kadarının okunduğu hakkında bir fikir verir.
Sürükleyerek Kullanılan Öğelere Düğmeli Bir Yol Nasıl Eklenir?
Sürükleme, bir öğeyi parmakla ya da fareyle basılı tutup başka bir yere taşıma hareketidir. Sitelerde birkaç öğe bu hareketle çalışır: kaydırmalı görsel alanı, fiyat ya da tarih aralığı seçtiren kaydırıcı, önce ve sonra görsellerini karşılaştıran alan, sıralanabilir liste ve harita. Bazı ziyaretçiler bu hareketi yapamaz ya da yaparken zorlanır. Web erişilebilirlik yönergeleri, sürükleyerek yapılan her işin tek dokunuşla da yapılabilmesini ister. Web tasarım çalışmasında bu öğelerin her birine düğmeli bir yol eklenir. Bu yol sürükleme hareketini kaldırmaz, onun yanına ikinci bir kullanım biçimi ekler.
Kaydırmalı görsel alanına sağ ve sol ok düğmeleri konur. Bu düğmelerin adı ekran okuyucu için “Önceki görsel” ve “Sonraki görsel” olarak yazılır. Alanın altındaki küçük noktalar da tıklanabilir yapılır ve her biri bir görsele götürür. Aralık seçtiren kaydırıcıda tutamacın yanına artırma ve azaltma düğmeleri ya da elle değer yazılabilen kutular eklenir. Önce ve sonra görsellerini karşılaştıran alanda iki ayrı düğme bulunur. Bu düğmelerle iki görsel arasında tek dokunuşla geçilir. Görseller kendiliğinden dönüyorsa alana bir durdurma düğmesi de eklenir. Böylece ziyaretçi bir görseli okumak için akışı durdurabilir.
Sıralanabilir listede her satırın yanına yukarı ve aşağı taşıma düğmeleri konur. Bu düğmeler satırı bir sıra yukarı ya da bir sıra aşağı alır. Düğmeye basıldığında satırın yeni sırası ekran okuyucu tarafından sesli okunur. Haritada yakınlaştırma ve uzaklaştırma düğmeleri açık bırakılır. Adres de haritanın altında yazı olarak verilir. Bütün bu düğmeler klavyeyle de kullanılır. Ziyaretçi sekme tuşuyla düğmeye gelir ve giriş tuşuyla düğmeye basar. Düğmeye gelindiğinde etrafında görünür bir çerçeve belirir. Böylece ziyaretçi hangi düğmenin seçili olduğunu ekranda görür.
Eklenen yollar üç ayrı biçimde denenir. İlk deneme telefonda tek parmakla, sürükleme yapmadan, yalnızca dokunarak yapılır. İkinci deneme fareye hiç dokunmadan, yalnızca klavyeyle yapılır. Üçüncü denemede ekran okuyucu açılır ve her düğmenin adının anlaşılır biçimde okunup okunmadığı dinlenir. Her öğenin adı, bulunduğu sayfa ve üç denemenin sonucu bir tabloya yazılır. Web tasarım denetiminde bu tablo, düğmeli yolu eksik kalan öğeleri gösterir. Bu öğeler aylık iş listesine eklenir ve düzeltmeden sonra aynı üç deneme yeniden yapılır.
Web tasarım açısından bir bölümde iki birincil düğme olabilir mi?
Bir bölümde tek bir birincil düğme bulunur. Bu düğme o bölümde ziyaretçiden beklenen ana işi başlatır. Öteki seçenekler çerçeveli ikincil düğme ya da yazı bağlantısı olarak gösterilir. Web tasarım denetiminde her sayfanın düğmeleri listelenir ve bir bölümde iki birincil düğme görülürse biri ikincil biçime alınır.
Web tasarım sürecinde kişisel veri onay kutusu sayfa açılınca işaretli mi gelmeli?
Kutu sayfa açıldığında boş gelir ve işareti ziyaretçinin kendisi koyar. Hangi onayın isteneceğine ve metnin içeriğine siz ya da hukuk danışmanınız karar verir. Web tasarım tarafında kutu gönder düğmesinin hemen üstüne yerleştirilir, yazısı kutuyla eşleştirilir ve ayrıntılı metin yeni sekmede açılan bir bağlantıyla verilir.
Web tasarım çalışmasında eklenen okuma süresi yazı güncellenince değişir mi?
Değişir, çünkü süre elle yazılmaz. WordPress’te yazının gövdesindeki sözcükler sayılır ve yazı güncellendiğinde süre yeniden hesaplanır. Menü, yan sütun ve yorumlar bu hesaba girmez. Web tasarım kontrolünde sürenin bütün yazılarda aynı yerde göründüğüne ve telefonda tarih ile yazar adının yanında düzgün durduğuna bakılır.
Web tasarım denetiminde kaydırmalı görsel alanının sürüklemeden kullanılabildiği nasıl anlaşılır?
Alan telefonda tek parmakla, yalnızca dokunarak denenir. Sağ ve sol ok düğmeleriyle bütün görseller sırayla açılabiliyorsa düğmeli yol çalışır. Ardından aynı deneme yalnızca klavyeyle yapılır ve seçili düğmenin çerçevesi izlenir. Web tasarım denetiminde ekran okuyucunun okları “Önceki görsel” ve “Sonraki görsel” diye okuduğu da dinlenir.