Makalenin başlığında “tasarımda evrensellik” derken, yapmış olduğunuz bir tasarımın tüm işletim sistemlerinde, tarayıcılarda ve ekran çözünürlüklerinde mümkün olduğunca aynı görünmesini kastediyorum. Sayılar ise bizim tasarımda evrensellik yolundaki en önemli aracımızdır.

Bir site tasarlarken tüm çözünürlüklerde (1024×768, 800×600 vs.) aynı görüntü elde edilmelidir. Sitenin altına “en iyi 1024×768 ile görüntülenir” yazmak çözüm değildir. Şunu unutmamak gerekir ki bir çok farklı tarayıcı, işletim sistemi ve çözünürlük ölçüsü mevcuttur. Tasarımcılara düşen görevse siteye gelen ziyaretçilere en uygun ve standart görünümü sunmaktır. Peki bu durumda şablon boyutları nasıl olmalıdır? Bunun için genişlik ve yükseklik kıstaslarından yüksekliği ikinci plana alabiliriz çünkü sitelerin aşağı doğru ilerlemesi olağan bir durumdur (kimi dergi siteleri hariç). Genişlik olarak da şunlar söylenebilir:

1. Şuanda en çok kullandığım ve karşılaştığım site genişliği 960px‘dir. Günümüz ekran boyutları artık büyük oranda 1024×768′den başladığı için bu genişlik ekranı kaplama açısından hoş bir görünüm sağlar.
2. Eğer 960px size fazla geliyorsa ve bununla birlikte işin içine 800×600′lük ekranları da dahil etmek istiyorsanız 760px uygun olacaktır.

Günümüzde hala standartlara karşı direniş gösteren ve javascript kodlarını kullanarak belirli bir tarayıcı dışındaki tarayıcılarda sitenin, “Bu siteyi … tarayıcı ile açın” uyarısını verdikten sonra kapanmasını sağlayan kişiler bulunmakta. Fakat artık kalite çok yükseldi. Erişebilirlik, evrensellik diyoruz. Böyle ucuz metotlarla kullanıcıları kaçırmamalıyız. Bunun yerine biraz daha okuyup tarayıcılar arasındaki css farklarını nasıl giderebileceğimizi düşünmeliyiz.

En önemli farklar margin ve padding farklarıdır. Örneğin Firefox “form” etiketine margin ve padding koymazken İnternet Explorer’ın 6 sürümünde üstten ve alttan 10′ar piksellik boşluklar (padding cinsinden) bulunmaktadır. Bu ve bunun gibi farkları ortadan kaldırmanın birkaç yolu var. En çok bilineni ise css dosyanızın başında belirteceğiniz genel bir sıfırlamadır. Şöyle bir kod ile tüm seçicilerin ve etiketlerin özelliklerini sıfırlayabilirsiniz.

*, html, body {
	margin: 0;
	padding: 0;
}

Yazı büyüklüğü ve satır aralığı en çok dikkat etmeniz gereken konulardan birisidir. Tasarımınız ne kadar güzel olursa olsun yazılarınız okunamayacak kadar küçükse veya satırlar birbirine girmişse tasarımınızın hiçbir anlamı kalmaz. Genel olarak kabul gören yazı büyüklüğü 12px veya buna karşılık gelen 0.75em (veya 0.8em)‘dir. Satır aralığı ise 16px veya karşılığı 1em‘dir. px, em ve pt arasındaki oran farkını merak ediyorsanız Reedesign‘dan almış olduğum şu tablodan faydalanabilirsiniz.

Punto	Piksel	Em	Yüzde
6pt	8px	0.5em	50%
7pt	9px	0.55em	55%
7.5pt	10px	0.625em	62.5%
8pt	11px	0.7em	70%
9pt	12px	0.75em	75%
10pt	13px	0.8em	80%
10.5pt	14px	0.875em	87.5%
11pt	15px	0.95em	95%
12pt	16px	1em	100%
13pt	17px	1.05em	105%
13.5pt	18px	1.125em	112.5%
14pt	19px	1.2em	120%
14.5pt	20px	1.25em	125%
15pt	21px	1.3em	130%
16pt	22px	1.4em	140%
17pt	23px	1.45em	145%
18pt	24px	1.5em	150%
20pt	26px	1.6em	160%
22pt	29px	1.8em	180%
24pt	32px	2em	200%
26pt	35px	2.2em	220%
27pt	36px	2.25em	225%
28pt	37px	2.3em	230%
29pt	38px	2.35em	235%
30pt	40px	2.45em	245%
32pt	42px	2.55em	255%
34pt	45px	2.75em	275%
36pt	48px	3em	300%

Dilerseniz bu tablo yerine şuradaki Em hesaplayıcıyı kullanabilirsiniz.

Not olarak şöyle bir ipucu vereyim. Owen Briggs metodu şunu diyor: Tarayıcıların standart 12 piksellik büyüklüğü aslında yazı için uygun değildir. Uygun hale gelmesi için de yazı büyüklüklerini şu kod ile düşürmek gerekir. font-size:76%; Bu kodu genel sıfırlayıcı içine yazabilirsiniz. Bende her zaman bunu kullanmaktan yanayım.

*, html, body {
margin: 0;
padding: 0;
font-size:76%;
}

Siteyi tasarladınız, yayına başladınız ve sıra geldi içeriğinize. İçerik olarak resim, yazı veya bağlantı kullanabilirsiniz. Hepsinde aslında mantık aynı; içeriğin yayınlanacağı css seçicisinin genişliğini ve yüksekliği bilinmelidir. Bir örnekle konuyu daha net anlatmaya çalışayım. Mesela iki sütundan oluşan bir blogunuz var. Yazınızı yazarken bir de resimle yazını süslemek istediniz. Resminizin genişliği 500px ve yazı alanınızın genişliği 480px diyelim. Yani resminiz yazı alanınızın genişliğinden fazla. Yazınız bittikten sonra yayına aldığınızı varsayıyorum. Firefox’ta her şey güzel görünürken İnternet Explorer açtığınızda bir de bakmışsınız ki sitenin sağ tarafı (yanmenü, sidebar) aşağı kaymış. Bu çok karşılaşılan problemin sebebi koymuş olduğunuz resmin olması gerekenden (480px) büyük olmasıdır (500px). Firefox’ta seçiciler alt alta girebildiği için kayma olmazken İnternet Explorer’da sitenin dağıldığını görürsünüz.

Toparlamak gerekirse sitenizin seçicilerinin genişlik ölçüleri hep aklınızda bulunsun ve bir değişiklik yaparken, yazı veya resim eklerken mutlaka bu sayıları düşünün.

Bu makalede tasarımlarda sayıların önemini vurgulamaya çalıştım. Yukarıda belirttiğim örnekler gibi tasarımda sayıların kullanıldığı örnekler aklınıza gelirse lütfen yorumlarınızda belirtin. Tabii hatam varsa onları da duymaktan zevk alırım. Yorumlar sonucunda makaleyi güncelleyebilir ve daha sağlıklı bilgiler verebiliriz. Ne demişler? Akıl akıldan üstündür…

Benzer Yazılar

• Tasarımda IE7 ve IE8 Çözümü
• Css’in Temeli “Kutu Modeli”
• The Basic Concept Of Css, “Box Model”
• CSS / XHTML’in Olmazsa Olmazları
• Tarayıcı Uyumluluğu İçin CSS Sıfırlama