Osman S Börütecene

alemlerin aslı hayaldir

Güncel: Ana Sayfa

Önceki yazı: Recep Tayyip Erdoğan’ın Özeti

Sonraki Yazı: “En Çok Tıklanan” Deyimi Yerleşmeye Başladı!

Tablosuz Tasarım Fetişi ve Erişilebilirliği Zayıf Web Standartları

7 Mayıs 2007 Pazartesi 01:05, Osman Seyit Börütecene

Evvela şunu söylemeliyim, bu yazı web tasarımına dair herkesin ilgisini çekemeyecek teknik detaylar içeriyor. Bu nedenle sadece web tasarımına ilginiz varsa okuyun. Yazının başlığını uzun tutmak istemedim, o yüzden önce başlığa ek açıklama getireyim:

Web standartlarında tasarım yapmak isteyen dünya gençlerinden bazıları, esas amaçlarından biri erişilebilirlik olan web standartlarını birer tabu olarak kabul edip tuhaf tuhaf işler yapıyorlar.

Tabi problemin esas sorumlusu “astığım astık, çaldığım düdük” politikası ile internetin gelişimine ket vuran ve kullanıcı deneyiminin fakirleşmesine yol açan Microsoft. Eğer Internet Explorer tutarlı bir CSS ve Javascript kabul etme politikasına sahip olsaydı bu yazıda şikayet edeceğim türde şeyler olmayacaktı.

Tablosuz tasarımdan başlayalım. Şu anda varolan ve birçok browser’da kullandığımız CSS spesifikasyonunda sütun mantığı yoktur. Yani web standartlarında tasarımda tablo ile oluşturulan görsel düzenin yerini tutabilecek bir kodlama, bir css düzeneği yok. Bunun yerine tasarımda uydur kaydır kullandığımız “float” bir metnin içindeki resmi ya da herhangi başka bir kutuyu o metnin içinde sağa ya da sola dayamak için kullanılır.

Sütunların yerine geçebilecek column (kolon) özelliği verebilme olanağı CSS3 te var. Bu da henüz hayata geçebilmiş değil (firefox dışında). Hal böyleyken, gerek çağdaş web tarayıcılarında gerekse Internet Explorer’ın quirk olmayan standartlara uygun modunda bizler float özelliğini hack ederek kullanıyoruz. Amacımız ne? Tablo kullanmamak. Nedeni ne? Çünkü tablo bir html metin içerisinde görsel özellik tanımlıyor. Web standartlarına göre bir web sayfasının görsel düzeni html ile değil CSS ile sağlanır. Tablo kullanılmamasının nedeni budur. Tablo, tabular veri için kullanılır. Örneğin takvim, örneğin maç sonuçları vs.

Ancak belirttiğim gibi, tabular olmayan veriyi html kullanmadan sütuna dönüştürmeye kalkarsak sonuç CSS yi hack etmektir. Sütun özelliği amacıyla oluşturulmamış bir attribute’u sütun oluşturmak için kullanmış oluyoruz.

Bununla nereye varıyoruz? Hiçbir yere varmıyoruz, şöyle ki:

Tablo kullanmıyoruz çünkü görme özürlüler ve google benzeri robotlar, lynx gibi tarayıcılar html belgeyi sıralı olarak okuyorlar bu da karmaşaya yol açıyor. Bu doğru mu? HAYIR!

Tablo ile sütunları belirlediğimiz bir tasarımda bu web sitesinde olduğu gibi solda içerik sağda menü ve benzeri işlevler gören div kalıpları varsa bu sırayı bozuyor mu? HAYIR!

Tablo içindeki verilerin gösterilmesi tablonun tamamının yüklenmesini mi gerektiriyor? HAYIR!

Peki sütun oluşturmak için tablo kullanıp, geri kalan görsel özellikleri CSS ile düzenlesek web standartlarının amacından sapmış mı olacağız? HAYIR! HAYIR! HAYIR!

Üstelik, bu sayede hem hack kullanmamış oluyoruz hem de CSS dosyasının boyutunu azaltıyoruz hem de javascript yükünü azaltıyoruz.

