Osman S Börütecene

alemlerin aslı hayaldir

Güncel: Ana Sayfa

Önceki yazı: En Çok Kullandığım Yazılımlar

Sonraki Yazı: Google’dan Altı Anasayfa Teması

Web İçin Görsel Tasarım Yaparken Gözden Kaçanlar

18 Mart 2007 Pazar 13:14, Osman Seyit Börütecene

Her gün onlarca yeni site geziyorum. Dikkatimi çeken bir çok ortak hata var. Bunları derleyip toplamak istedim. Eski moda tablolu ve font tag’li tasarımlardan hiç bahsetmeyeceğim. Eleştiri konusu olanlar genellikle XHTML + CSS ile hazırlanmış web siteleri. Diğerleri problemli olmadığından değil, onları kaale almadığımdan yazıya eklemiyorum.

En büyük sorun “fixed-width” ve “fixed-height” yani sabit en ve sabit boy olarak tasarlanmış div (kutu, box) bloklarında. Mesele, ziyaretçinin kullandığı bilgisayarın, tarayıcının font büyüklüklerini hesaba katmamak, bu büyüklüğün önden kontrol edilebileceğini zannetmek. Bir kere sabit büyüklükteki fontları ziyaretçinin değiştirememesi eşşekliği sadece Internet Explorer’da var. Bunun dışındaki browserlar’da ziyaretçi font büyüklüğünü değiştirebiliyor. Evet yanlış duymadınız. Mesela siz bir paragrafın font büyüklüğünü 14px olarak belirleyin, Firefox’ta ben onu 16px olarak değişitirip web sitenizdeki yazıları öyle okumayı tercih edebiliyorum. Bunu özel bir yöntemle yapmıyorum. Aynen Internet Explorer’da olduğu gibi menüden metin boyutunu artırıyorum. Bu nedenle, blok seviyesindeki kutularımızı hazırlarken onlara sabit boy vermemeliyiz. Bu konuda sorun yaratabilecek tek şey font büyüklüğü de değil. Her font aynı punto ya da pixel ya da em değerinde aynı büyüklükte görünmez. Diyelim ki font ailesini, tipini belirlemediniz ya da sizin belirlediğiniz font ailesi ya da tipi ziyaretçinin bilgisayarında yüklü değil (Apple ve Linux kullanıcılarının en çok başına gelen şey). O zaman font büyüklüğünü kafanızda canlandıramazsınız bile. Bu durumda tasarımınız içindeki yazı, sağa ya da sola kaymasa bile yukarı ya da aşağıya doğru beklentinizden uzun ya da kısa olacaktır. Her durumda, sizin belirlemediğiniz görsel bir açık, tasarımınızı çirkinleştirir.

Bir başka sorun (bununla ben karşılaşmıyorum, internet explorer kullanıcısı değilim, Allah muhafaza), 2007 yılında bile web standartlarına uyum göstermeyi beceremeyen internet explorer adlı tarayıcıyı kullanan ziyaretçileri düşünmeden ie’nin css ve div leri beceremediği yerlerde bunları kullanmayı sürdürmek. Tabi bu söylediğim genelde hedef kitlesi çok geniş olan web sitelerinin dikkat etmesi gereken bir şey. Her site internet explorer’ın hataları ile uğraşmak zorunda değil. Ben ticari işlerde mecburen Internet Explorer hatalarıyla boğuşuyorum ve hayvanı terbiye ediyorum ama yarın öbürgün bir başka kişisel site açsam internet explorer hakkında bir uyarı koymaktan öteye gitmem.

Web tasarımıyla ilgili görsel sorunların neredeyse tümü, dinamik olmayan ortamlar için görsel tasarım yapmaya alışmaktan kaynaklanıyor. Gazetecilik mesleğine bulaşmış olanlar bilir, gazetelerin tasarımları sabaha karşı baskıya girene dek bir kaç kez değişir. Baskıya girdikten sonra tasarım artık değişmez. Çünkü ertesi gün gazeteyi satın alan okurlar font büyüklüğünü değiştirmezler ya da haberlerin sonuna yorum ekleyerek sayfa uzunluğunu değiştiremezler. Ama web öyle değil. Özellikle web gibi dinamik bir ortama görsel tasarım üretiyorsanız bazı boyutların sizin elinizde olmadığını, son derece oynak olacaklarını bilerek bu işe soyunmanız gerek.

Eğer aylarca değişmeyecek bir yazı ve bir kaç resim için tasarım yapıyorsanız o zaman iş değişir. Ama bununla karşılaşabileceğimiz örnekler günümüzde bir elin parmaklarını geçmez. Geri kalan tüm tasarımlarda, kullandığımız sütun boyunun hep değişken olacağını, kullandığımız font büyüklüğünün bizim hayallerimizin ötesine geçeceğini, değişik cihazlardan sayfaları ziyaret eden kişilerin aklınıza gelmeyecek zoom (hem yakınlaştırma hem uzaklaştırma) özellikleri kullanabileceğini aklınızda tutmalısınız.

