Anasayfa › Web Tasarım
Web Tasarım
Web tasarım, sayfaların ekrandaki düzenini ve formların kullanımını planlar: iletişim formlarına dosya yükleme alanının nasıl ekleneceği, bir bilginin yalnızca renkle verilmesinin hangi kullanıcılar için sorun olduğu, telefonda sayfanın yana kaymasının nasıl önlendiği ve sayfada yazan e-posta adresinin istenmeyen postalardan nasıl korunduğu.
Web Tasarım Sürecinde Formlara Dosya Yükleme Alanı Nasıl Eklenir?
Dosya yükleme alanı, ziyaretçinin formla birlikte bir belge ya da görsel göndermesini sağlayan form alanıdır. Web tasarım sürecinde bu alan yalnızca gerçekten bir dosya gerektiğinde eklenir. Önce hangi dosyanın neden istendiği belirlenir. Ardından kabul edilecek dosya türleri, dosya başına boyut sınırı ve bir gönderimde yüklenebilecek dosya sayısı kararlaştırılır. Bu kararlar alanın ayarlarına aynen aktarılır.
WordPress sitelerde alan, Elementor Pro’nun form bileşenine eklenir. Alan türü olarak dosya yükleme seçilir. Ayarlarda izin verilen dosya türleri, boyut sınırı ve birden çok dosya seçeneği girilir. Alanın etiketi kabul edilen türleri ve boyut sınırını açıkça yazar. Dosya zorunlu değilse alan isteğe bağlı bırakılır. Etiket alanın içine değil, alanın üstüne yazılır.
Sunucunun da kendi yükleme sınırı vardır. Bu sınır barındırma hizmetinin panelinde görülür ve gerekirse oradan değiştirilir. Formdaki sınır sunucunun sınırından büyükse büyük dosyalar sunucuda reddedilir. Ziyaretçi ise çoğu zaman bunun nedenini göremez. Bu yüzden iki sınır karşılaştırılır. Sınıra yakın ve sınırı aşan dosyalarla deneme gönderimleri yapılır, ekrandaki hata mesajı kontrol edilir.
Yüklenen her dosya sunucuya giren bir dosyadır; bu yüzden türü denetlenir. Dosya türü yalnızca dosya adının sonundaki uzantıya bakılarak kabul edilmez; sunucu dosyanın içeriğini de inceler. Sunucuda çalışabilecek dosya türlerine izin verilmez. Yüklenen dosyalar dışarıdan tahmin edilemeyen adlarla saklanır. Klasör içeriğinin listelenmesi kapatılır. Böylece dosyalara başka biri ya da bir arama motoru adres üzerinden ulaşamaz.
Dosya iki yoldan iletilebilir: form bildirimine eklenerek e-postayla ya da sitede saklanıp yönetim panelinden açılarak. E-posta sunucuları büyük ekleri reddedebilir; bu durumda dosyanın sitede saklanması seçilir. Dosyalar kişisel veri içerebilir. Ne kadar süre saklanacakları önceden belirlenir ve süre dolunca silinirler. Formun yanında kişisel verilerin nasıl işlendiğini anlatan metne bağlantı verilir.
Telefonda dosya alanına dokunulduğunda galeri, dosyalar ve kamera seçenekleri açılır. Yükleme sürerken ilerleme gösterilir ve gönder düğmesine ikinci kez basılamaz. Seçilen dosyanın adı alanın altında görünür; yanlış seçilen dosya kaldırılabilir. Hata mesajları metin olarak yazılır ve ilgili alana bağlanır. Böylece ekran okuyucu kullanan ziyaretçi hatanın hangi alanda olduğunu sesli olarak duyar.
Bilginin Yalnızca Renkle Verilmesi Neden Sorun Olur?
Bilginin yalnızca renkle verilmesi, bir durumun ya da farkın sayfada başka hiçbir işaret olmadan renk değişimiyle gösterilmesidir. Erişilebilirlik yönergeleri, rengin bilgiyi iletmenin tek görsel yolu olmamasını ister. Renk kullanılmaya devam eder. Aynı bilgi ayrıca metinle, simgeyle ya da biçim farkıyla verilir. Bu kural web tasarım başlarken sitenin tasarım kurallarına yazılır.
Renge bağlı bilgi her ziyaretçiye ulaşmaz. Renk görme farklılığı olan kullanıcılar bazı renk çiftlerini birbirinden ayıramaz; kırmızı ile yeşil sık karışan çiftlerdendir. Güçlü güneş ışığında telefon ekranındaki renkler soluk görünür. Ekran okuyucular rengi sesli okumaz. Siyah beyaz yazıcıdan alınan çıktıda renk farkı tamamen kaybolur. Bu durumlarda renkle verilen bilgi okura ulaşmaz.
Formlar bu kuralın sık uygulandığı yerlerdendir. Zorunlu alanlar yalnızca kırmızı yıldızla ya da kırmızı çerçeveyle işaretlenmez; etikete “zorunlu” sözcüğü eklenir. Hatalı bir alanda çerçevenin rengi değişirken alanın altına neyin eksik ya da yanlış olduğunu söyleyen bir cümle çıkar. Başarılı gönderim de yeşil kutunun yanında bir onay cümlesiyle bildirilir. Seçenek listelerinde seçili öğe de bir işaretle gösterilir.
Metin içindeki bağlantılar yalnızca renkle ayrılırsa okur onları fark etmeyebilir. Bu nedenle paragraf içindeki bağlantıların altı çizilir. Menüde bulunulan sayfa, renk yanında kalın yazı ya da alt çizgiyle gösterilir. Sekmelerin ve düğmelerin seçili durumu da biçimle ayrılır. Klavyeyle gezinen kullanıcı için odaklanılan öğenin çevresindeki çerçeve görünür bırakılır. Bu çerçeve görünüm gerekçesiyle kaldırılmaz.
Grafiklerde seriler renk yanında farklı desenlerle ya da çizgi türleriyle ayrılır. Değerler mümkün olduğunda serinin üstüne yazılır; okur renk açıklamasına bakmak zorunda kalmaz. Tablolarda açık, kapalı ya da dolu durumları sözcükle yazılır. Harita ve şemalarda bölgeler renk yanında adlarıyla etiketlenir. Simge kullanılan yerlerde her simgenin yanında kısa bir metin bulunur.
Denetim iki adımda yapılır. Tarayıcının geliştirici araçlarında sayfayı farklı renk görme biçimleriyle ve gri tonlarda gösteren görünümler bulunur. Sayfa bu görünümlerde gezilir ve her bilginin hâlâ anlaşılıp anlaşılmadığına bakılır. PageSpeed Insights’ın erişilebilirlik bölümü bazı denetimleri kendiliğinden yapar; renge bağlı bilgilerin çoğu ise elle kontrol edilir. Kontrast ise metinle zemin arasındaki farkı ölçen ayrı bir ölçüttür.
Telefonda Sayfanın Yana Kayması Nasıl Önlenir?
Yana kayma, telefonda sayfanın parmakla sağa ve sola sürüklenebilmesi ve kenarda boş bir şerit görünmesidir. Nedeni, sayfadaki en az bir öğenin ekrandan geniş olmasıdır. Tarayıcı bu öğeyi göstermek için sayfayı yatay olarak genişletir. Ziyaretçi metni okurken sayfa yana kayar. Menü, düğmeler ve ekrana sabitlenmiş öğeler de ekranın kenarına doğru kaçar.
Taşan öğeler genellikle birkaç gruptan çıkar. Genişliği piksel olarak sabitlenmiş bölümler ve kutular telefonda ekrana sığmaz. Kendi genişliğiyle yerleştirilen büyük görseller kapsayıcısından taşar. Çok sütunlu tablolar dar ekranda yeterince daralamaz. Boşluksuz yazılmış uzun adresler ve kelimeler satıra bölünmez. Gömülü video ve harita alanları sabit genişlikle eklenmişse onlar da ekranı aşar.
Elementor’da giriş animasyonları da taşmaya yol açabilir. Sağdan ya da soldan kayarak gelen öğe, animasyon başlamadan önce ekranın dışında bekler. Bu sırada sayfanın genişliğine katılır. Negatif kenar boşluğu verilmiş öğeler de bölümün dışına çıkar. Bu bölümlerde Elementor’un taşma ayarında gizli seçeneği kullanılır. Böylece bölümün sınırını aşan kısım görünmez ve sayfanın genişliğine eklenmez.
Taşan öğe, tarayıcının geliştirici araçlarındaki cihaz görünümünde aranır. Bu görünüm sayfayı seçilen telefon genişliğinde gösterir. Sayfa yana kaydırılır ve boş şeridin hangi bölümün hizasında başladığına bakılır. Öğe seçme aracıyla bölümler tek tek işaretlenir; ekrandan geniş olan öğe kendi ölçüsüyle görünür. Gerekirse bölümler sırayla gizlenir ve kaymanın kaybolduğu adım bulunur. Taşma birden çok öğeden geliyorsa her biri ayrı ayrı düzeltilir.
Düzeltme, öğenin türüne göre yapılır. Görsellerin genişliği kapsayıcının genişliğiyle sınırlanır. Sabit genişlikler oransal değerlere çevrilir ve Elementor’un telefon görünümünde ayrıca ayarlanır. Geniş tablolar kendi içinde kayan bir kutuya alınır; tablo yana kayar, sayfa yerinde kalır. Uzun adreslerin satır sonunda bölünmesine izin verilir. Video ve harita alanları ekran genişliğine uyacak biçimde eklenir.
Düzeltmeden sonra sayfa farklı telefon genişliklerinde ve yatay konumda denenir. Geliştirici araçlarındaki görünüm gerçek cihazın yerini tutmaz; sayfa en az bir gerçek telefonda da açılır. Google, sayfaları dizine eklerken çoğunlukla mobil sürümü kullandığını belirtir. Bu nedenle web tasarım işi teslim edilmeden önce her sayfa şablonu telefonda bu açıdan ayrı ayrı kontrol edilir.
Sayfadaki E-posta Adresi İstenmeyen Postalardan Nasıl Korunur?
Toplayıcı botlar, sayfaların metnini tarayıp e-posta adresi biçimindeki yazıları ayıklayan programlardır. Topladıkları adresler istenmeyen posta listelerine eklenir. Sayfada düz metin olarak duran adres, bu programların kolayca okuyabildiği bir biçimdir. Tıklanınca e-posta programını açan bağlantının içinde de adres açıkça yazar. Koruma, adresin ziyaretçiye açık kalmasını ve botlar için zor okunur olmasını hedefler.
İlk yol, adresi sayfaya yazmak yerine iletişim formu kullanmaktır. Form gönderildiğinde ileti sunucudan sizin adresinize iletilir; adres sayfanın hiçbir yerinde görünmez. Formun kendisi de korunur. Elementor Pro formuna ziyaretçinin görmediği bir tuzak alanı eklenir; bu alanı dolduran gönderim bot gönderimi sayılır. Gerekirse formun sonuna bir bot doğrulama adımı da konur.
Adres sayfada görünecekse karakterleri kodlanarak yazılır. Bu yöntemde tarayıcı adresi ekranda normal biçimde gösterir, ama sayfanın kaynağında harfler kod karşılıklarıyla durur. WordPress’in bu iş için hazır bir işlevi bulunur. Başka bir yöntemde adres, sayfa açıldıktan sonra JavaScript ile parçalarından birleştirilir. İki yöntem de basit botları zorlar; gelişmiş botların bir kısmı adresi yine okuyabilir.
Adres resim olarak eklenmez ve harfleri sözcüklerle bölünerek yazılmaz. Resimdeki adres kopyalanamaz ve telefonda dokunulduğunda e-posta programını açmaz. Ekran okuyucular resmin içindeki yazıyı okuyamaz; adres alternatif metne yazılırsa da koruma ortadan kalkar. Sözcüklerle bölünmüş adresi ise ziyaretçinin kendisi düzeltip elle yazar. Bu sırada yanlış yazılan adrese giden ileti yerine ulaşmaz.
Adres sitenin birden çok yerinde geçebilir: iletişim sayfası, sayfa altı, yasal metinler ve yapılandırılmış veri. Hepsi sayfanın kaynağında okunabilir. Koruma her yerde aynı yöntemle uygulanır; açık kalan tek bir kopya korumayı etkisiz bırakır. Yapılandırılmış verideki adres kodlanamadığı için e-posta bu veriye yalnızca gerekiyorsa eklenir. Web tasarım aşamasında sitede işe ayrılmış bir adres kullanılır ve posta sunucusunda istenmeyen posta filtresi açık tutulur.
Denetimde sayfanın kaynağı açılır ve adresin düz metin olarak geçip geçmediği aranır. Telefonda adrese dokunulur ve e-posta programının doğru adresle açıldığı kontrol edilir. Ekran okuyucuyla adresin doğru okunduğu dinlenir. Bu yöntemler istenmeyen postayı azaltır, tamamen durdurmaz. Görünürlük incelemesinde açık duran e-posta adresleri de görünürlük raporuna yazılır. Web tasarım, SEO ve yazılım tek bir ekipte yürütülür. Onay verdiğiniz düzeltmeler aylık iş listesine alınır.
Formuma yüklenen dosyalar e-postama gelmiyor; sorunu nerede aramalıyım?
Önce form ayarlarında dosyanın e-postaya ek olarak mı gönderildiğine, yoksa sitede mi saklandığına bakın. Ek olarak gönderiliyorsa posta kutunuzun ek boyutu sınırını ve istenmeyen posta klasörünü kontrol edin. Ardından sunucunun yükleme sınırını formdaki sınırla karşılaştırın ve küçük bir dosyayla deneme gönderimi yapın.
Sitemin renklerinin renk görme farklılığı olan biri için anlaşılır olup olmadığını nasıl denerim?
Tarayıcınızın geliştirici araçlarında renk görme farklılıklarını ve gri tonları gösteren görünümleri seçin. Formları, menüyü, metin içindeki bağlantıları ve grafikleri bu görünümlerde tek tek inceleyin. Bir bilgi yalnızca renkten anlaşılıyorsa yanına metin ya da simge ekleyin. Metin ile zemin arasındaki kontrastı ayrıca ölçün.
Telefonda sayfam yana kayıyor ama hangi bölümün taştığını bulamıyorum; nasıl bulurum?
Sayfayı bilgisayarda açıp geliştirici araçlarının cihaz görünümüne geçin. Bölümleri öğe seçme aracıyla tek tek işaretleyin; ekrandan geniş olan öğe ölçüsüyle görünür. Bulamazsanız Elementor’da bölümleri sırayla gizleyip sayfayı yenileyin. Kaymanın kaybolduğu anda gizlediğiniz bölüm taşan öğeyi içerir.
E-posta adresimi kodlanmış biçimde yazdım; ziyaretçiler adrese dokunup hâlâ e-posta gönderebilir mi?
Evet, kodlama yalnızca sayfanın kaynağını değiştirir. Tarayıcı adresi ekranda normal biçimde gösterir ve dokunulduğunda e-posta programı açılır. Bunu kendi telefonunuzda deneyin. Adres JavaScript ile birleştiriliyorsa, JavaScript çalışmayan tarayıcılarda görünmeyebilir. Bu durum için iletişim sayfasında bir form da bulundurun.