Responsive Web Tasarımların Avantajları ve Dezavantajları

Responsive, web tasarımda dilimize yeni yerleşmiş  kavramlardan bir tanesidir. Bu yabancı terimin dilimizdeki karşılığı “duyarlı” sözcüğüne karşılık gelmektedir. Yazımızda bir sonraki kullanımlar için de alışkanlık oluşturması için responsive sözcüğünü duyarlı sözcüğüyle ifade edeceğiz.

Duyarlı Web Tasarım = Her Ekran İçin Farklı Bir Site

Öncelikle duyarlı web tasarımlarının ne olduğunu ifade edelim. Duyarlı web tasarımları; farklı ekran boyutları için en uygun görüntüyü ve yerleşimi barındıracak şekilde tasarlanmış, web tasarım dünyasında yeni bir modadır.

2009 yılından bu yana, dünyada mobil kullanımının her yıl katlanarak artmasının sonucu, bugünlerde mobil bağlantının internet trafiğini ciddi derecede arttırdığı görülmektedir. Bu sebeple, web sitelerinin mobil kullanım için yeniden inşası zorunlu hale geldi. Bu geçiş sürecinde şirketler ve tasarımcılar, çareyi mobil versiyonlarında sitelerinin kısıtlı halini sunmakta buldu. Böylelikle mobil kullanıcılar, mobil cihazlar için hazırlanan küçük web sitelerine yönlendirildiler. Halen yoğun bir şekilde bu kullanım sürmektedir.

Mobil cihazlar için üretilen bu mikro siteler, zamanla ihtiyacı karşılayamayacak duruma geldi. Bu da web site yapımcılarını farklı bir arayışa yönlendirdi. İşte bu noktada her ekran için en uygun görüntüyü otomatik olarak sunan duyarlı web tasarımlar devreye girdi.

Responsive_web_design

Duyarlı web tasarımlarda, siteleri farklı ekran boyutlarına adapte etmek için CSS3 medya sorguları, esnek imajlar ve grid(akışkan) yapı gibi araçlar kullanılır. HTML5 teknolojisinde çoğunlukla duyarlı web tasarım kullanılır. Bu araçlar sadece web sayfalarını oluşturmak veya bakımını yapmak için değil, aynı zamanda sayfayı optimize etmek için de kullanılır. Çünkü duyarlı web tasarımlar, web sitelerinin mobil cihazlarda normal sitelere göre daha hızlı yüklenmesini sağlar ve verimliliği arttırır. Bu özelliğin günümüzde ne kadar önemli bir gereklilik olduğunu söylemeye gerek bile yok diye düşünüyorum. Mobil kullanıcılar diğer platform kullanıcılarına göre daha kırılgandır. Yapılan araştırmalarda mobil kullanıcılar, mobil cihazlardaki kötü deneyimi sinir bozucu olarak nitelendirmektedir. Ve bu da kullanıcıları farklı arayışlara yöneltmektedir. Duyarlı web tasarımlar; kullanıcıların bu kötü deneyimini sonlandırmak ve mobil kullanımı daha cazip hale getirmek için, bazı web tasarımcıları tarafından düşünüldü ve tasarlandı.

/* Akıllı Telefonlar İçin Yatay ve Dikey ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Stiller burada yer alacak */
}

/* Akıllı Telefonlar İçin Yatay ----------- */
@media only screen
and (min-width : 321px) {
/* Stiller burada yer alacak */
}

/* Akıllı Telefonlar İçin: Dikey ----------- */
@media only screen
and (max-width : 320px) {
/* Stiller burada yer alacak */
}

/* iPad'ler İçin Yatay ve Dikey ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Stiller burada yer alacak */
}

/* iPad'ler için Yatay ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Stiller burada yer alacak */
}

/* iPad'ler için Dikey ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Stiller burada yer alacak */
}

