CSS'in 5 nimeti

Bu ne be bloğunda ara sıra yazdığım CSS ile ilgili yazılar, şu soruya maruz bıraktı beni: "CSS ne?" CSS'in ne olduğu Vikipedi'de yazıyor. Ben CSS kullanmanın faydaları nedir, ondan kısaca bahsedeyim:

1. Tasarım ve içerik birbirinden ayrılıyor: Tablolar kullanılarak yapılan sayfalarda, tek bir HTML kod vardır ve tüm içerik ve sayfa tasarımı bu kod ile belirlenir. Halbuki, CSS kullanılarak bu HTML'in içindeki tasarımı belirleyen kod ayrılabilir. Bu ayrılan kısım yine sayfanın içinde ama ayrı bir bölüme de konabilir, .css dosyası olarak ayrıca da kaydedilebilir. Örneğin sayfanın bir kısmı "başlık" olarak adlandırılırsa, "başlık" olarak tanımlanan yerleri şöyle göster, böyle şekillendir demek yeterlidir .css dosyasında.

2. Site daha hızlı yüklenir, daha kolay yönetilir: Bir CSS dosyası yaratıldıktan sonra pek çok sayfa onu kullanabilir. Genelde bir sitenin menüsü CSS ile biçimlendirilir, ve tüm sayfalarda sadece ilgili CSS dosyasına bağlantı verilir. Menüde birşeyler değişecekse, sadece CSS dosyasının güncellenmesi ile sitedeki tüm sayfalarda menü güncellenmiş olur. Bir kere siteye giren bir ziyaretçi, sitenin CSS dosyasını yükledikten sonra, yeni sayfalara geçtikçe çok daha hızlı yüklenir sayfalar, çünkü yeni sayfalar için sadece içerik yüklenir, biçimlendirme zaten yüklenmiştir.

3. Site tüm tarayıcılar ile uyumlu hale gelir: Eskiden çoğu kullanıcı İnternet Explorer kullanıdığı için, Microsoft kafasına göre değişiklikler yaparak W3C'nin standartlarını saptırmıştı. Ancak Firefox ve Opera gibi standartlara saygılı tarayıcıların hızlı yükselişi, sitelerin farklı kişilerce farklı görülmesine sebep oldu. CSS sayesinde, ziyaretçilerin hangi tarayıcıyı kullandığını algılayıp ona göre ufak farklılıklarla suna biliyorsunuz siteyi.

4. Arama motorları siteyi daha iyi görür: İçerik ve tasarım birbirinden ayrıldığı için, eskiden kodun içindeki tasarımı görmezden gelerek okumaya çalışan arama motorları (böcekler), artık temizlenen HTML içinde çok daha net olarak içeriği gördükleri için, daha iyi değerlendirebilir siteyi. Bu da aramalarda daha yukarıda çıkmak olarak düşünülebilir.

5. Farklı ortamlar için farklı sunumlar oluşturulabilir: Artık sadece bilgisayarlar değil, cep telefonları da İnternet'e giriyor, PDA'ler de. Onlar için farklı, daha uyumlu bir tasarım hazırlanabilir. Ya da yazıcılar için; birisi siteyi basmak istediğinde, ayrı bir .css dosyası kullanılarak, baskı için daha uygun bir tasarım belirlenebilir.

Web sitesi tasarlarken

Bir web sitesi tasarlarken, yapmanız ve yapmamanız gereken 15 şey:

1. Ziyaretçilerin tarayıcı pencerelerini SAKIN yeniden boyutlandırmayın
Evet yapabiliyorsunuz, ama yapmayın. Bundan hoşlanan fazla kişi yoktur. Zaten Firefox ve Opera kullanıcılarının sayfalarını muhtemelen yeniden boyutlandıramazsınız.

2. Ziyaretçileri bekletmeyin, özellikle ana sayfada
İnsanların bir site hakkındaki kararlarını ilk on saniye içinde verdikleri söylenir. Bir de 5 saniyede açılmayan bir sayfayı büyük ihtimalle beklemeyip kapattıkları. O yüzden, sitenizdeki sayfaları çok büyük yapmayın ve özellikle ana sayfada ağır flash, javascript veya appletler kullanmayın.

3. Sitenizi HTML ve Flash, genişbant ve dial-up versiyonları olarak yapmayın
İnsanlara giriş sayfasında hangi vesiyonu görmek istiyorsunuz demek, giriş sayfanızı boşa harcamak demektir. Tercihi kendiniz yapın ve ziyaretçileri gerçek bir girişsayfası ile karşılayın. Bu, ileride siteyi güncellerken iki kat kaynak harcamanızı da önlemiş olur.

4. Siteniz sadece Flash ise, kapatın
Eğer bir ajansa yaptırdıysanız onu kovun, eğer kendiniz yaptıysanız, portfolyonuzdaki "deneysel, kullanışsız web projelerim" arasına koyun. Flash çok güzel bir alettir, bazı yerlerde çok işe yarar, ama tüm site Flashla yapılırsa, bunu ne Google, ne de kullanıcılar sever.

