Duyarlı ve Uyarlanabilir Web Tasarımı
Günümüzde teknolojinin gelişmesiyle birlikte bilginin üretimi ve paylaşılması da her geçen gün artmaktadır. Buna bağlı olarak bilgiye zaman ve mekan bağımsız bir şekilde erişmek isteyen kişi sayısı da oldukça artmaya başlamıştır. Mobil teknolojileri kullanan kişilerin artması ile birlikte kısa sürede mobil cihazların kullanım oranında da artış gözlemlenmiştir. Buna bağlı olarak da mobil cihazlar aracılığıyla web sitelerine giriş işlemleri de artmıştır.
Mobil uyumlu web site: Mobil uyumlu web sayfaları, farklı çözünürlük ve boyutlardaki cihazlarda ideal görüntülenmesi için tasarlanan web sayfalarıdır.
Duyarlı (Responsive) Tasarım
Duyarlı Web Tasarımı ilk olarak 2010 yılında tasarımcı ve geliştirici Ethan Marcotte tarafından yazılan makale ile tanımlanmıştır. Duyarlı Web Tasarımı, tek bir site ve içerik ile ekran boyutuna göre ideal görüntüleme deneyimini sağlayan tasarımlardır.
Özellikleri:
Duyarlı tasarım 3 prensip üzerine kurulmaktadır. (Modüler ızgara yapı, web site bileşenlerinin ekran boyutuna göre düzenlenmesi, medya sorguları ile ekran çözünürlüğüne göre farklı stillerin ayarlanması)
JavaScript bağlama zorunluluğu yoktur.
Duyarlı düzen, farklı cihazlardaki site ögelerinin nasıl görüneceğini belirler.
Duyarlı tasarım, sayfadaki ögelerin nesne modeli ile çalışmaz,
Duyarlı tasarım farklı cihazlarda benzer bir tasarım düzeni sunmaktadır.
Avantajları:
Arama motoru optimizasyonu açısından daha avantajlıdır.
Daha az emek ve çaba ile oluşturulabilir.
Tek bir alan adı ve link ile paylaşılması kolaydır.
Dezavanjtajları:
Esnek tasarım oluşturmada sınırlı kontrol sunmaktadır.
Uyarlanabilir sitelere göre daha yavaştır.
Her ekran boyutuna göre içerikler boyutlandırıldığı için her zaman ideal kullanıcı deneyimi sunmayabilir.
Uyarlanabilir (Adaptive) Tasarım
Uyarlanabilir web tasarımında her ölçü için ayrı ayrı kontrol sağlanabilmektedir. Bu sayede farklı boyutlardaki cihazlarda özel tasarımlar yapabilmeyi sağlamaktadır. Burada tek bir HTML kodu ile tüm cihazlara uygun tasarım yapmak yerine farklı ekran boyutlarına göre farklı tasarımların yapılması gerekmektedir.
Özellikleri:
Farklı ekranlara göre esnek ve özgün tasarımlar yapılabilir.
JavaScript kodları uyarlanabilir tasarımlarda web site bileşenlerini kontrol etmek için kullanılabilir.
Hedef kitleye uygun özel tasarımlar yapabilme imkanı sunulmaktadır.
Duyarlı (Responsive) ve Uyarlanabilir (Adaptive) Tasarım Arasındaki Fark
Hem uyarlanabilir hem de duyarlı tasarımlar mobil uyumlu web siteleri olduğu için iki prensipte de farklı ekran boyutlarına göre tasarım yapılmaktadır. İki kavram da birbirine benzer olsa da bazı farklılıkları bulunmaktadır. Bunlar:
İçerik: Duyarlı tasarımda cihaz boyutuna göre içeriklerin yeniden konumlandırılması ile uyarlanabilir tasarımda ise cihaz boyutuna göre komut dosyalarının belirli düzende sunulması ile oluşmaktadır.
Yenilikçilik: Piyasaya yeni bir cihaz (ekran boyutu farklı) sürülmesi hâlinde duyarlı tasarım hemen adapte olabilirken uyarlanabilir tasarım için sunucudaki kodların tekrar düzenlenmesi gerekmektedir.
Hız: Duyarlı web siteleri uyarlanabilir web sitelerine göre önemli ölçüde yavaştır.
Esneklik: Tek bir içeriğin farklı ekranlara göre boyutlandırılması yapıldığı için duyarlı tasarımlar uyarlanabilir tasarımlara göre daha sınırlı yapıdadır.
Web Site Uyumluluk Testi: Mobil uyumluluk için ücretli / lisanslı bazı yazılımlar yanı sıra ücretsiz çevrim içi test edilebilecek siteler de bulunmaktadır. Yapmış olduğunuz web sitesini ücretsiz mobil uyumluluk test sitelerinde test edebilirsiniz.
Duyarlı Web Site Tasarımı Nasıl Yapılır?
Mobil uyumlu web site tasarımı yaparken tarayıcının mobil cihazı algılaması gerekmektedir. Tarayıcıya içeriği hangi cihaza göre ayarlayacağını belirtmek için ise name=”viewport” etiketi tanımlanmalıdır. Bu nedenle HTML’de <head> etiketleri arasında <meta> etiketinin açılıp name parametresine ise “viewport” olarak tanımlanması gerekmektedir.
Ayrıca media etiketi de mobil uyumlu siteler oluşturulurken kullanılan önemli etiketlerden biridir. Pencere boyutundan font büyüklüğüne kadar tüm HTML etiketlerini piksellere göre belirlemek için media etiketi kullanılmaktadır.
CSS kodları ile sıfırdan mobil uyumlu site yapılabildiği gibi “Mobil Uyumlu Web Site Kütüphaneleri” kullanılarak da mobil uyumlu web siteleri yapılabilir. Bu kütüphaneler daha önceden yazılmış CSS kodlarının kendi projemizde kullanılması ile oluşmaktadır. Piyasada birçok CSS kütüphanesi (framework) bulunmaktadır.