Böylece, her yerde aynı biçimde görüntülenen (yani imkansız olan) bir web sayfası tasarımınız olmaz ama her yerde keyifle görüntülenen, ustalıkla çözümlenmiş bir sayfa tasarımınız olur.

'Web İçin Görsel Tasarım Yaparken Gözden Kaçanlar' başlıklı yazıya 17 yorum yapılmış.

Mücahit diyor ki:
18 Mart 2007 23:04
Yazını okuyunca bazı şeyleri farkında olmadan yaptığımı, bazılarını ise daha önce farketmediğimi farkettim ilk işim yazıtipini büyütüp denemek oldu. bereket ki bir sorun çıkmadı. uyarıların için teşekkürler…
Osman Seyit Börütecene diyor ki:
19 Mart 2007 00:10
Rica ederim, faydalı olduysa ne mutlu bana.
seyit arda diyor ki:
19 Mart 2007 21:19
merhaba ;
hep özenirdik gayrimüslimler işini iyi yapıyor diye ama
türkiyede de artık nasıl olursa olsun mantığı kalkıyor heralde
titiz makelenizden dolayı sizi tebrik ederim…
banu diyor ki:
21 Mart 2007 23:52
İşin henüz başındayken uyarılar alarak başlamak güzel.
Volkan Özçelik diyor ki:
24 Mart 2007 23:09
Konuyla ilgili “Dan Cedeheron”un

“Bulletproof Web Design”

eserini öneririm.

Hem can sıkmayan eğlenceli bir dili ve mizampajı (böyle mi yazılıyordu) var.
Hem de içerik oldukça faydalı.

Yani eğlenirken öğreniyorsunuz desem yeridir.

Not: eserin Türkçe’si var mı bilmiyorum.
banu diyor ki:
30 Nisan 2007 15:25
Bir bakayım o halde ben bu kitaba. Türkçesi olsa da almam herhalde. Çeviriken devrik devrik cümleler kuruyorlar, anlamayıp sinirleniyorum ben.
Volkan Özçelik diyor ki:
1 Mayıs 2007 06:38
> Çeviriken devrik devrik cümleler kuruyorlar, anlamayıp sinirleniyorum ben

Kesinlikle katılıyorum.

Bu kitabın yanına çeşni olarak:

Zeldman: “Designing with Web Standards”
Cederholm: “Web Standards Solutions”
Budd: “CSS Mastery, Advanced Web Stndards Solutions”

ve

Heilmann: “Beginning Javascript with DOM Scripting and AJAX”

iyi gider

Afiyet olsun.
banu diyor ki:
1 Mayıs 2007 08:05
İştahım kabardı şimdi benim
Aktif Blog | Blogdan Al Haberi » Tatil, askerlik, iş bulma ve çalışma zamanı diyor ki:
3 Temmuz 2007 01:28
[…] Osman’dan yine güzel bir yazı: Web İçin Görsel Tasarım Yaparken Gözden Kaçanlar […]
alper diyor ki:
27 Temmuz 2007 03:35
güzel yazı tamam sağol kardeşte ne yapalım o zaman.14px vermeyelim mi yani.% kullanın demişsin.peki standartı ne yüzde kullanımda.MAC wine göre aynı yazıyı %25 daha küçük okuyormuş sanırım.ne yapıcaz peki?
Adem diyor ki:
16 Ağustos 2007 11:39
Biz niçin her meselede fanatik davranırız bilmiyorum. “Firefox’çular “IE’yi, “IE’ciler “Firefox’u, “Opera”cılar bilmem hangisini sanki rakipmiş gibi algılar. Tamam CSS teknolojilerine hâkimsiniz; web standardlarından haberdarsınız; ama, bu bazı gerçekleri ıskalamanıza gerekçe olamaz. Yani bir tür “ay şekerim; ben artık standardcı oldum! Firefox’tan başkasını şeetmem..” entelliğidir gidiyor. Arkadaşlar eğer bu işi yapıyorsanız ve daha yarıdan fazlasının IE kullandığı bir ortama hitap ediyorsanız, o kitleye saygısızlık etmemek gerek diye düşünüyorum. Ben burada IE’nin de diğerlerinden daha iyi olduğu durumları ya da Firefox’un insanı çileden çıkaran aptallıklarını sayabilirim. Bana göre de en iyi tarayıcı Opera. Ne olacak şimdi? Hepsinden daha hızlı, daha sorunsuz, daha işlevsel, vs. vs. Ama bu Firefox’un; mesela -web tasarımcısının- işlerini kolaylaştıran eklenti zenginliğini görmeme engel değil. Yani eğer tasarımla ilgili bir gezinti olacaksa Firefox kullanırım. Ama bunun dışında Opera’yla hiçbiri boy ölçüşemez (Opera’nın varsayılan bir sürü işlevsel özelliği Firefox’ta ancak eklentilerle yapılabiliyor). Bence IE’nin küçümsenmesinin sebeplerinden biri de tasarımcı arkadaşların işlerini iyi bilmemeleri (bundan daha çok, bu konuda kendilerini geliştirmemeleri). Ben de web tasarımı yapıyorum. Hazırladığım web siteleri her üç tarayıcıda da aynı görünüyor. IE için fazladan en fazla 2-3 satır kod yazıyorum o kadar.