5. Webde yön bulmayı tekrar icat etmeye çalışmayın
Navigasyon çubuğunu (menüyü) en üste, sol tarafa hatta sağa bile koyabilirsiniz. Site haritası hazırlayın. Alt menüler kullanın. Farklı bir şeyler yapmaya çalışmayın, çünkü insanlar alışık oldukları şekilde söfr yaparken daha rahat hissederler. Onları rahatsız ederseniz, sizi sevmezler.

6. Sitenizde yazı yoksa işiniz zor
Web için bir laf vardır: "İçerik Kraldır!". Buradaki içerik, şirin ve çekici resimler hele hele resim formatında yazılar değil, bildiğimiz yazıdır. İstediğiniz kadar iyi bir tasarımınız olsun, eğer amaca yönelik gerçek bir yazı içeriğiniz yoksa, arama motorları sizi bulamaz.

7. Siteniz Firefox'ta çalışmıyorsa, değiştirin
2007 yılının başında kullanıcıların %10-15'i Firefox kullanıyordu, ve bu oran giderek artıyor. Hatta bazı web sitelerinin kullanıcılarının büyük bir kısmı Firefox kullanıyor. Ne olursa olsun, artık sadece bir web tarayıcı için yapılan siteler "çağ dışı". İnternet Explorer dışında, Mozilla Firefox ve Safari'de de çalışması gerekiyor gerçek bir sitenin.

8. Sitenizde müzik olmasın
Eğer olacaksa, ziyaretçilerin isteğiyle açılıp kapanabilsin. Kalitesiz bir şey olacaksa, hiç olmasın. Telif haklarına uygun değilse, siz bilirsiniz ama uğraşmak istemezsiniz.

9. Menüyü resim değil, yazı şeklinde yapın
Üzerinde gidince rengi değişen bir düğme istiyorsanız, bunu CSS kullanarak, yazı ile de yapabilirsiniz. Siteye gereksiz yük de binmemiş olur. Hem resim kullanmayınca, güncellemeler neredeyse anında yapılabilir.

10. Menüyü sade ve anlaşılır tutun
Tüm içeriği menüden ulaşılabilir yapmak iyi bir fikir değildir. Gerekiyorsa, alt-başlıklar için ayrı sayfalar hazırlayın. Kafası karışan ve yönünü kaybeden bir ziyaretçi, muhtemelen siteyi çok gezmeden terk eder. İnsanlara hangi sayfada, siteninin neresinde olduklarını bir şekilde gösterin.

11. Site içi aramaya güvenmeyin
Arama motorlarının iyi olmadıklarını söylemiyorum; siteniz büyükse mutlaka arama imkanı olsun. Ama bu aramaya gerek kalmayacak şekilde kullanışlı bir site haritası ve anlaşılır bir menü şart.

12. Alan adınızı düzgün seçin
O kadar uğraşıp yaptığınız sitenizi, 10 YTL'nize kıyamadığınız için, gidip ücretsiz bir siteye koymayın. Düzgün bir alan adı kullanırsanız, hem saygınlığınız, hem de Google PageRank'iniz daha yüksek olur. Mümkünse, alt-alan adlarını da kullanın. (blog.denisutku.com gibi)

13. Sitenin amacını açıkça belirtin
Giriş sayfasında sitenin ne amaca hizmet ettiğini, ziyaretçilerden ne beklediğiniz açıkça yazın. Bu, hem ziyaretçilere zaman kazandırır, hem de sitenin amacına ulaşmasını kolaylaştırır. Gizli mesajlar vermeyin, insanların kafalarını karıştırmayın.

14. Vidyoları, gömülü olarak yayımlayın
İnternetin hızlanması ile vidyolar da moda oldu. Çoğu sitede vidyo da içeriğin bir parçası haline geldi. Burada dikkat edilmesi gereken; vidyoyu sayfanın bir parçası gibi sunmak ve ziyaretçilerden bir hız veya format seçmelerini istememek. YouTube, Metacafe gibi bu işi ücretsiz olarak yapan profesyonel hizmetler varken, kendimizi rezil etmeye gerek yok.

15. Yeni teknolojileri gereksiz yere kullanmayın
Hızla gelişen web programlamacılığı bizi etkiliyor olabilir. Yine de, teknik olarak mümkün diye, bu yeni teknolojileri sitemizde gereksiz yerlerde kullanmamalıyız. Daha önce bu, Flash ve Java Applet ile olmuştu, şimdi de AJAX ile oluyor. Sırf bulunsun diye bir şey koymayın siteye.

SON. Ufak tefek can sıkıcı şeylerden kaçının

Yanıp sönen yazılar olmasın, Frontpage'de yapılmış gibi durmasın, pop-up olmasın, kayan yazı olmasın, nereye bağlantı verdiği belli olmayan resimler olmasın, imla hataları kesinlikle olmasın, tamamı büyük harflerle yazılmış kelimeler olmasın, ...

Bu yazıyı, digg'de görüp, bir şekilde cache'ine ulaştığım josiahcole.com sitesinden çevirdim.

2006'ınn en güzel CSS'li siteleri

2006'nın en güzel 50 css sitesi smashing magazine, 2006'nın css kullanılarak yapılan en beğenilen 50 sitesini listelemiş. (hepsinin resmi de var listede)