Tablolari Pencereden Disari Atmak

Tablolari Pencereden Disari Atmak

Asagidaki yazinin orjinali www.stopdesign.com'un sahibi Douglas Bowman'a aittir. Bu yazi, 16 Eylul 2004 yilinda yazilmis olup, o gunden bugune bircok dile cevirilmis ve değişik bloglarda yayinlanmistir. Bu yazıdan bir ay sonra, Microsoft, sitesinin tasarımini yeniledi ve bu nedenle, bu yazi icindeki bazi referanslar gunumuz Microsoft.com'u yansitmayabilir ama su adresde, sozu edilen tasarım gorulebilir. Microsoft yeni tasarımi ile, Doug'in yazısında sozunu ettigi bircok konuda gelisme gosterdi ki, bu, Doug'in yazdigi yazinin gucunu sizlere anlatmaya yeter saniyorum. Bu yaziyi Turkce'ye cevirmemin nedenleri ise, konunun halen, Türkiye ve Dunya'da web icinde tartisilan bir konu olmasi ve Douglas Bowman'in takdir ettigim bir blog yazari ve tasarımci olmasidir.

Bak Anne, Tablo Yok!

Bu yil Seattle’da ki Digital Design World konferansina katilanlar benim “Tablolara son, CSS sayfa duzeni teknikleri” adli sunumumu izlediler. Bu sunusta, tablolarin anlamli kullanilislarini irdeledik, ve birkac CSS tekniginden tablolarin bicimlendirilmesi dogrultusunda bahsettik. Bunu takiben, tablosuz sayfa duzenine gectik, bu konuda ki orneklere goz attik ve iki basit yaklasimi (konumlandirma ve akislar) genel olarak irdeledik.

Sunumumun yarisina dogru vitesi degistirdim ve gercek bir web sayfasini, tablolarindan ve bosluk gif imajlarindan kurtarip, yalin CSS sayfa duzenine cevirecegimizi ilan ettim. Sunumumda kullanmak uzere hayali bir web sayfasi da yaratabilirdim. Fakat bu ornek danisikli dovus gibi gozukebilirdi. Eger kendi ornegimi yaratsaydim duzenli ve hos gozukecekti. Hersey tam da benim istedigim sekilde ortaya cikacak, ben de daha onceden bildigim icin tum muhtemelen sorunlu noktalardan uzak kalabilecektim.

Yapmacik bir sayfa yeterince ilgi cekici degildi. Gercek bir mucadele istedim. Sonuc olarak, birkac dinleyicinin de muhtemelen asina oldugu, kucuk, Seattle-bolgesine-yerel bir firma sectim.

Microsoft

Tamam, belki birkac dinleyiciden daha fazlasi da asina olabilir bu o-kadar da-kucuk-olmayan firmayla. Bircok kullanici Microsoft'un ana internet sayfasina ulasiyor hergun. Microsoft'un ana sayfasi, arastirma devleri Google ya da Yahoo kadar iyi biliniyor ve o siklikta ziyaret ediliyor olabilir de, olmayabilir de. Fakat Microsoft.com genelde tonlarca trafik yogunlugu altindadir, ve de bu adresten hergun gecen ziyaretci sayisi da buyuk olasilikla milyonlari bulur.

Microsoft’un websitesinin, bu trafige gore optimize edilmemesi gercekten utanc verici.Sitenin ziyaretcileri, bircok gereksiz grafik ve gereksizce olusturulmus agir sayfalari browserlari ile goruntuluyor ve bu nedenle sunucu bilgisayarlar (serverlar) ekstra bandwith harciyorlar. Tamam, 40 Kb’lik HTML’den olusan Microsoft websitesi bir canavar degil ama bu sayfa, erisilemez, tablo agirlikli ve garip JavaScript ile sisirilmis durumda. Farkettiyseniz, yazilan HTML kodunun gecerli bir kod olup olmadigindan bahsetmedim bile. Bu site, XHTML ile yazilmis olmasina ragmen, kodu yazanlar doctype elementini atlamislar.

Niye Microsoft?

Microsof’t tas atan bir kisi daha mi?

Acikca ve durustce... Hayir.

Microsoft’u, bu sirkete tas atanlar arasina katilmak icin secmedim. (Yaptilari bazi kararlar hakkinda soru sorma firsatini kacirmadim ama hicbir sekilde yargilayici konumda sunmadim.)

Kabul ediyorum ki, bile bile, cok iyi taninmis bir sirketi sectim ve bu benim kisiligimde var. Bir baska neden ise kullanicagim bu gercek dunya orneginin herkes tarafindan bilinen taninan bir ornek olmasi idi. Microsoft.com, standartlara uyumlu CSS makyaji icin bulunmaz bir adaydi (halende oyle).

Iste nedeni ...

