ERCİYES ÜNİVERSİTESİ

İKTİSADİ VE İDARİ BİLİMLER FAKÜLTESİ

WEB TASARIMI
DERS NOTU

Uzman Gökhan GÜVEN

1
Web Organizasyonu ve Tasarımı

Öncelikli ilkeler:
Araştırmalar kullanıcıların beklentilerinin şu yönlerde olduğunu göstermiştir:

· Hız, hız ve daha fazla hız

· Sade ve tutarlı sayfalar
· Rahat kullanılabilirlik
· İçerik: "Content is the King"
· Her tarayıcıyla uyumluluk

1. Hız beklentisi
Birçok kullanıcı istediği sayfaların hızlı yüklenmesini ve gösterilmesini önşartolarak
koşmaktadır. Bu sorunun başlıca sebepleri şunlardır:

· Resimlerin yanlış kullanılması

· Tabloların çok seviyeli, içiçe gömülmesi
· Standart dışı yazıtiplerinin resimlerle kullanılmaya çalışılması
· Sayfa içi elemanların sayısının çok olması
· Resim, film, ses vb elemanların kullanıcının isteği dışında yüklenmeye başlaması
· Özellikle görsel düzenleyicilerin, standart-dışı ve gereksiz HTML kodu üretmeleri

1.a. Resimlerin doğru kullanımı

Ortalama bir Web sayfasının toplam boyunun %90'ından fazlası resim bilgisinden
oluşmaktadır. Bu nedenle, resimlerin mutlaka dikkatlice kullanılması gerekmektedir.

· Resimlerin daha küçük yer tutması için, dosya tipini doğru seçmek önemlidir. Çizim,
grafik, keskin köşeli vb resimler için GIF veya PNG, fotografik görüntüler, yumuşak
geçişli resimler için JPG tavsiye edilir. Bu seçimden sonra, Web için özelleşmiş resim
düzenleyicilerini (deBabelizer, ImageReady vb) kullanarak resimlerinizi eniyileştirin.
· Bütün sayfalarınızda tekrarlayan dolaşma çubuklarınızı resim olarak oluşturun, çünkü
resimler kullanıcı tarafında önbelleklenebilir.
· Resimlerin WIDTH ve HEIGHT özelliklerini mutlaka belirtin. Bu tarayıcının sayfayı
daha hızlı yerleştirmesini sağlar.
· Sevdiğiniz yazıtiplerini sayfaya resim olarak yerleştirmeye çalışmayın, standart
fontlara alışın.
· "Tekrarlayan" büyük resimlerin sadece küçük alanları değişiyorsa, resmi parçalayın ve
sadece değişen kısımların yüklemesini sağlayın.

2
 · Özellikle dolaşma çubuklarınızı mümkünse tek parça halinde hazırlayıp, bir
IMAGEMAP oluşturun, çünkü tek bir dosya, hem ayrı ayrı resimlerin toplamından
daha küçük bir boyda olacaktır, hem de her resim için ayrı bir bağlantı
kurulmayacaktır. Ancak bu durumda IMAGEMAP'inizde (HTML 4.0'da izin verilen)
ALT parametresini kullanın.
· Bir kural olmamasına karşın, de-facto olarak iyi tasarımcılar sayfalarında 10'dan fazla
resim kullanmamaya çalışırlar.

1.b. Tabloların doğru kullanımı

Tablolar her ne kadar yerleşimi kolaylaştırsa da, içiçe yerleştirildiklerinde tarayıcılar
zorlanmaktadır.

· Tabloları çok seviyeli bir biçimde içiçe gömmeyin, aksi takdirde, tarayıcı sayfayı
ancak bütün sayfa indikten sonra görüntüleyebilir. Temel olarak 3'den fazla tabloyu
içiçe gömmeyin.
· Tabloların WIDTH özeliğini mutlaka belirtin. Bu tarayıcının sayfayı daha hızlı
yerleştirmesini sağlar.
· Mümkün olduğu kadar az ROWSPAN ve COLSPAN kullanın.
· Basit yerleştirme işleri için PRE ya da CODE kullanın.
· Bütün sayfayı bir tek tabloya gömmek yerine tablonuzu sayfa yüklendikçe
görüntülenebilecek şekilde küçük yatay parçalara ayırın. Bu, kullanıcıda sayfa hızlı
yükleniyor hissini arttıracaktır, ve öyle de olacaktır.

1-c. Yazıtipleri
İçeriğin erişilebilirliği, içerik kadar önemlidir.

· Standart yazıtiplerine bağlı kalmaya çalışın. Mümkünse, graceful degradation