Arkadaşlar bu gerçekten çok önemli bir konu. Ben bir süre önce aldığım kararla Internet Explorer’ı bu blogda desteklemiyorum. IE6 ile ziyaret edenler sağ tarafta olması gereken sütunu aşağıda görüyorlar. Şimdi bu benim kişisel sitem ve blogum, kendi şahsi kararım. Beni bağlar. Peki ama günlük gazeteler, ticari işlevi olan web siteleri, bankalar, alışveriş siteleri ne yapsın?

Her gün yüzbinlerce orta seviye bilgisayar kullanıcısına erişmek zorunda olan, interneti mecburen satın aldıkları bilgisayarın üzerinde gelen yazılımla kullananlara erişmek zorunda olan siteler ne yapsın?

Bu işin çözümü melez tasarımdadır. Diğer türlü web tasarımcıları uyumluluk adına müşterilerinden daha fazla saat çalışma ücreti almak durumundadırlar. Aslında bu parayı web tasarımı müşterisi adına Microsoft’un ödemesi gerekir ama dünyada işler mantıkla yürümüyor.

Her neyse öfke içeren bir yazı bu o yüzden iki lafı biraraya ne derece getirebildim bilemiyorum. Melez tasarımın açıklamasını yaparak konuyu kapatmam en iyisi olacak.

Bütün browserlarda erişilebilir (erişilebilirlik ile herkesin aynı şeyi görmesi aynı şey değil, doğrusu görüntünün korunmak zorunda olduğu diyelim) olmak zorunda olan bir web sitesi hazırlamanız gerekiyorsa sütunlar için tablo kullanın. Ana sütunlar için tablo kullandıktan sonra işin geri kalanını CSS ile halledin. CSS ile konumlandırma hiç şüphesiz en doğru iştir ama veri ile tasarımı ayırmaya henüz elverişli değildir. Özellikle de dünya çapında yarıdan fazla insan hala Internet Explorer kullanıyorken (ie6, ie7 hiç farketmiyor!) Microsoft’un web standartlarına uyum göstermemesinin bedelini müşterilerimize ve internet kullanıcılarına ödetemeyiz.

İşte böyleyken böyle.

'Tablosuz Tasarım Fetişi ve Erişilebilirliği Zayıf Web Standartları' başlıklı yazıya 7 yorum yapılmış.

ferhad diyor ki:
7 May 2007 10:04
“Tabi problemin esas sorumlusu “astığım astık, çaldığım düdük” politikası ile internetin gelişimine ket vuran ve kullanıcı deneyiminin fakirleşmesine yol açan Microsoft.”
İşte bu yüzden de biz ona Microstupid diyoruz.
Volkan Özçelik diyor ki:
8 May 2007 00:21
Osman,

Yazdıklarını anlıyor ve hepsine katılıyorum.

Bununla beraber en azından senin (benim) gibi CSS tabanlı tasarımın detaylarını bilen, semantik imlemeyi “felsefesiyle beraber” anlayan kimseler için melez bir tablo tabanlı tasarım kullanmanın biraz “geriye adım atmak” olduğunu düşünüyorum.

Bence, hackli olsun, float’lu olsun, CSS tabanlı ve semantik olarak tasarımımızı hazırlayıp, zaman içinde CSS dosyamız içindeki hackleri temizlemek olmalı amacımız.

…

Örneğin eskiden IE5.x için Tantek Çelik’in “box model hack”ini uygulamaya dikkat ediyordum. Şu an ise önemsemiyorum:
Microsux bile IE5′ten desteğini çekmişken ben niye IE5′i destekleyim ki?

…

IE7 CSS3 tablo kolon yapısını an itibariyle desteklemiyor. Fakat sopa zoruyla da olsa iyiye doğru gittiği yadsınamaz.

…

Dediğim gibi, XHTML sayfamızın imlerinin (markup) mümkün olduğunca anlamlı (semantik) ve sade olması taraftarıyım. Bunun bedeli olarak gerekirse ileride (hamallık yapmaya ve) CSS’deki floatları ve hackleri display:table attribute’u global olarak desteklendiğinde kaldırmaya razıyım.

Hem; float’lar tasarımsal olarak daha kullanışlı ve esnek çözümler de sunabiliyor:

örneğin sarmal.comda sayfa yeniden boyutlandırıldığında (resize) layout’u bu kadar esnek değiştirebilme opsiyonunu tablo tabanlı bir tasarımla sağlayamazdım. meraklısına konunun ayrıntıları.

…

Uzun lafın kısası, “eğer ne yaptığını biliyorsan” hibrid bir yapı kullanmanın da saf CSS tabanlı bir tasarım kullanmanın da aynı kapıya çıktığını; önemli olanın konu hakkında “belirli bir bilinç düzeyinde olmak” ve “ezbere iş yapmamak” olduğu görüşündeyim.

Sevgiler,
Volkan
Osman Seyit Börütecene diyor ki:
8 May 2007 00:45
Anlıyorum tabi ama burada esas sorun çoğunluğun kullandığı browser olunca işler şöyle zorlaşıyor; IE 7′de daha evvelden kullanılan bazı hackler geçersiz hale geldi.

Ben buna şöyle bir çözüm düşündüm: Nasıl ki bazı siteleri ziyaret etmek için Flash 7/8/9 gerekiyorsa, belki biz de kendi işlerimiz için “firefox gerekiyor” ibaresi koyarak kurtulabiliriz bu illetten.

Tablo kullanımı bence geri adım atmak değil. Hayır bunu da anlıyorum ama “veriyi sunumdan ayırma” noktasında tablo yerine div kullanmak da veriyi sunumdan ayırmıyor, sadece “Windows üzerinde IE” haricindeki her türlü bilgisayar, cep telefonu, oyun makinası vs. üzerinde kullanılan tarayıcılarda da tasarımsız ama kayıpsız görüntü sağlıyor. Yine de eğer yanyana üç sütunu ortalamak için div içinde div kullanıyorsan tasarım veriden ayrılmamış demektir.

Dolayısıyla tablo kullanımı da ancak bir bilgisayar üzerinde görüntüleneceğinden emin olduğun bir web sitesi için kullanılmalı. Ama tabii tabloyu da “collapse” ettirebilme imkanın var o yüzden web standartlarını bozmadan da tablo kullanılabilir aslında.

Her neyse, Microsoft yolcu zaten, aha şuraya yazıyorum 10 yıl sonra bugün Microsoft tek bir yazılım dahi yapıyor olsun ben de blogumdan canlı yayın yapar anırırım.
Volkan Özçelik diyor ki:
8 May 2007 01:20
“Her neyse, Microsoft yolcu zaten, aha şuraya yazıyorum 10 yıl sonra bugün Microsoft tek bir yazılım dahi yapıyor olsun ben de blogumdan canlı yayın yapar anırırım”

:) Seni anırtmamak için linkibol.com’u, Fdora Core’a kurup, Ruby on Snails’e geçmeye bile razıyım.
Osman Seyit Börütecene diyor ki:
8 May 2007 01:35
Zaten senin gibi adamın Microsoft ürünleri kullanması başlıbaşına utanç kaynağı benim için.

Artık Ruby olur Python olur yakışır sana hepsi.
Volkan Özçelik diyor ki:
8 May 2007 07:32
> Zaten senin gibi adamın Microsoft ürünleri kullanması başlıbaşına utanç kaynağı benim için.

Gücün karanlık tarafında da bir savaşçı lazım
Az savunmadım erişilebilirlik / kullanılabilirlik vb. konuları CodeProject forumlarında.

İtiraf etmek gerekirse, ben de “istemeye istemeye” linkibol.com’u .net framework’te tasarlamak zorunda kaldım (elimde bir .net projesi vardı, wrapperlarım, kütüphanelerim falan hazırdı… e askerlik de yaklaşıyordu ve stratejik bir karar vermem gerekiyordu — hâlâ ruby on rails içimde uktedir )
cem diyor ki:
15 June 2007 08:41
Peki sütun oluşturmak için tablo kullanıp, geri kalan görsel özellikleri CSS ile düzenlesek web standartlarının amacından sapmış mı olacağız? HAYIR! HAYIR! HAYIR!

tek kelime ile katılıyorum web sitesi tasarımını yapan ve daha sonradan html haline çeviren arkadaşlar psikolojinizi bozmayın kesinlikle yok div ile tasarım yapıcağım table kullanmıyacağım filan siz kendi standartınızı belirleyin size yeter….