Web tasarımı rehberinin 3. bölümünde favicon yaratma, kodunuzun farklı platform ve tarayıcılarında görünümü, ve boyutlandırma gibi birkaç önemli konudan bahsediyorum. Öncelikle serinin 1. ve 2. bölümlerini okumanızı tavsiye ederim.

Favicon’unuz olsun!

Destekleyen tarayıcılarda sitenize girildiğinde adres çubuğunun başında, siteniz bookmark’lara eklendiğinde ve sekmelerde sıkça karşılaşıyoruz faviconlarla. Bu 16×16 veya 32×32′lik minik bir .ico dosyasının kısa bir kodla sitenizin header bölümünde belirtmeniz sayesinde kolayca hazırlanabilir.

Icon dosyası hazırlarken yapılacak en büyük hata google’a “icon file make” gibi anahtar kelimeler yazmak sanırım. Çünkü asla işinizi görecek, ücretsiz, sizi sinir etmeyen bir program bulamıyorsunuz. Bu sorunu şu şekilde aşıyoruz: sitenizin logosunu, boyutları kare olacak şekilde kaydediyorsunuz (isterseniz gif veya png’nin transparency özelliğinden yararlanabilirsiniz) ve aşağıdaki sitelerin birinden favicon’unuzu otomatik oluşturuyorsunuz. Bu kadar basit Siteler şunlar:

• FavIcon from Pics
• FavIcon Generator

Not: Bazı sitelerde “animated favicon” tarzı kodlar gördüm, mantığı javascript kullanarak belli zaman aralıklarında shortcut icon etiketinin değiştirilmesine dayanıyor. Böyle bir kod kullanmanızı hiç mi hiç tavsiye etmem! Kullanmaya niyetiniz varsa da sayfanıza bir midi müzik koyun, sağa sola kayan yazılar ekleyin, kafasını sürekli sallayan birkaç tane maymun koyun ki tam olsun!..

Tüm Platformlara ve Tarayıcılara Uygun Kod Kullanın

Aslında genelde sorun yazdığınız kodda değil. Farklı tarayıcıların, aslında standartları W3C tarafından gayet net belirlenmiş etiketleri kendilerine göre yorumlaması, bazı etiketlerin öntanımlı değişkenlerinin farklı olması, ve bazı ölçü sorunları tasarımcıları yıllardır zora sokuyor. Bu sorunların ne olduğu ve nasıl çözüleceği hakkında detaylı bir yazabilir ama anlatmak istediğim şu; daha tasarım aşamasındayken sitenizin şu şartlarda benzer izlendiğinden emin olun:

• Windows’ta IE / 6.0 ve 7.0 sürümleri
• Windows’ta Firefox / 1.5, 2.0 ve 3.0 sürümleri
• Linux’ta Firefox
• MacOSX’te Safari (mümkünse)
• Windows’ta Opera

Çoğu Site’de ziyaretçilerin kullandığı tarayıcılar ve platformları şöyle dağılmış:

Bu sıralama kabaca sitenize girecek ziyaretçi sayısının platform ve tarayıcı tercihini yansıtıyor. Diğer platformları ve tarayıcıları ilk aşamada düşünmeyebilirsiniz, ama aslında lynx kullanan bir ziyaretçinizi bile düşünmeniz gerekiyor. Prensip olarak hatalı gösterimden 1 ziyaretçiyi bile kaybetmemeniz gerekir.

Bazen ekran çözünürlüğünü de hesaba katmanız gerekebilir. Çoğu Siteye’ye giren ziyaretçilerin grafiğine baktığımızda şöyle bir sonuç çıkıyor:

Gördüğünüz gibi artık 800×600 çözünürlük kullanan kişi sayısı 50′de 1. Göz ardı edilebilir mi? Bence hayır. Yerinizde olsam çözünürlüğümü 800×600′e getirip resimlerin, bölümlerin kayıp kaymadığını kontrol ederim. Tabii ki yatay kaydırma çubuklarının görünmesi kaçınılmaz, belki soldan 800 pikselin sayfayı neresinden kestiğine dikkat edebilirsiniz, ayrıntılar fark yaratır

Sorunsuz Boyutlanabilir Ölçüler Belirleyin

En sık yapılan hatalardan biri, ki önce bir düşünmek lazım acaba microsoft’un hatası mı diye, boyutları px cinsinden belirlenmiş yazıların Internet Explorer’da boyutlanamama sorunu. Bu sorun hakkında yapılabilecek en iyi şey en genel font-size‘ı (mesela body içindeki) % şeklinde tanımlayıp, diğer büyüklükleri em cinsinden yazmak olacaktır. Örnek olarak:

Bu yazıyı paylaşın :)