kullanarak alternatifleri de verin. Örneğin "Arial, Helvetica, sans-serif" örneği, önce
Arial'ı (Windows standardı), sonra Helvetica'yı (Mac ve UNIX standardı), en sonda
serif'siz soysal (generic; sistemce bir karşılığı bulunan) bir font'u kullanabilmenizi
sağlar.
· Yazıtipleriyle yaptığınız, "ilginç olduğunu düşündüğünüz" efektleri mümkünse
Yığıtlamalı Biçem Kağıtları (Cascading Style Sheets - CSS) kullanarak gerçekleştirin.
CSS, aslında çok ilginç efektlere izin vermektedir.

1-d. Sayfa içi elemanlar

Bir sayfa için ne kadar çok farklı dosya yükleniyorsa, sayfa o kadar yavaş yüklenecektir,
hepsinin toplamının yüklenmesinden bile yavaş!

· Bir tarayıcı, sayfa içinde karşılaştığı her dosya için Web sunucusuyla tekrar tekrar
iletişime geçer. Dolayısıyla, sayfaya bağladıklarınız fazlaysa, dosyalar ne kadar küçük
olurlarsa olsunlar, yükleme hızı düşecektir.
· Tarayıcının önbelleğini mümkün olduğu kadar çok kullanmak için, sayfa içi
elemanlarınızı (logo, grafik dolaşma çubukları, resimler, CSS tanım dosyaları vb)
tekrar tekrar kullanmaya özen gösterin.

3
1.e. Çokluortam terörizmi
Kullanıcıları uyarmadan, büyük resimler, fon müzikleri, filmler vb elemanlar yükletmeye
çalışmayın.

· Maalesef, birçok Web sitesi, kullanıcıyı hiç uyarmadan, fon müzikleri gibi
kullanıcının siteyi dolaşmasını kolaylaştırmaktan çok zorlaştıran, sayfanın
yüklenmesini yavaşlatan, hatta bazen en kötüsü, tarayıcısını çökerten eklentiler
kullanmaktadır. Kullanıcının böyle bir siteye, ihtiyacı olsa bile, tekrar gelme olasılığı
çok düşüktür.
· Kullanıcıyı, büyük boyutlu resimler (örneğin, bir resim galerisi), filmler (örneğin, bir
konferansın çekimleri) ya da ses dosyalarının (örneğin, bir röportaj) bulunduğu
sayfalara girmeden önce mutlaka uyarın.
· Kullanıcıların daha da memnun kalacakları bir özellik, onlara farklı hızlar için farklı
çözünürlük ya da kalitede sürümlerin sunulmasıdır. Dolayısıyla, kullanıcı bant
genişliğine uygun olan sayfayı seçebilecek ve daha az vakit kaybedecektir.

1.f. Standart dışı ve gereksiz HTML

Yüzeyde tasarımcının işini kolaylaştıran görsel Web sayfası düzenleyicileri, altta standart dışı
ve gereksiz HTML kodu üretmektedir.

· Sayfalarınızda aynı CSS ve JavaScript tanımlamalarını kullanıyorsanız, bunları harici

dosyalarda tutup, sayfalardan bağ vererek yükletin. Ortalama tanımlamalarınızın 500
karakter olduğunu varsayarsak, yükleme işlemi 33600 modemi olan bir kullanıcının 1
saniyeden fazlasını alır.
· Genel olarak, bir efekt ne kadar sıradışı görünüyorsa, onun için üretilen kod da o kadar
şişkin olacaktır.
· Bu tip sıradışı efektleri kolayca oluşturabilen düzenleyiciler, sayfaları kendilerine has
HTML, JavaScript, Java vb kodlarıyla doldurmakta ve uyumluluğu düşürmektedirler.
· En sık karşılaşılan durumlardan biri, görsel düzenleyicilerin gereksiz HTML etiketleri
üretmeleridir. Örneğin:

Gereksiz kod: Yeterli kod:

<FONT SIZE="-1"> ... <FONT SIZE="-1"> ...
cümle bitmiştir. cümle bitmiştir. <BR>
</FONT> <FONT SIZE="- Yeni cümle ... </FONT>
1"> <BR> </FONT> <FONT
SIZE="-1"> Yeni cümle
... </FONT>

2. Sadelik
Günlerce, haftalarca uğraştıktan sonra sade ve basit bir site hazırladıysanız, işinizi doğru
yapmışsınızdır.

· Kullanıcılara alışık olduklarını verin

