Erhan Yakut Software Developer @Binalyze | Founder @Passwall | Golang Enthusiast | Open Sorcerer

Tasarımda Evrensellik ve Sayılar

3 min read

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.

Şablonun Genişliği

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.

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.
[php]*, html, body {
margin: 0;
padding: 0;
}[/php]

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. 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.
[php]*, html, body {
margin: 0;
padding: 0;
font-size:76%;
}[/php]

İç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.

Sonuç

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…

Erhan Yakut Software Developer @Binalyze | Founder @Passwall | Golang Enthusiast | Open Sorcerer