Fluid, Adaptive, Responsive...

Web sitesi, kağıda basılmış bir broşürden farklı olarak her işletim sistemi ve tarayıcıda farklı görünür. Tasarımdaki bu zorluk yetmiyormuş gibi son dönemde tablet ve akıllı telefonların yaygınlaşması ile web tasarımı jargonuna "Fixed, Fluid, Adaptive ve Responsive" kelimeleri eklendi.

Mobil cihazlardan izlenmesi öngörülen web siteleri için bu ifadeler, daha küçük veya en/boy oranı farklı ekranlardaki görüntüyü düzenlemek için kullanılan teknikleri ifade eder. Bu nedenle web sitesi Mobil olacaksa, en baştan bu şekilde tasarlanması faydalı olacaktır; sitenin sonradan bu hale getirilmesi çok zor olabileceği gibi, istenen etki bakımından bu dönüşüme hiç imkan vermeyebilir.

 

 

"Fluid Design"

Bu alanda ortaya atılmış en eski terimdir; ekran genişliğinin yüzdesi olarak tanımlanmış grafik ve yazı olarak  olarak tarif edilebilir. Diğer bir ifadeyle: Ekran ne kadar küçük veya büyük ise, görecekleriniz de aynı ölçüde esnetilerek boyutlandırılır.

Bu sayfada en üstteki navigasyon menüsü (siyah şerit) veya bölüm başlığı (kahverengi şerit) buna örnek gösterilebilir. Şu an bilgisayar kullanıyorsanız, tarayıcı penceresini küçültün ve genişliğini kademeli olarak değiştirerek oluşan yapıyı izleyin.

"Responsive Design"

Sayfalar, o an kullanılan ekran türüne göre oluşturulur; resim, grafik ve logolar yeniden boyutlandırılır, yazıların konumu değişir ve sayfa düzeni buna uygun olarak yapılandırılır.

Bu sayfada 2 sütun olarak düzenlenmiş metin ve grafiği örnek gösterelim: Pencere belirli bir boyuta kadar küçüldüğünde grafiğin boyutu küçülür, metni barındıran sütunlar daralır. Pencere daha fazla küçüldüğünde (cep telefonu boyutunda) okunabilirliği kaybetmemek için sütunlar alt alta düzenlenir; yazılar küçülmez, resimler anlaşılabilir boyutta kalır. 

"Adaptive Design"

Uygulaması en zor ve fazla zaman alan yöntemdir. "Media Queries" sorguları ile kullanılan cihazı hedefleyen özel sayfa yapıları oluşturulur (IPhone, Ipad, Android, PC v.s.).

Cihaza özel sayfa yapısı ile hem daha kullanışlı hem de daha gösterişli olabilir, boyutları ve konumu değişen sayfa unsurları yerine cihaza göre tümüyle farklı bir içerik de sunulabilir, ancak bir dezavantajı var: Bugün bildiğimiz cihazlar dikkate alınarak tasarlanmıştır, yeni bir aygıt standardı tanıtıldığında sitenizin yapısı komple değişir.

"Fixed Design"

Tüm unsurları ile sabit ölçülerde sayfa yapısı. Sayfa görünümü, mobil cihazlardan izlemeye uygun değildir. Diğer terimlerin karşıtı olmakla birlikte ihtiyaca göre karma sayfa yapılarında 4 ayrı yöntem birlikte kullanılabilir.

Bu sayfanın sol kenarında yukarıdan aşağıya uzanan yarı saydam şerit örnektir; küçülen ekran boyutlarında aynı ölçüde kalır veya kısmen görünür. Filigran ve arkaplan grafiklerinde kullanılabilir.