Tablosuz Tasarım
November 26th, 2005
Tablosuz tasarım, ingilizce tanımıyla “tableless design”, son yılların tasarım modalarından biri. Web tasarımında, tabular data dediÄŸimiz tablo halinde veri sunumu yapmaya yarayan “table” tag’ının tasarım amaçlı kullanımına karşı çıkan bir model.
Daha doğrusunu söylemek gerekirse, böyle moda ve trend biçiminde adlandırmaktan ziyade bir web standardı olarak adlandırmak gerekiyor bunu. Çünkü www konsorsiyumunun tavsiyesi de bu yönde; tabloları kullanmamak.
CSS geliÅŸtikçe ve “div” leri daha iyi yönetebildikçe eski bir tasarım alışkanlığı olan table kullanma sisteminin pabucu dama atılıyor. Bu tasarım prensibinin temelinde görsel tasarım ile veriyi birbirinden ayırmak var. W3C konsorsiyumu diyor ki, veriyi ve tasarımı birbirinden ayrı tutarsanız böylece tasarımı her saniye rahatlıkla deÄŸiÅŸtirebilirsiniz.
Son derece doğru bir yaklaşım bu. Ancak bazı sorunlar var yine de.
Microsoft, bir çok konuda olduÄŸu gibi web alaninda da standartlara uymaktan kaçıyor ve internet explorer’ı sorunlu bir tarayıcı olarak karşımıza çıkarıyor. Yüzbinlerce web tasarımcısı yaptıkları iÅŸlerde internet explorer için ayrı, geriye kalan tüm diÄŸer web tarayıcıları için ayrı tasarımlar yapmak zorunda kalıyorlar. Bu iÅŸin çözüme ulaÅŸmasının tek yolu, Microsoft’un internet explorer’ı CSS dökümanlarını doÄŸru bir biçimde tarar hale getirmesi.
Bir diÄŸer sorun ise, bu benim ÅŸahsi görüşüm, Microsoft’un uyumsuzluÄŸundan kaynaklanan sorunları çözme aÅŸamasında web tasarımcılarının tablosuz tasarıma körü körüne baÄŸlı kalmak istemeleri. Oysa önemli olan her zaman ziyaretçiye veriyi olabilecek en güzel tasarımla ve en hızlı biçimde iletmektir. Bunu gerçekleÅŸtirmeye çalışırken bir bakıyorsunuz CSS dosyası internet explorer’a dert anlatabilmek için ÅŸiÅŸtikçe ÅŸiÅŸiyor. Bu olmaz, olmamalı. Böyle mantık yürütülmez. Ãœstelik Tablo kullanmak veriyi tasarımdan ayıramamak anlamına gelmiyor ki. Sen yine ayır tasarım ile veriyi ama CSS’de bu kez sitenin anahatlarını belirleyecek tabloların özelliklerini kodla. Böylece div tag’lerini internet explorer’a uygun hale getirinceye kadar bırak birkaç yüz byte yerden kazan hızdan kazan.
Åžu Microsoft inatlarından bir vazgeçse kendisi de bugünkÄŸnden daha fazla para kazanacak ama sanırım daha fazla kazanmayı istemiyor artık… Ya da her imparatorluÄŸun da bir sonu var, bilmiyorum.
February 22nd, 2006 at 4:02 am
Şahsen konsorsiyuma katılmıyorum, son paragrafta söz ettiğiniz gibi tasarım ile veriyi ayırmakla siteyi tablo ile tasarlamak arasında ne gibi bir ilişki varmışki div ler, span lar kullanim tonlarca style yazayım. Ben nasıl hızlı ve rahat yazıyorsam o şekilde devam etmeliyim. Ancak ve ancak table tag yapısı ortadan kalkarsa ki mümkün değil ozaman geçebilirim:)
February 22nd, 2006 at 9:27 am
@emre:
ÅŸu anda table tag’leri ile yaptığınız ÅŸeyle div tagleri ile yaptığınız ÅŸey arasında fazla fark yok, bunlar tonlarca style gerektirmiyor.
ancak ÅŸu açıdan haklısınız, konsorsiyumun geliÅŸtirdiÄŸi css2 dahi yeteri kadar olgunlaÅŸmadı. örneÄŸin üç sütunlu bir tasarım yaparken tonlarca olmasa bile bana göre haddinden fazla css yazmanız gerekiyor. bunun dışında bunları tüm browserlara tanıtabilmek için de hack üstüne hack gerekebiliyor. benzer bir durum ise ÅŸurada geçerli, yanyana duran iki div’in görsel açıdan bütünlüğünü saÄŸlamak table ların bütünlüğünü saÄŸlamaktan daha zor. eÄŸer ikisi farklı renklerde iseler içeriÄŸe göre biri uzadıkça diÄŸeri uzamadığından bunların hacivatla karagöz gibi durmasını engellemek için ekstradan css yazmanız gerekiyor ki iÅŸte bu tam bir rezalet. bu konuda yapabileceÄŸimiz yegane ÅŸey css3′ü beklemek.
bir diÄŸer yandan, bu en baÅŸtan beri böyle olmamalıydı çünkü konsorsiyum ÅŸurada çeliÅŸiyor: table tag’lerinin zaten baÅŸlangıçtan beri tabular data için olduÄŸunu söylüyor. ancak böyle olsaydı bence div rag’lerinin kontrolu bu kadar yavaÅŸ ilerlemezdi kronolojik olarak.
ÅŸimdi en önemli bulduÄŸum noktaya geliyorum, bence bir web sitesinin hayrı için tasarım melez olmalı. verimliliÄŸe göre yer yer table yer yer div kullanılmalı. mesela 3 sütunlu bir tasarımda mutlaka table kullanılmalı bu üç sütun için ama içlerindeki materyalin düzenlenmesi için içiçe sonsuz table lar yerine düzenlemesi css ile çok daha hızlı ve kolay olan div’ler kullanılmalı.
yorumu çok uzattım galiba, demek ki yazıyı yarım bırakmışız…
July 13th, 2006 at 4:00 pm
güzel bir yazı olmuş elinize sağlık,
ben tasarım için tablo kullanılmasına karşıyım çünkü tasarımcı için kısıtlamalar getirmekte, şöyleki divlerin kod içindeki yeri ne olursa olsun ekranda istediğiniz yere taşıyabiliyoruz. tablo hücreleri için böyle birşey söz konusu değil.
ayrıca hiç abartıldığı kadar fazladan css yazmak gerekmiyor hem css dosyası tarayıcı önbelliğine alınıyor bu da bandwidth tasarrufu için oldukça önemli.
microsofta gelince Bill Gates Microsoftun en kazanan firma olduğunu söylüyor ne yazıkkı doğru ve gelecekte de böyle devam edecek gibi, amaç para kazanmak olunca standartlar kimin umrunda. bence en güzeli alternatif tarayıcılara yönlenmek ve ziyaretçileri de bu yönde teşvik etmek olsa gerek
December 1st, 2006 at 8:12 am
[…] Bunu gerçekleÅŸtirmek, tasarımı dünya standartlarında yapabilmekle mümkün. Dünya standartları dediÄŸimiz zaman da aklımıza XHTML, CSS, Tablosuz Tasarım gibi konular geliyor. Dünyadaki iÅŸ bölümü nedeniyle bunların hepsini bilmek zorunda deÄŸilsiniz. O yüzden web sitenizi yapan kiÅŸiye / kuruma bu kelimeleri tanıyıp tanımadıklarını sormanız belki de ÅŸimdilik yeterlidir. […]
January 13th, 2007 at 6:52 pm
[…] Web tasarımı alanında son yılların deÄŸiÅŸmez tartışma konularından biri haline gelen tablosuz tasarım, web standartları ile tasarım yapmanın önemli unsurlarından biri. Ancak gündelik hayatın getirdiÄŸi bazı gerçekler ve fiili durum, tablosuz web tasarımı yapmayı zorlaÅŸtırıyor. […]
May 6th, 2007 at 4:32 am
[…] Web sayfalarýnda Tablosuz tasarým akýmý uzun süredir devam ediyor. Bir kaç yýl aradan sonra bu yöntemi kullanarak yeni bir web projesine baþladým. Eminim benim gibi bir çok kiþi sapýtmýþ div etiketleri içine þunu yazmak zorunda kalmýþtýr: style=”border: 1px solid black”. Böylece sapýtan bölgeyi görünür kýlýp gerekli düzeltmeler daha kolay yapýlabilir. Siz de bunu sýk sýk yapýyorsanýz CSS dosyanýza aþaðýdaki kodu ekleyip gerektiðinde yorum kýsmýný kaldýrmanýz ve iþi bitince tekrar yorum içine almanýz faydalý olacaktýr. /* DEBUG */ /* div { border: 1px dashed #000; } */ […]