· Mesaja yoğunlaşın, ilgiyi gereksiz elemanlarla dağıtmayın
· "Less is more": uzun sayfalarınızı bölün ve basitleştirin

4
 · Sayfalarınız birbirleriyle tutarlı görünsün
· Dolaşma çubuklarını tahmin edilebilir yerlerde ve tahmin edilebilir simgelerle kullanın

2.a. Kullanıcı alışkanlıkları

Kullanıcıların çoğu, yeni özellikleri öğrenmek için vakit harcamak yerine, basitçe onları
yoksayarlar.

· Büyük sitelerin ve diğer ortamların kullandıkları ortak yönlere bakın. Unutmayın ki,
akademik ya da kar amacı gütmeyen siteleri kullanan kişiler, ticari siteleri de ziyaret
etmektedir, ve edindikleri alışkanlıkları sitenize de taşırlar. "Farklı" akademik
kimliğiniz, sitenizin kötü olmasını hiçbir nedenle haklı çıkarmaz.
· Birçok ortam, ör. basılı yayın, siyah üstüne beyaz yazı kullanmaktadır. Mümkünse
buna bağlı kalın. Sitenizde alışılmadık renkler kullanmak kullanıcıyı zorlayacaktır.
· Aynı nedenle, ziyaret edilmemiş ve edilmiş bağların renklerini tahmin edilebilir
şekilde ayarlayın.
Örneğin çok bilinen mavi / mor ikilisi, ya da bu sayfalardaki açık mavi / koyu mavi
gibi...
· Kurumunuz dışından kullanıcıların sitenizi nasıl kullandığını gözleyin ve sıkça
tekrarladıklarını not edin.
· Kullanıcıyı size uymaya zorlamayın, sitenizi kullanıcıya (ve diğer başarılı sitelere)
uydurmaya çalışın.

2.b. İlgiyi dağıtmayın

Herşeyin vurgulandığı bir yerde hiçbir şey vurgulanamaz.

· Öncelikle, animated GIF, reklam benzeri resimler, afişler (banner), kayan yazılardan
ve BLINK 'den kesinlikle uzak durun.
· Otomatik olarak yeni tarayıcı pencereleri açmaktan kaçının. Birçok kullanıcı,
açıldıkları anda bu pencereleri kapatma alışkanlığını çoktan edinmiştir. Sayfadan
çıkıldığı anda yeni bir sayfa açmaktansa kesinlikle uzak durun.
· Sadece gerektiği kadar resim kullanın. Mutlaka resim kullanmak istiyor ya da
zorundaysanız, resimlerin renklerini yakınlaştırmaya çalışın.
· Son çıkan efektleri hemen kendi sitenize de eklemeye çalışmayın. Nasıl olsa birçok
amatör bunu zaten yapacaktır.
· İşlevsel olması gereken sayfa elemanlarını işlevsel bırakın. Alacalı bir bullet ya da
ruler resmi kullanmaya çalışmayın.

2.c. "Less is more": Daha az, daha çoktur

Mesajınızı az ve öz şekilde sunmaya özen gösterin. Bilgiye rahat ulaşabilen kullanıcı, sitenizi
daha çok ziyaret edecektir.

· Vermek istediğiniz mesajı sayfanın üstlerine yerleştirin.

· Uzun tabloları, raporları ya da arşivleri, parçalara bölün ve kullanıcıya listeyi sunun.
Böylece, kullanıcı, sadece görmek istediği bölümü yükleyebilecektir. Ancak, her
zaman listeye bir referans verin, kullanıcıların sitenize nereden gireceği hiç belli
olmaz.

5
 · Birçok insanın Web üzerinde, gerçek hayattan daha da az okuduğu düşünülürse,
bilgiyi parçalamak gerekir. Eğer kullanıcının ilgisini çekebilmişseniz, zaten kalan
sayfaları da ziyaret edecektir.
· Ayrıca, Web kullanıcılarının bir sayfada kalma süreleri 1 dakikayı aşmamaktadır.
Bilgiyi bu sürede erişilebilir hale getirmeniz gerekir.

2.d. Tutarlı görünüm

Yamalı, tutarsız bir görünüm, kullanıcıyı sizin amatör, sunduğunuz bilginin de yararsız
olduğunu düşünmeye itecektir.

· Birçok Web sayfası düzenleyicide bulunan şablonlama özelliklerinden faydalanın. Site

