KODSİSTEMİ - Tasarım ortaklığı

Tasarım ortaklığı

Yaptığımız tasarımların tüm tarayıcılarda aynı görünmesi için

Tasarımlarla kodlarla boğuşup duruyoruz. Ancak bir tarayıcıda çok iyi görünen sitemiz diğerinde bir tuhaf oluyorsa bazı ölçülere uymamız gerekiyor. Bu sorun bizden değil tarayıcıların ortak özellikli olmamasından kaynaklanıyor.

O halde biz de elimizden geldiğince sitemizin tüm tarayıcılarda aynı şekilde görünmesini sağlamak için uğraşacağız.

Benim de en çok uğraştığım işlerden birisi bu. Farkında olmadan kullandığımız bir kod siteyi allak bullak ediyor. Vee tabii insanı sinir eden bu durumu farkettiğimizde kodu nerede kullandığımızı da bulamıyoruz. Neyse gelelim konuya.

A-GENİŞLİK

Bir site tasarlarken tüm çözünürlüklerde (1024x768, 800x600 vs.) aynı görüntü elde edilmelidir. Sitenin altına "en iyi 1024x768 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 1024x768'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 800x600'lük ekranları da dahil etmek istiyorsanız 760px uygun olacaktır.

Tarayıcı Uyumluluğu

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.

Düz Metin

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

Yazı (Font) Büyüklüğü ve Satır Aralığı

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.

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%

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%

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.

Düz Metin

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

İçeriklerin Tasarımlara Uyumu

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.