CSS-Tricks tarafından hazırlanan bu yapıda belirli cihazlar için nasıl CSS yazılabileceği gösterilmektedir. Böylece her cihaza uygun CSS özellikleri yazabilirsiniz.

Duyarlı web sitelerinin birçok avantajı olduğu gibi, dezavantajları da bulunmaktadır. Dilerseniz bu avantajlar ve dezavantajlara bir göz atalım.

Avantajları

  • Sayfa tasarımı açısından diğer tasarımlara göre daha kolay ve maliyeti düşüktür.
  • Sitenin bakımını daha kolay ve verimli bir şekilde yönetmenize yardımcı olacak araçlar vardır.
  • Arama motoru optimizasyonu için sitenizi optimize etmek basitleştirilmiştir. URL yapısı, içerik dizilimi, page rank ve diğer seo teknikleri kolay olacaktır.
  • Mobil cihazların ekran boyutlarını otomatik şekilde ayarlayarak sitenizi kullanıcı dostu yapar.
  • Mobil cihazlar için ayrı web sitesi ihtiyacı doğmayacağından, içerisinde veri toplamak için aynı URL yeterlidir.
  • Bir yapıyla tüm cihazlara erişim sağlanabildiğinden, güncelleştirmesi de kolay olacaktır.
  • Hata yapma oranını azaltır, hata durumunda müdahaleyi kolaylaştırır.
  • Farklı sitelere yönlendirmek gerekmez, bu size zaman kazandırır.
  • Hedef kitleniz, dönüşümünüz, kullanıcınızın sadakati artar. Hitlerinizde artış, gelirlerinizde artış demektir.
  • Siteye erişim probleminizi azaltır. Siteniz farklı bir içerik kaynağına ihtiyaç duymaz. Bu tür sorunların da önüne geçersiniz.

Dezavantajları

  • Duyarlı web tasarımlar medya sorgularına dayanır ve ne yazık ki bazı cihazlar ve tarayıcılar bu CSS ortam sorgularını desteklemez. Bu biraz zaman alabilir.
  • İmajlar, mobil cihazların ekran görüntüsüne uygun hale gelmeleri için yeniden boyutlandırılır. Resim boyutlandırma yüksek RAM ve CPU kullanımı gerektirir.
  • Kotalı internet kullanımında, optimize edilmeyen içerikler fazla kota tüketimine yol açabilir.
  • Sayfadaki HTML ve JS kodları kaldırılmadığı için sayfa cihazlarda daha yavaş yüklenir.
  • Duyarlı web tasarım yeni bir kavram olduğu için müşteriler tarafından bilinmeyebilir ve bu da tercih edilmeme sebebi olabilir.

Fes başıma

Son madde dramatik bir şekilde millet olarak bizi epey ilgilendiriyor esasında. Her yeni şeye çok çabuk ısınamayız biz. Hala 11 yıl öncesinin internet tarayıcısı IE6 kullanana rastlamak mümkün. Umarım bundan sonra web gelişmelerini daha yakından takip eder, web dünyasındaki gelişmeleri ayağımızda prangalarla takip etmek zorunda kalmayız.

Kısaca;

Duyarlı web tasarımının artılarını ve eksilerini maddeler halinde yazdıktan sonra görüyoruz ki artıları daha ağır basmaktadır. Eksiler daha çok, hız ve performans ile ilgilidir. Zamanla kullandığımız cihazlar daha çok teknolojiyi barındıracak ve dezavantaj dediğimiz şeyler de zamanla avantaja dönüşecektir.

Duyarlı web tasarım ile ilgili yazılarıma vakit buldukça ilerleyen zamanlarda devam etmeye çalışacağım.

Kaynaklar:

– http://elliotjaystocks.comresponsive-web-design-the-war-has-not-yet-been-won/

– http://desizntech.info/2012/12/the-pros-cons-of-responsive-web-designing/

– http://thepam.blogspot.com/2011/08/pros-and-cons-of-responsive-web-design.html