tasarımında yukarıdan aşağı bir yol da izlediğiniz takdirde mutlaka tutarlı bir siteniz
olacaktır.
· Kullandığınız renkleri, başlık ve paragraf yazılarının büyüklüklerini, resimleri vb
bütün site tarafından paylaşılan elemanları site genelinde ortak ve uyumlu yapmaya
çalışın. CSS, JavaScript, DTD vb tanımlamalarını da site genelinde ortak tutun.
· Bir kurumun farklı birimleri kendi sitelerini kendileri hazırlıyor olabilir, ancak
kurumun Webmaster'ının görevi, ortak bir şema oluşturmak ve bunları sayfa
hazırlayıcılara benimsetmektir.

2.e. Dolaşma çubukları

Çubuklarınızdaki simgelere etiket vermek zorunda kalıyorsanız, simgeleriniz başarılı değil
demektir.

· Genel olarak sayfaların en üstünde resimli bir dolaşma çubuğu, en altındaysa düz
metin bir çubuk bulunur. Bu, birçok kullanıcının alışkın olduğu bir şemadır.
· Resimli olan dolaşma çubuğuna, etiket vermeden, sınamadan geçirin. Eğer
kullanıcılar, simgelerin gideceği yeri tahmin edebiliyorlarsa, simgeleriniz başarılıdır.
Eğer anlaşılmıyorlarsa, yeni bir tasarım yapın.
· Dolaşma için kullanılabilecek araçları, kesinlikle, sayfanın her yerine dağıtmayın. Bu
araçları birbirlerine yakın yerlerde tutmaya çalışın.
· Sağ taraf, dolaşma çubukları için alışık olunmamasına karşın, kullanıcıların diğer
beklentileri (baskıda, içeriğin tamamının çıkması; sayfa yüklenir yüklenmez, içeriğe
konsantre olunması vb) çubuğun sağda olmasını öngörmektedir.

3. Kullanılabilirlik
Siteler kullanılmak için hazırlanır.

· Hedef kitlenizi baştan belirleyin

· Okunurluk içeriğe engel olmamalıdır
· Tipografi yazıların arayüzüdür
· Önemli servisleri erişilebilir kılın
· Özelleştirilmiş hata mesajları yardımcınızdır
· Sayfaların bastırılabileceğini ve diske kaydedilebileceğini unutmayın

6
3.a. Hedef Kitle
Tasarım ve içerik organizasyonu en baştan yapılmalıdır.

· Hedef kitlenizdeki kullanıcıların profilini, beklentilerini, bağlantı hızlarını vb

mümkünse uzaktan gözlemleyerek, gerekirse de anketlerle, öğrenmeden yeni bir
tasarıma başlamayın. Gözlem metodu, kullanıcıların "verdikleri" cevaplarda daha
dürüst olmalarını sağlar.
· Ender olarak, grafik, ses ya da çokluortam sunucusu vb hazırlamanız durumunda,
kullanıcılardan beklentileriniz (bant genişliği, kurulu eklentiler) yüksek olabilir. Bu
durumda bile, gerekenden fazla bant genişliği ve sayfa elemanı kullanmayın.
· Sitenizde neler bulunduğunu ve bunun kullanıcıya ne yararlar getireceğini belirtin.

3.b. Okunurluk
Birçok kullanıcı sayfayı önce tarar, sonra okur.

· Sayfalarınızı taramaya uygun hazırlayın. Başlıkları ve yazıyı düzenli tutmaya çalışın.

· Bir satırda 70-100 karakterden fazla kullanmamaya çalışın. Kitaplar ve gazeteler bu
fikri yüzyıllardır kullanmaktadır. Sayfanın genişliğine göre uzadıkça uzayan satırlar,
okunurluğu çok düşürecektir. Bunun için tabloları kullanabilirsiniz.
· Yazı ve fon için zıt renkler kullanın. En çok tercih edilen ikili genel olarak beyaz
üzerine siyahtır. Renklerin RGB kodlarına bakarak zıtlıklarını (contrast)
ayarlayabilirsiniz.
Örneğin #FFFFCC üzerine #000099 iyi bir zıtlık oluşturacaktır.
· Sayfa fonu için resim kullanıyorsanız, sayfanın fon rengini yine de belirtin ve fon
resmine yakın bir renk seçin. Bazı kullanıcılar resimleri otomatik yükletmemektedir.
Örneğin, siyah fon resmi üzerine beyaz yazı kullanıyorsanız, bu tip bir kullanıcının
tarayıcısında beyaz üzerine beyaz yazı gibi itici bir sonuç yaratabilirsiniz.

3.c. Tipografi
Doğru yazıtiplerinin seçimi, içeriğin sunumunu kolaylaştıracaktır.

· Başlık ve paragraflar için değişimli (alternating) yazıtipleri kullanın, örneğin başlıklar

