Tablosuz Tasarım (Tableless)

Bugün son zamanlar da oldukça ilgi gören tablosuz tasarımdan çok teknik konulara inmeden bahsetmek istiyorum.

Tablosuz Tasarım Nedir?

Tablosuz tasarım adından da kolayca anlaşılacağı gibi, web sayfalarımızı tasarlarken tablolu yerleşim planını terkedip, HTML 2.0′dan sonraki versiyonlarda desteklenmeye başlanan bölümlü yada bölmeli diyebileceğimiz yerleşim planına geçmemiz ve sayfalarımıza CSS ile stil vermemiz anlamına geliyor.

Tablosuz Tasarım İçin Nelere Yapmalıyız?

Öncelikle “CSS” yani “Cascading Style Sheets” (Stil şablonları: http://tr.wikipedia.org/wiki/CSS) kullanımı hakkında daha fazla bilgi edinmeliyiz. CSS hakkında daha fazla teknik bilgi edinmek için http://www.w3.org/Style/CSS/ adresini ziyaret edebilirsiniz. Evet CSS ile ilgili yeterli deneyime ve bilgiye sahipsek tablosuz tasarım yapmamamız için bir neden yok.

Web sayfalarımızın yerleşim planını <table><tr><td></td></tr></table> etiketleri yerine <div></div> etiketleri ile planlayıp CSS yardımıylada stil vermeliyiz.

Tablosuz yerleşim planı hakkında daha detaylı bilgi almak için http://www.w3.org/2002/03/csslayout-howto, http://www.andybudd.com/@media2005/ ve http://www.thenoodleincident.com/
tutorials/box_lesson/boxes.html adreslerindeki örneklere bakabilirsiniz.

Tablosuz Tasarımın Yararları

İnternet tarayıcıları (browser), tablosuz tasarım ile yerleşim planı yapılmış web sayfalarını tablolu tasarımlara göre daha hızlı okurlar.

Web sayfalarınız daha az boyutlarda olur ve bant genişliğinden tasarruf sağlar.

Web sayfanıza ait kod daha okunaklı ve anlaşılır olur.

Tablolu tasarımda yüzlerce satırda yapacağınız işleri daha az kod yazarak tablosuz tasarımla yapabilirsiniz.

Tablolu tasarımlarda zor olan bir çok görsel oluşumu tablosuz tasarımlarda kolayca yapabilirsiniz.

Tablosuz Tasarımın Bazı Dezavantajları

Öncelikle, sayacağım dezavantajların sadece kendi görüşlerim ve tecrübelerim olduğunu belirtmek isterim.

Tablosuz tasarım ile yerleşim planı yapılmış web sayfaları karışık ve yüksek boyutlarda CSS dosyaları içerebilir.

CSS dosyasının zarar görmesi veya internet tarayıcısına yüklenmemesi durumunda web sayfası hiç hoş karşılamayacağınız bir şekilde görünebilir.

ASP .Net gibi teknolojileri kullanıyorsanız, ASP .Net repeater, datalist, datagrid gibi bazı kontrolleri tablolu html kodlar ile oluşturulmaktadır bu durumda kendi ASP .Net kontrollerinizi yazmanız gerekebilir.

CSS kodlarının bazı tarayıcılarda farklı algılanması nedeniyle tarayıcıya özel CSS kodlama yazmanız gerekebilir.

Tablosuz Tasarıma Geçişte Önerilerim

CSS konusunda yeterli bilgiye ve deneyime ulaştığınızdan emin olmalısınız.

Tablosuz tasarım ile yapılmış web sitelerine ait kodları incelemelisiniz, başkalarının tecrübeleri size yol gösterici olabilir fakat emeğe saygı göstermemiz gerektiğini ve kodları alıp hiç bir emek sarfetmeden veya kodu yazan kişiden izin almadan kullanmamız gerektiğini hatırlatmak isterim.

Konu hakkında teknik bilgi veren web sitelerine ait yazıları, makaleleri okumalısınız.

Web sayfalarınızın yerleşim planını kağıt üzerinde tasarlamanız ve daha sonra işe başlamanız, sayfalarınızı şekillendiren kodları yazarken nasıl bir görüntü elde etmeniz gerektiğini hatırlamanızda yardımcı olacaktır.

Hoş olmayan ve telafisi zaman alacak durumlarla karşılaşmamak için, farklı platformlarda ve internet tarayıcılarında sayfalarınızı mutlaka test ediniz. http://www.browsercam.com/ adresinde deneme hesabı oluşturarak web sayfalarınızın farklı platformlarda görsel açıdan nasıl sonuç verdiğini görebilirsiniz.

Not: Tablosuz tasarım ile tabloları hayatımızdan tamamen silmemiz gerekmiyor. Tablosuz tasarım ile tabloları web sitemizde gerektiği yerlerde yani tablo yapmak için kullanabiliriz.