Anasayfa › Web Tasarım
Web Tasarım
Web tasarım, sayfaların her cihazda ve her dilde düzgün görünmesini planlar: form alanlarında etiket ile yer tutucu metnin ayrı kullanımı, büyük harfe çevrilen yazılarda Türkçe “i” harfinin bozulması, tarayıcı çevirisi açıldığında düzenin kayması ve telefonda tam ekran bölümlerin adres çubuğu altında kalması.
Web Tasarım Sürecinde Form Alanlarında Etiket ve Yer Tutucu Metin Nasıl Kullanılır?
Form alanındaki etiket, alanın ne istediğini söyleyen ve kutunun dışında duran kısa yazıdır. Yer tutucu metin ise kutunun içinde soluk renkle görünen ve yazmaya başlayınca kaybolan yazıdır. Web tasarım sürecinde iki öğe ayrı görevlerle kullanılır. Etiket alanın adını taşır. Yer tutucu metin yalnızca beklenen yazılış biçimi için ipucu verir. İkisi aynı alanda birlikte bulunabilir.
Yer tutucu metin etiketin yerine kullanılırsa sorun yazmaya başlanınca ortaya çıkar. Metin kaybolduğu için ziyaretçi alanın ne istediğini unutabilir. Form gönderilmeden önce girilen bilgileri gözden geçirmek de zorlaşır. Soluk renkli yazının zeminle karşıtlığı, erişilebilirlik ölçütlerinin istediği düzeyin çoğunlukla altında kalır. Ekran okuyucu yazılımlar da yer tutucu metni her durumda okumaz.
Etiket, kodda ilgili alana bağlanarak yerleştirilir. Bu bağ kurulduğunda ekran okuyucu, alana gelindiğinde etiketi sesli okur. Etikete dokunmak imleci doğrudan alana taşır. Telefonda küçük kutulara dokunmak bu sayede kolaylaşır. Etiket alanın hemen üstünde durur ve alanla arasında az boşluk bırakılır. Böylece hangi etiketin hangi alana ait olduğu karışmaz. Etiketin yazı boyutu da alandaki yazıdan küçük tutulmaz.
Elementor’un form bileşeni her alan için etiketi ve yer tutucu metni ayrı kutulardan alır. Bileşenin etiketleri gösteren ayarı açık tutulur. Yer tutucu metinde alanın adı tekrarlanmaz. Telefon alanında numaranın yazılış biçimi, e-posta alanında adresin biçimi gösterilir. Zorunlu alanlar etiketin yanında bir işaretle belirtilir. Bu işaretin anlamı formun başında bir kez açıklanır.
Alanın türü de doğru seçilir. Telefon alanı telefon türünde tanımlandığında telefonda rakam klavyesi açılır. E-posta alanında klavyeye @ işareti kendiliğinden eklenir. Ad, telefon ve e-posta alanlarına otomatik doldurma bilgisi verilince tarayıcı kayıtlı bilgileri önerir. Bu bilgi alanın hangi veriyi beklediğini tarayıcıya söyler. Bu ayarlarla ziyaretçi daha az yazar ve yazım hatası yapma olasılığı düşer.
Hata iletileri etiket düzeniyle birlikte tasarlanır. Hatalı alanın altında sorunun ne olduğunu söyleyen kısa bir yazı çıkar. Hata yalnızca kırmızı çerçeveyle gösterilmez; renkleri ayırt edemeyen ziyaretçiler için metin de eklenir. Hata iletisi ekran okuyucular tarafından da duyurulacak biçimde kurulur. Form gönderildiğinde başarı iletisi formun bulunduğu yerde görünür. Web tasarım denetiminde her form telefonda ve bilgisayarda doldurularak gönderilir.
Büyük Harfe Çevrilen Yazılarda Türkçe “i” Harfi Neden Bozulur?
Menülerde, düğmelerde ve başlıklarda yazılar çoğu zaman bir tasarım ayarıyla büyük harfe çevrilir. Bu durumda metin sayfaya küçük harfle girilir ve tarayıcı onu ekranda büyük harfle gösterir. Çeviriyi tarayıcı yapar ve bunun için sayfanın dil bilgisine bakar. Sayfanın dili Türkçe olarak tanımlanmamışsa küçük i harfi noktalı İ yerine noktasız I olarak çıkar.
Türkçede iki ayrı küçük i harfi vardır ve her birinin büyük hâli farklıdır. Noktalı i büyük İ olur, noktasız ı ise büyük I olur. İngilizcede yalnızca noktasız büyük I bulunur ve küçük i bu harfe çevrilir. Dil bilgisi eksik ya da İngilizce olduğunda tarayıcı bu kuralı uygular. Böylece “iletişim” sözcüğü ekranda “ILETIŞIM” olarak görünür.
Aynı sorun küçük harfe çevirmede ters yönde görülür. Dil Türkçe değilse büyük I, küçük ı yerine noktalı i olur. Sözcüklerin yalnızca ilk harfini büyüten ayarda da yanlış harf çıkabilir. Sözcük ekranda bozuk görünse de sayfanın kaynağındaki metin doğrudur. Google metni bu kaynaktan okur; ekrandaki harf çevirisi arama sonucundaki yazılışı değiştirmez.
Çözüm, sayfanın dil bilgisini Türkçe yapmaktır. Sayfanın kodunda dili belirten bir bilgi bulunur ve bu bilgi Türkçeyi göstermelidir. WordPress’te bu bilgi Ayarlar menüsünün Genel sayfasında seçilen site dilinden gelir. Site dili Türkçe seçildiğinde bütün sayfalar bu bilgiyi taşır. Bir eklenti ya da tema dili ayrıca değiştiriyorsa bu durum web tasarım denetiminde sayfanın kaynağından görülür.
İkinci neden yazı tipidir. Bazı yazı tiplerinde noktalı İ, ş ve ğ harflerinin çizimi yer almaz. Tarayıcı eksik harfi yedek bir yazı tipiyle çizer ve sözcüğün içinde farklı görünen bir harf belirir. Yazı tipi seçilirken Türkçe karakterleri içeren sürüm kullanılır. Yazı tipi siteye yerel dosya olarak yüklenmişse bu karakterlerin dosyalarda bulunduğu kontrol edilir.
Metni düzenleyicide doğrudan büyük harfle yazmak da bir yoldur, ancak başka sonuçlar doğurur. Büyük harfle yazılmış metin, arama sonucunda ve paylaşım önizlemelerinde de büyük harfle görünür. Bazı ekran okuyucular bu metni harf harf okuyabilir. Bu nedenle metin olağan yazımla girilir. Büyük harf görünümünü tasarım ayarı verir ve sayfanın dil bilgisi Türkçe tutulur.
Ziyaretçi Sayfayı Tarayıcıda Çevirdiğinde Tasarım Neden Bozulur?
Tarayıcıların çeviri özelliği, sayfadaki metni ziyaretçinin seçtiği dile çevirir ve sayfanın içinde gösterir. Çeviri sunucudaki sayfayı değiştirmez; tarayıcıda açık olan kopyadaki metinleri yenileriyle değiştirir. Web tasarım sürecinde çevrilmiş sayfa ayrı bir görünüm olarak denenir. Bozulmanın üç ana nedeni vardır: metnin uzaması, çeviri aracının eklediği öğeler ve sayfanın yanlış tanımlanmış dili.
Çevrilen metin, Türkçe metinden daha uzun ya da daha kısa olabilir. Sabit genişlikteki bir düğmede uzayan yazı taşar ya da iki satıra bölünür. Tek satıra göre kurulmuş menüde öğeler alt satıra kayar. Yüksekliği sabitlenmiş kutularda metnin bir kısmı kesilir ve görünmez. Düğmeler ve kutular bu nedenle içeriğe göre büyüyecek biçimde kurulur, sabit yükseklik verilmez.
Çeviri aracı, çevirdiği metinleri sayfaya eklediği yeni öğelerin içine yerleştirir. Sayfadaki bir JavaScript betiği metni değiştirmeye çalıştığında aradığı öğeyi bulamayabilir. Dönen başlıklar, sayaçlar ve sekmeler bu sebeple çeviri açıkken durabilir ya da hata verebilir. Betiğe bağlı bölümler çeviri açık hâlde ayrıca denenir. Hata çıkarsa betik, değişen metni yeniden bulacak biçimde düzenlenir.
Bazı metinlerin çevrilmemesi gerekir. Marka adı, açık adres, telefon numarası ve e-posta çevrildiğinde anlamını yitirebilir. Bu bölümler sayfanın kodunda çevrilmeyecek alan olarak işaretlenir. Yaygın tarayıcıların çeviri araçları bu işareti dikkate alır ve o metne dokunmaz. Bu işaret ziyaretçiye görünmez; yalnızca çeviri aracının okuduğu bir bilgidir. İşaret yalnızca gerekli yerlere konur. Sayfanın tamamı işaretlenirse ziyaretçi çeviri özelliğini kullanamaz.
Sayfanın dili yanlış tanımlanmışsa tarayıcı çeviriyi yanlış ziyaretçiye önerir. Türkçe bir sayfa İngilizce olarak tanımlanmışsa Türkçe kullanan ziyaretçiye de çeviri önerilebilir. Öneri, adres çubuğunun yanında küçük bir pencerede çıkar. Bu öneri kabul edilirse metin anlamsız hâle gelebilir. Dil doğru tanımlandığında tarayıcı çeviriyi yalnızca başka dilde çalışan ziyaretçilere önerir. Sayfada başka dilde geçen bölümlerin dili de ayrıca belirtilebilir.
Görselin içine yazılmış metin çevrilmez. Hizmet adları ya da duyurular görsele gömülmüşse çevrilmiş sayfada Türkçe kalır. Bu metinler görselin üstüne ayrı bir yazı katmanı olarak eklenir. Denetimde sayfa telefon ve bilgisayar genişliğinde birkaç dile çevrilir. Menü, düğmeler, form ve alt bilgi tek tek kontrol edilir. Düzeltmelerden sonra aynı çeviri denemesi yinelenir.
Telefonda Tam Ekran Bölümlerin Adres Çubuğu Altında Kalması Nasıl Önlenir?
Tam ekran bölüm, yüksekliği ekranın yüksekliğine eşitlenen bölümdür. Çoğunlukla ana sayfanın en üstünde, büyük bir görsel ve bir başlıkla kullanılır. Telefonda sayfa aşağı kaydırıldığında tarayıcının adres çubuğu küçülür ya da kaybolur; yukarı kaydırılınca geri gelir. Görünen alanın yüksekliği de bu hareketle değişir. Bölüm yanlış birimle kurulursa alt kısmı adres çubuğunun ya da alttaki araç çubuğunun arkasında kalır.
Klasik ekran yüksekliği birimi, telefon tarayıcılarında adres çubuğu gizlenmiş hâldeki en büyük alana göre hesaplanır. Sayfa ilk açıldığında ise adres çubuğu görünür durumdadır. Bölüm bu nedenle görünen alandan uzun kalır. Bölümün en altına konan düğme, ok işareti ya da kısa yazı ziyaretçi kaydırmadan görünmez. Sorun alt kenarında araç çubuğu bulunan tarayıcılarda daha belirgindir.
Tarayıcılar bu sorun için yeni yükseklik birimleri sunar. Birincisi adres çubuğu açıkken kalan en küçük alanı ölçer. İkincisi çubuk gizliyken oluşan en büyük alanı ölçer. Üçüncüsü o anki görünür alanı izler. Tam ekran bölümde çoğunlukla küçük alanı ölçen birim kullanılır. Bu birimle bölümün tamamı adres çubuğu açıkken de ekrana sığar.
O anki görünür alanı izleyen birim, adres çubuğu her açılıp kapandığında yeniden hesaplanır. Kaydırma sırasında bölümün yüksekliği değişir ve altındaki içerik yer değiştirir. Bu hareket okunan satırın yerini kaydırır. Büyük bir arka plan görseli de her değişimde yeniden boyutlanır. İzleyen birim bu sebeple yalnızca yüksekliğin anlık değişmesi istenen bölümlerde tercih edilir.
Elementor’da kapsayıcının en küçük yüksekliği verilirken klasik birim yerine bu birimlerden biri girilebilir. Yeni birimleri tanımayan eski tarayıcılar için klasik birim yedek değer olarak bırakılır. Telefon görünümünde bölümün yüksekliği ayrıca ayarlanır. Bölümün altında bir sonraki bölümün üst kenarı görünür bırakılabilir. Klavye açıldığında görünür alan daraldığı için tam ekran bölüme form alanı konmaz.
Tarayıcıların geliştirici araçlarındaki cihaz görünümü adres çubuğunu göstermez. Denetim bu nedenle gerçek telefonlarda yapılır. Sayfa farklı tarayıcılarda açılır ve en üstteyken, biraz kaydırıldıktan sonra ekran görüntüsü alınır. Alt kenardaki öğelerin görünüp görünmediği ve içeriğin kayıp kaymadığı kaydedilir. Web tasarım ve SEO tek ekipte yapıldığından düzeltmeler aylık iş listesine birlikte yazılır.
İletişim formumda alanların adı kutunun içinde yazıyor ve yazmaya başlayınca kayboluyor; bunu değiştirmeli miyim?
Kutunun içindeki yazı yer tutucu metindir ve yazmaya başlayınca kaybolur. Alanın adını kutunun üstünde duran bir etiket olarak gösterin. Elementor’un form bileşeninde etiketleri gösteren ayarı açabilirsiniz. Yer tutucu metni yalnızca beklenen yazılış biçimi için kullanın. Etiket alana bağlı olduğunda ekran okuyucular da onu okur.
Menümdeki “iletişim” yazısı ekranda “ILETIŞIM” olarak görünüyor; nereden düzeltebilirim?
Büyük harfe çevirme ayarı, sayfanın dili Türkçe tanımlanmadığında bu sonucu verir. WordPress’te Ayarlar menüsünün Genel sayfasında site dilini Türkçe seçin. Ardından sayfanın kaynağında dilin Türkçe göründüğünü kontrol edin. Sorun sürüyorsa dil, bir eklenti ya da tema tarafından değiştiriliyor olabilir; yazı tipinin noktalı İ harfini içerip içermediğine de bakın.
Sitem tarayıcıda İngilizceye çevrildiğinde marka adım da çevriliyor; bunu nasıl önleyebilirim?
Marka adı, adres ve telefon numarası çeviri sırasında değişmemesi gereken metinlerdir. Bu bölümler sayfanın kodunda çevrilmeyecek alan olarak işaretlenebilir. Yaygın tarayıcıların çeviri araçları bu işareti dikkate alır ve metne dokunmaz. İşareti yalnızca bu bölümlere koyun; sayfanın geri kalanı ziyaretçi için çevrilebilir kalır.
Ana sayfamdaki tam ekran görselin altındaki düğme telefonda görünmüyor; bunun nedeni nedir?
Bölümün yüksekliği klasik ekran yüksekliği birimiyle verilmiş olabilir. Bu birim adres çubuğu gizliyken oluşan en büyük alanı ölçer. Sayfa açıldığında ise çubuk görünür ve bölüm görünen alandan uzun kalır. Yüksekliği küçük görünür alanı ölçen birimle verin ve sonucu gerçek bir telefonda deneyin.