Web Tasarımı Rehberi #3
16 Nisan 2006 tarihli, Tasarım köşesine ait yazı.
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 (bkz. AçıkBilgi). 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.
<link rel=”shortcut icon” xhref=”favicon.ico” mce_href=”favicon.ico” />
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:
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.0.7 ve 1.5 sürümleri
- Linux’ta Firefox
- MacOSX’te Safari (mümkünse)
- Windows’ta Opera
AçıkBilgi’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. AçıkBilgi’ye giren ziyaretçilerin grafiğine baktığımda şö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:
body {
font-size: 80%;
}
h1 {
font-size: 2em;
}
p {
font-size: 1em;
}
Hem metinlerin hem de resimlerin boyutlandırılması konusunda A List Apart sitesinden Elastic Design yazısını okumanızı tavsiye ederim. Vakti zamanında da cemshid Yeniden Boyutlanabilir Logolar yazısı yazmıştı, aklıma geldi, yazmadan geçmeyim dedim.
Yorumlar - Başa Dön
17 Nisan 2006
Onur bey öncelikle bu güzel yazı dizisi için size çok teşekkür ediyorum…
(Favicon kullanımı konusunun sonunda verdiğiniz örnek gerçekten çok hoşuma gitti. Bu tarz insanlar hala nette ve kendilerine “webmaster” yakıştırması yapabiliyorlar.)
Web tasarımına yeni başlayan insanları W3 standartları ile tanıştırmak, aslında standartların korkulacak birşey olmadığını göstermek adına böyle makalelerin fazlalaşması gerektiğini düşünüyorum. Keşke vakti zamanında bana da standartları bu denli akıcı ve güzel anlatan bir (Türkçe) site olsaydı da yaptığım sitelerin tasarımında bu konulara da dikkat etseydim.
Ama hala iş işten geçmiş sayılmaz, standartlara tam adapte olamasam da elimden geldiğince bağlı kalmaya çalışıyorum. yazmıyorum mesela :)
şaka bir yana tekrar tebrik ediyorum sizi bu güzel yazı dizisinden dolayı…
17 Nisan 2006
Biz de yaptık zamanında böyle siteler Volkan bey, ama hiç müzik koymadım :) Yurtdışında standartlara önem veren ve sürekli kaliteli makaleler yayınlayan site sayısı çok fazla (örnek olarak yukarıda verdiğim A List Apart), ama ülkemizde bu bilinç fazla oluşmuş değil. Dediğiniz gibi, Türkçe kaynakları çoğaltmamız gerekiyor, ben de bunun için uğraşıyorum :) Yorumunuz için teşekkürler, bu arada siteniz hayırlı olsun, belki gelecek ay tanıtırım…
17 Nisan 2006
Şu bahsettiğiniz’animated favicon’ konusunda yanlışınız var sanırım. Örneğin www.elixirgraphics.com sitesinde sizinde bahsettiğiniz gibi bir animasyonlu favicon mevcut. Ama sitenin kaynak koduna baktığımda animasyonu sağlayan herhangi bir javascript kodu göremedim yanlız şunun gibi bir kod bulunuyordu sitede:
”
Yani bir tane hareketli .gif iconu oluşturulmuş ve yukardaki kod ile de sayfaya entegre edilmiş sanırım olay bu şekilde. :)
17 Nisan 2006
Pardon kodumuz şu şekilde olacaktı bir önceki yorumda html olarak girdiğim için göstermedi:
link rel=”icon” href=”animated_favicon1.gif” type=”image/gif”
17 Nisan 2006
Fatih bey, örnek verdiğiniz siteye, tasarımına, görünümüne lafım yok, favicon’larını animated yapsalar da yakışır :) Bildiğiniz gibi animated ikonlar IE ve Safari gibi tarayıcılarda çalışmıyor. Bunu çözmek için de birileri “hadi javascript kullanarak değiştirelim, animasyon gibi olsun” demişler. Haberi burda. Bahsettiğim buydu.
Firefox’un animated ikonları desteklemesi konusu da burada tartışılmış. Zaten şöyle bir örneklere baktığınızda çoğunun ne kadar ilgi dağıttığı aşikâr.
17 Nisan 2006
@Onur, siteme bulunduğunuz ithaf için teşekkür ederim ama burada tanıtılacak kadar ileri düzey bir site olmadığı ortada. elimden geldiğince web tasarım ve programlama ile ilgili kaynak yazılar eklemeye çalışıyorum. düşünceniz bile yeterli. (Sağolun)
@Fthtrn, öncelikle favicon konusunda size katılmıyorum. favicon standartlar içinde yer alan bir konu ama sadece görsellik adına hareketlendirilmesi biraz garibime gidiyor. (yanlış anlamayın lütfen lafım size değil) bununla birlikte ie veya safari tarayıcı bu faviconun farkına bile varmıyor. o zaman birçok güzide site ikonları hareketli yaparak bizlere örnek olurdu ama daha hiçbirinde hareketli favicon görmedim. ayrıca hareketli favicon oluştururken kullanılan kodlar temelinde w3 standartlarına uygun olur mu orasını da kestiremiyorum.
Çok Teşekkürler…
19 Nisan 2006
Hmm anlaşıldı arkadaşlar haklısınız. :) Sanırım diğer browserları gözardı etmişim. Zaten web geliştiricilerin en büyük sıkıntısı bu tür uyumsuzluk olsa gerek. Bir browserda çalışan diğerinde çalışmıyor bunun içinde geliştirici fazladan uğraşmak zorunda kalıyor.
24 Mayıs 2006
sitenizzi beyendim ama neden bu kadar hitinin düşük olduğu hakkında biraz takıldım. sanırım tanıtım kısmına biraz eğlmelisiniz.
9 Şubat 2007
Ya yaptıgım sayfalar ie de sorunsuz çalışmasına ragmen firefoxda saçma sapan görünüyor nasıl düzelticem bunu ya meta ile olmuyor yardım edin lütfen
4 Mart 2007
Birsey soracagim favicon la ilgili? mesela bazi sitelerdeki favicon lar, siteye girer girmez, yani sık kullanılanlara eklemeden cıkıyor. Bunu nasıl yapıyorlar?? ornek vermek gerekirse http://www.artofadambetts.com/weblog/
Bu arada sitenizde verdiginiz bilgiler icin cok tesekkurler…
4 Mart 2007
@Murat
Adam Betts özel bir kod mu çalıştırıyor bilmiyorum ama ben sitelere girdiğimde favicon’u görebiliyorum. Belki IE’nin eski bir sürümünü kullandığınız için olabilir, buyrun firefox‘u deneyin, faviconları anında gösterir :)