için serif bir yazıtipi (Times New Roman, Times vb), paragraflar için de sans-serif bir
yazıtipi (Arial, Helvetica vb) iyi olabilir, ya da tam tersi.
· Genel olarak, "HEPSİ BÜYÜK" ve "Sadece İlk Harfleri Büyük" başlıklar, cümleler
kullanmaktan kaçının. Bu gözün gereksiz yere hareketine yolaçacağı için gözü
yoracaktır.
· Karakter setini belirtirken bazı düzenleyicilerin (Frontpage vb) kullandığı Windows-
1254 karakter seti yerine, ISO 8859-9 kullanın. Win1254 seti standartlar içinde yoktur
ve UNIX ve Mac makinelerde Türkçe yazıtipleri olan kullanıcılarda bile sorun
çıkarmaktadır. ISO seti, belli başlı bütün tarayıcılarca desteklenmektedir.

3.d. Servislerin erişilebilirliği

Servislerinizi kolay erişilebilir kılmazsanız, onları sunmanızın da anlamı olmaz.

7
 · Yardım, arama, site haritası vb servisler kişisel ev sayfaları dışında her sitede
bulunmalıdır.
· En çok kullanılan servis ve sayfalarınızı (örneğin harita, arama vb) her yerden
erişilebilir yapın. Unutmayın her ziyaretçiniz ana sayfanızdan gelmeyebilir.
· Sayfalarınızın adreslerini değiştirmemeye çalışın. Değiştirmek zorunda kalırsanız,
yeni sayfanın adresini içeren bir sayfayı eski yerde bırakın.
· Arama, harita, yardim vb adresleri
o http://www.kurum.edu.tr/arama/
o http://www.kurum.edu.tr/harita/
o http://www.kurum.edu.tr/yardim/

gibi kolay hatırlanabilecek adreslerde sabitleyin.

3.e. Özelleştirilmiş hata mesajları

Kullanıcıya hatanın olası nedenlerini açıklamaya çalışın. Gerekirse, akıllı sistemler kurun.

· Kullanıcıya, "404 file not found" gibi sevimsiz bir hata vermek yerine, sayfanın adresi
değişmişse yeni yerini bildiren, ya da otomatik olarak gitmeye çalıştığı adresi kestiren
uygulamalar geliştirin.
· Eğer belli adreslere erişimi yasakladıysanız ya da site kullanıcının şifresini kabul
etmiyorsa, neden yasaklandığını veya yeni şifre almak için kime başvurulacağını hata
mesajında belirtin.

3.f. Çevrimdışı siteler

Sayfalarınızı disklerine kaydeden ya da bastıran kullanıcılara yardımcı olun.

· Sayfalarınızın, diyelim ki en altında, sayfanın kendisinin ya da bağlı olduğu sayfanın

URL'i bulunsun. Böylece, sayfanın asıl adresi hem baskıda, hem de diskteki
kopyalarında görünecektir.
· Mümkünse, sayfa içinde verdiğiniz referansları, sayfanın en altında, açık URL'leriyle
birlikte tekrarlayın.
· Sayfalarınızın son değişiklik tarihini belirtin. Çoğu zaman, saati ve dakikayı
belirtmeniz gerekmez, ay-yıl bile yeterince iş görecektir.
· Sayfalarınızın, ya baskıda da iyi göründüğünden emin olun ya da yazıcı-dostu
sürümleri olsun. Bunun için CGI vb programlar yazılması gerekebilir.
· A4 kağıda bastırılan bir sayfa için güvenli bölge 535 x 295 pixel'dir. bu sınırın dışına
taşmamaya çalışın.

4. İçerik
Birçok kullanıcı ve tasarımcının ortak görüşü: "Content is the king" - İçerik kraldır.

· Yazmayı bitirince, sözcük sayısını yarıya düşürmeye çalışın

· Gazeteciliğin altın kuralı: "Kim, ne, ne zaman ve nerede"
· Mikroiçeriği kullanmayı öğrenin
· Eski sayfalarınızı çöpe atmayın, arşivleyin
· Kullandığınız terminolojiyi açıklaştırın

8
 · Sayfa içindeki bağları en az seviyede tutmaya çalışın

4.a. Yarısı yeter

Internet'deki bilgi zaten yeteri kadar çoktur. Önemli olan kimin bunu daha hızlı
sağlayabileceğidir.

· Bilginin aşırı dozda olması, eksik bilgi kadar yararsızdır.