1. Neden

Cunku, bu websitesi, tablo ve bosluk tutucu spacer GIF’lerin etkisiz kullanildigi bir site. Bu tip sayfalar, icerigi tablo icinde kitlediginden, erişebilir olmayan sonuclar veriryor. Bu yanlizca Microsoft’da ozgu degil. Cok buyuk bir cogunluga sahip olan websiteler, gunumuz Web’inde, sirf grafiksel kaygilar nedeniyle, tablo ve spacer gif’leri etkisiz olarak kullaniyorlar. Bu nedenle, diger websitelerinde ki bu tip problemleri yansitan taninmis bir ornek olmasi amaci ile ben Microsoft’u sectim.

2. Neden

Cunku, Microsoft websitesinin tasarım ana yapisi, binlerce sitenin kullandigi site yapisina buyuk benzerlikler gosteriyor: Baslik + 3 sutun + Sayfa Alti. Ozellikle: sayfanin ust kismini kaplayan Baslik, menunun bulundugu Sol Sutun, icerigin bulundugu Ana Sutun, ekstra icerigi kapsiyan Sag Sutun, ve butun bunlarin altinda yer alan ve sayfanin alt kismini boydan boya kaplayan Sayfa Alti. Uc sutun tasarımini tasimayan diger siteler ise genellikle 2 sutun variyasyonunda, Kenar Sutunu ki sag ya da solda yer alabilir ve bir de Ana Sutundan olusuyor:

Microsoft websitesindeki uc sutunluk yapiyi gosteren resimle birlikte diger iki resim geleneksel 2 sutunluk yapiyi gosteriyor.

3. Neden

Cunku, Microsoft websitesi, CSS’i nerdeyse, yanlizca yazitipini (font) ve renkleri belirlemek icin kullaniyor. Ben, CSS kavramini yazilim uygulamalari ortami icinde icat eden bir sirketin, CSS’i font tipi ve renkleri belirlemenin otesinde kullanmasini gerektigine inaniyorum.

4. Neden

Cunku, Microsoft, değişik browserlar icin değişik sayfa versiyonlari gosterdigi icin. Windows isletim sistemi Internet Explorer (v5.5 ve yukarisi) icin bir versiyon, diger browserlar (Mac Internet Explorer IE/Mac de dahil olmak uzere) icin ise "basitlestirilmis" bir baska versiyon. "Basitlestirilmis" ikinci versiyon, birinci versiyon icinde kullanilan bazi fonksiyonlarini kullanmazken, sayfa icinde yer alan bircok elementleri gostermek icin tamamen değişik teknikler uyguluyor. Asagida, iki değişik versiyonun farkini gosteren resimleri inceleyebilirsiniz. Soldaki resim IE/Win 5.5 ya da yukari browserlar icin yapilmis birinci versiyon ve sagdaki ise diger browserlar icin yapilmis ikinci versiyon. Farkliliklar, kirmizi halkalar ile isaretlenmistir:

Soldaki resim IE/Win 5.5 ya da yukari browserlar icin yapilmis birinci versiyon ve sagdaki ise diger browserlar icin yapilmis ikinci versiyon. Farkliliklar, kirmizi halkalar ile isaretlenmistir

Ikinci versiyon, birinci versiyon olan IE/Win versiyonuna oranla biraz daha basit gorunuyor ve biz biliyoruz ki bunun boyle olmasi icin hicbir neden yok. Microsoft birinci ve ikinci versiyon farkini, sayfalarina bilerek koydugu browser versiyon kesfeden bir JavaScript ile sagliyor. Bunun yerine, Microsoft kolay bir sekilde tek versiyon ile butun browserlara hizmet edebilirdi.

En azinda, Microsoft, sunucularinda bulunan bu iki versiyon ile IE/Win ve diger browserlara hizmet veriyor. Bazi sirketler, bunu bile yapmaktan acizler ve bunun bedeni soruldugunda ise verdikleri cevap, HERKESIN populer olan IE/Win browser kullandigi, diger browserlarda calisacak bir sayfanin yapilmasinin UZUN ZAMAN alacagi. Diger bir neden ise ikinci versiyon ile IE/Win olmayan diger browserlara hizmet verecek bir versiyonun yaratilmasinin COK PAHALI olacagi inanci. Sunu soylemek isterim ki, UZUN ZAMAN ve COK PAHALI nedenleri tamamen yanlis.

Bircok web uzmani, yukarida soylenen gercek disi cevaplara inaniyorlar cunku bu uzmanlar, projelerine, IE icin basliyor ve proje sonuclarini IE browser ile test ediyor. Daha sonra projelerine diger browserlar ile bakinca gordukleri yanlisliklarla husrana ugruyor ve bunlari tamir etmeleri gerektigini dusun



Top
Menu