Font meselesine gelince… Bence bu konuda da çok bağnaz davranılıyor. Mutlaka her sitede yüzdelik değer vermek zorunda değilim. Eğer bir gazete tasarlıyorsanız; bir sürü köşeyi-sütunu uygun bir şekilde sayfaya -düzgün görünecek şekilde- sığdırabilmek için bazı bölümlere pixel değer vermemin hiç bir sakıncası olamaz (hatta gereği vardır!). Ben siteyi özene bezene tasarlayayım; sonra adam gelsin, benim sadece “bold” yaptığım bir metin parçasını “en büyük başlık (h1) kadar büyütsün!”. Birazcık estetik kaygısı olan bir tasarımcının bunu kabul edeceğini sanmıyorum. Bunu yapacağına daha baştan makul bir büyüklük tayin et; ona göre tasarımını yap kardeşim. Eğer site bir blog havasında, çok fazla köşesi, sütunu yoksa orada bir metnin fontuna yüzdelik değer verilebilir; ama bunu da fanatiklik meselesi yapmayalım arkadaşlar.

Aslında şöyle bir çözüm bulunabilir: Eğer font-size ile birlikte “!important” kullanılmışsa tarayıcı(browser)lar aracıyla boyutu değştirilemesin; kullanılmamışsa, “font-size” px olarak belirtildiği durumda bile tarayıcı(browser)lar aracıyla boyutu değiştirilebilsin… Ya da bu amaçla yeni bir ifade “standard” olarak belirlensin, olsın bitsin…

Son bir şey daha… Bir sitenin CSS ile tasarlanmış olması onu daha başta “tablo” ile tasarlanmış bir siteden daha güzel yapmaz. XHTML, CSS bilmek başka bir şey, estetik ufuk başka bir şey, bu ikisini birarada iyi kullanmak bambaşka bir şeydir…

Her neyse…

Her şeye rağmen bu konuda yazan-çizen herkese teşekkürümüzü de ihmal etmiyoruz tabii ki… Sana da Osman arkadaşım… Kolay gelsin!
Murat diyor ki:
14 Eylül 2007 15:42
arkadaşım yerden göğe kadar haklısın.Açıklaman için ve gözlemlerinden ötürü tebrik ediyorum…
Volkan Özçelik diyor ki:
17 Eylül 2007 09:56
@Adem

Söylediklerinin çoğuna katılıyorum

!important konusunda ufak bir “erişilirlik” (accessibility) notum olacak:

Her durumda kullanıcı tarafından tanımlanmış CSS dosyaları (user-defined stylesheet) içinde varolan !important deklerasyonlarının geliştircinin CSS tanımlarının önüne geçmesi gerekir.

Hatta bir adım ileri gideyim: !important deklerasyonlarının tarayıcı tarafından “kolayca” değiştirilebilmesi gerekir.

Görünüm -> yazıtipi -> sabit pikselli yazılara izin verme.

gibi.

Nedeni malum:

Mesela belirli bir renk için “renk körlüğüm vardır” ve temaya çok uygun olan

color:#aaccff !important;

benim için arkaplan renginden farksızdır — okuyamıyorumdur.

Ya da

font-size:9px !important;

denmiştir. Bununla birlikte ben 12px altındaki yazılara bakarken gözlerim yaşarıyor/kanlanıyor zorlanıyordur (ve ekran çözünürlüğümle oynamak istemiyor) olabilirm.

Uzun lafın kısası: Son söz daima kullanıcının olmal.

Sevgiler.
didem herdurak diyor ki:
6 Ekim 2007 19:15
Slm..yardımcı olurmusunuz bilmiyorumm ama genede şansımı denicem..ben görsel sanatlar 2.sınıf ögrencisiyim ve bir projemiz var ve benim sorunum yaratıcı olmakta güçlük cekıyorumm.. konumuz ‘vergi’ vergi vermeyi insanlara aşılamak için bir logo yaratmamız istendi..fakat ilk defa yapıcagım ıcın ne tarz bısey yapmalıyım bılemıyorumm..hem görsel hem yazısal olmalıymıs..sızın aklınıza bı fıkır gelırse yada ne tarz bır yol uygulamam gerekır yardımcı olursanız cok sevınırım..noluuuuuuuur:(
RSS Haber Sitesi » Blog Arşivi » Tatil, askerlik, iş bulma ve çalışma zamanı diyor ki:
24 Kasım 2007 19:12
[…] Osman’dan yine güzel bir yazı: Web İçin Görsel Tasarım Yaparken Gözden Kaçanlar […]
Tatil, askerlik, iş bulma ve çalışma zamanı diyor ki:
2 Aralık 2007 00:50
[…] Osman’dan yine güzel bir yazı: Web İçin Görsel Tasarım Yaparken Gözden Kaçanlar […]
Tatil, askerlik, iş bulma ve çalışma zamanı diyor ki:
2 Aralık 2007 00:50
[…] Osman’dan yine güzel bir yazı: Web İçin Görsel Tasarım Yaparken Gözden Kaçanlar […]