· İçeriği hazırladıktan sonra, konuya uzak birinden yazıyı incelemesini rica edin.
Gerekirse, ifadelerinizi basitleştirin.
· Paragraf başına bir fikirden fazlasını sunmayın. İlk birkaç cümlede sıkılan okuyucu,
diğer paragrafa atlarsa, bütün fikri kaçırmamalıdır.
· Proje, rapor, ödev, ders kapsamı, kütüphanedeki kitaplar vb her tür listeyi önce basit
haliyle, gerekirse detayları da görülebilecek şekilde hazırlayın.
· Her tür yazı için önce bir taslak çerçeveyle işe başlayın. Mantık zinciri yanlış
kurulursa, yazdığınız herşey çöpe atılacaktır.
· Uzun cümlelerden kaçının. Hem sizin dilbilimi hatası yapmanız, hem de kullanıcının
cümlenin sonuna geldiğinde başını unutması kaçınılmaz olur.

4.b. "Kim, ne, ne zaman, nerede"

Gazetecilerin yüzyıldır işlerine yarayan bu prensip, sizinkine niye yaramasın?

· Sayfalarınız bu soruların - en azından uygulanabilir - olan hepsine cevap vermelidir.

Kim sorusuna sayfa yazarı, ne sorusuna anlattığınız konu, ne zaman sorusuna
kavramın zaman çerçevesini, nerede sorusuna da yan olayları veya ortamı vererek işe
başlayabilirsiniz.
· Hedef kitlenin sorabileceği soruları önceden kestirmeye çalışın. Daha soru
sorulmadan cevaplarınız hazır olsun.

4.c. Mikroiçerik
Kullanıcının ilgisini çekmek için çok ince bir çizgimiz var.

· Başlıklar, bağlar ve sayfa başlığı kullanıcının sayfayı taraması sırasında ilk göze
çarpan maddelerdir. Bunların kötü seçimi, kullanıcının sayfayı taramayı bile
bitirmemesine neden olabilir.
· 3-4 kelimede vermek istediğiniz mesajı vermeye çalışın. Daha fazlası ya da azı iş
görmeyecektir.
· Yanıltıcı ve klişeleşmiş kelimelerden kaçının. Konu satırında $$$, XXX, Büyük fırsat
vb geçen e-postaların hemen silinmesi gibi, kullanıcı da hemen Geri tuşuna basabilir.
· "... için tıklayınız ..." kalıbından vazgeçiniz. Bağı cümle içinde kullandığınız en yakın
sözcük grubundan veriniz.
· Bölüm başlıklarınızın arama motorları tarafından kullanılabileceğini, bağlarınızın
masaüstüne sürüklenebileceğini, sayfa başlığınızın da "Bookmark" edilebileceğini
unutmayın. Siz ne seçerseniz, kullanıcı onu görecektir.

9
4.d. Çöpe atmayın, arşivleyin
Niçin eski dosyalarınızı çöpe atıp sunduğunuz kaynakları azaltasınız? Yeniden değerlendirin.

· Sitenizde yeriniz varsa, yazışmaların, tartışma listelerinin, yazılımın farklı

sürümlerinin vb bir arşivini sitenizde tutun. Bu kaynaklar tekrar işe yarayabilir.
· Sitenize yeni bilgi eklediğiniz zaman bunu eski dosyaların üzerinde oynamak yerine,
yeni dosyalar yaratarak ekleyin. Bunun istisnaları, gazete ve tv gibi medyaların ana
sayfaları, ya da sürekli değişen istatistikler olabilir. Ancak, bu gibi durumların dışında,
bırakın sayfalarınıza dışarıdan verilen bağlar sizin lehinize çalışsın.
· Arşiviniz yoksa, arama motorlarından sitenize gelenler, aradıkları kelimenin sayfada
hiç geçmediğini farkettikleri anda hayal kırıklığına uğrarlar.

4.e. Terminolojinizi verin

Türkçe'deki karşılıkları benimsenmemiş kelimeler, ya da anlaşılmaz kısaltmaları (acronyms)
açıklaştırın.

· Yeni teknolojiler hakkında özgün dili dışında yazılan metinlerin genel sorunu,
terminolojinin o dile tam olarak aktarılmamış olmasıdır. Kullanıcıyı içeriği anlamak
yerine acronym'leri çözmeye zorlamayın.
· Eğer bu tip bir kısaltma ya da terimi ilk defa kullanacaksanız, bir sözlüğe, diğer
kaynaklarda nasıl kullanıldığına bakın. İyi bir karşılık bulabilirseniz onu kullanın.
· Sayfa içinde diğer bir dilde kelime kullanmak zorunda kalırsanız onu farklı bir
yazıtipiyle yazın ve mümkünse anlamının öğrenilebileceği bir bağ verin. Ayrıca,
kısaltmaların ilk geçtikleri yerde, açık hallerinin yazılması da tavsiye edilir. Örneğin:
Metin Tip Tanımlaması (Document Type Definition - DTD) gibi...
· Terminolojinin kapsamı, hedef kitleniz tarafından belirlenir. Eğer Web sayfaları
hazırlamaktan bahsediyorsanız, HTML'i açmanız gerekir, ancak (Web üzerinden) E-
ticaret'den bahsediyorsanız, artık HTML gibi en temel kavramlar yerine, veri
tabanlarını veya 3-katmanlı yapıları açıklamanız daha uygun olacaktır.

4.f. Bağlarınız sade ve az olsun

Sayfalar taranırken göze ilk çarpan elemanlardan biri hiperbağ (hyperlink)'dır.

· Metin içinde birbirine yakın yerlerde bağ kullanmaktan kaçının. Bu kullanıcıda bilgi
taşması ve kararsızlık yaratabilir. Aynı cümle içindeyse, farklı yerlere bağlar
vermekten özellikle kaçının.
· Bunun bir istisnası, standartlar (ISO vb) gibi sık miktarda çapraz-bağa gereksinim
duyan metinler olabilir.
· Bağlarınızı anlamlı kelimelerden veriniz. Bu şekilde kullanıcı cümlenin tamamını bile
okumasa gitmek istediği yeri kestirecektir.

5. Uyumluluk
En çok kullanılan tarayıcı bile %60'ı aşamıyorsa, onu zorladığınız anda, kalan %40'a hiç
ulaşamazsınız.

10
 · Kullanıcılarda bir özelliğin, tarayıcının olduğunu varsaymayın
· "Bu site şu programla ve şu çözünürlükte gezilebilir"den vazgeçin
· Metin-tabanlı tarayıcıları unutmayın

5.a. Belli özellikleri şart koşmak

Başarılı siteler, önce servislerinin kalitesiyle başarı kazanmışlardır.

· Herkesde JavaScript'in, Java'nın, CSS'in, frame'lerin aktif olduğunu, ya da resimleri

otomatik yüklettiğini varsaymayın. Birçok kullanıcının tarayıcısı ya bunları hiç
desteklemeyebilir, ya da hız kazanmak için bu özellikleri kapatmış olabilirler.
· Kullanıcıda aktif olması gereken bu özelliklerden birisi kapalıysa, siteniz graceful
degradation kullanarak, yine de iyi görünmelidir. Bu tembel site yöneticilerinin
görmek istemedikleri kör noktalarıdır. Örneğin bu sayfalar CSS ve tablo
kullanmaktadır, ancak CSS desteklemeyen ya da metin tabanlı tarayıcılarda da
görülebilecek şekilde hazırlanmıştır. Örneğin: Internet Explorer 3.0 görüntüsü (kısıtlı
CSS desteği) Lynx 2.8rel.2 görüntüsü (metin tabanlı, tablo desteği yok) W3m/beta-
991203 görüntüsü (metin tabanlı, tablo desteği var)
· Özellikle dolaşma çubukları için bu tip teknolojilere bağımlı olmamaya çalışın.
Kullanıcıda bu özellikler yok ya da kapalıysa, sitenize girmesine rağmen, daha
ilerilere gidemeyecektir.
· Herkesin frame'leri sevdiğini düşünmeyin. Bazı kullanıcılar hızlarından dolayı metin
tabanlı tarayıcılar kullanmaktadır ve frame'leri hiç göremezler. Ayrıca, frame'ler baskı
almayı ve kullanıcının bookmark etmesini zorlaştırırlar. Bu şekilde kullanıcıyı siteye
girdiği anda reddetmiş olursunuz. Site yöneticisi açısındansa, frame'lerin yönetimi son
derece zor ve hep hata payı bulunan bir görevdir.

5.b. İyi bir site tarayıcıdan bağımsızdır

İyi bir radyo programını dinlemek için özel marka bir radyoya ihtiyacımız yok. Niye Web
siteleri farklı olsun?

· Bir Web sitesi, görünümden önce içerik ve kullanılabilirliğe yoğunlaşmalıdır. İyi

görünmek arkasından gelecektir.
· "Bu site en iyi şu tarayıcı ve bu çözünürlükte izlenir" kullanıcıları taraf tutmaya, Web
tasarımcılarını da tembelliğe itmektedir.
· Bu tasarımcılar, yeterince farklı işletim sistemi, tarayıcı ve çözünürlüklerde
sınamadıkları sayfalarını, sonuç olarak klişeleşen "en iyi şu..." cümlesiyle aklamak
isterler.
· Sınama işlemi, prototipler üzerinde yapılmalı, siteye doğru sayfa yerleşimi, teknoloji
vb efektler seçildikten sonra devam edilmelidir.
· Farklı firmaların farklı tarayıcıları birbirine eşitlenene ve bütün kullanıcılar kabul
edilebilir bir tarayıcıya geçene kadar, tasarımlarınızda "eskiyle idare edin".

5.c. Metin-tabanlı tarayıcılar

Engelli, uzman ya da hız tutkunu kullanıcıları ihmal etmeyin.

11
 · Engelli kişiler, Web sayfalarını bir okuyucu aracılığıyla gezdikleri için,
sayfalarınızdaki elemanların akışını dağıtmamaya çalışın. Bu yine birçok tasarımcının
ihmal ettiği ama zamanla kendisini zaten zorlamaya başlayacak bir konudur.
· Benzer şekilde, metin tabanlı tarayıcılarda resimlerin kendisi yerine ALT
parametresiyle verilen açıklamaları görülür. Cetveller (rulers) için "---", kurşunlar
(bullets) için "*", diğer tip resimler için resmin ne olduğu belirtilmelidir. Yerleşim
için kullanılan 1 pixel'lik resimleriniz varsa bunlar için de "" kullanabilirsiniz.
· Tablo, frame, resim, çokluortam vb kullanımında, tercihinizi yapmadan önce metin-
tabanlı tarayıcıları ve sizin kullanmadığınız "o diğer" tarayıcıyı düşünün. Bu, dengeli
bir karar vermenize yolaçacaktır.

Sonuç
Bu metin, Web tasarımının ancak yüzde birini anlatabilmiştir. Web tasarımı, çokboyutlu
düşünülmesi gereken, önceden planlaması gereken bir alandır ve uzmanlık ister.

· Web tasarımı, çoklu disiplin gerektiren, profesyonelce yaklaşılması gereken bir alandır
ve kolay kullanılan ilk görsel düzenleyiciyi açıp sayfa yazmak kadar da kolay değildir.
· Birçok tasarımcının ilk düşündüğü, sayfaların nasıl görüneceğidir. Halbuki ilk sorun,
içlerinde ne ve ne kadar bilgi olacağı, kim için hazırlandığı ve Internet'e başka bir
sayfa katmanızın gerçekten anlamlı olup olmayacağıdır.

Bağlantılar
Hız:

· Extreme HTML optimization:

http://www.webreference.com/authoring/languages/html/optimize/
· W3C HTML validation service: http://validator.w3.org/
· The Need for Speed: http://www.pantos.org/atw/speed.html

Sadelik:

· W3C HTML Tidy: http://www.w3.org/People/Raggett/tidy/

· Seven deadly sins of information design:
http://home.netscape.com/computing/webbuilding/studio/feature19980729-1.html
· Modular design: http://www.webreference.com/dlab/9801/
· Unsexy and unstoppable: http://www.nua.ie/newthinking/archives/newthinking357/

Kullanılabilirlik:

· Usable Web: http://usableweb.com/

· Jakob Nielsen's Usable Information Technology http://www.useit.com/
· How to test usability: http://instone.org/howtotest/

İçerik:

12
 · Writing for the Web: http://www.sun.com/980713/webwriting/
· Lighthouse design: http://www.shorewalker.com/design/design01.html
· Good documents: http://www.gooddocuments.com/
· What is Web architecture: http://webreview.com/wr/pub/96/09/20/arch/

Uyumluluk:

· W3 Consortium - HTML specification:

· Web Design Group's HTML reference: http://www.htmlhelp.com/
· AnyBrowser pages: http://www.anybrowser.org/

Genel:

· DevSearch - Web developer's search site: http://www.devsearch.com/

· C|Net Builder.com: http://builder.cnet.com/
· Hotwired Webmonkey: http://hotwired.lycos.com/webmonkey/
· Yale C/Aim Web style guide: http://info.med.yale.edu/caim/manual/
· AT&T style guide: http://www.att.com/style/
· Web Developer's Virtual Library: http://www.wdvl.com/
· SUN guide to Web Style: http://www.sun.com/styleguide/
· Netscape Devedge: http://developer.netscape.com/
· Killer Web sites: http://www.killerwebsites.com/
· NCSA Beginner's guide to HTML: http://www.ncsa.uiuc.edu/General/Internet/WWW/

13