Responsive ve Adaptive Tasarım Arasındaki farklar nelerdir?

Bu makale Burhan KARADERE ‘nin yorumu ile web teknolojisindeki responsive ve adaptive arasındaki farkları anlatmaya yöneliktir. Fakrlı ihtiyaçlara da ne zaman hangi doğru seçimi yapmanıza umarız kılavuz olabilir.

Merhabalar gelişen internet teknolojilerinden son 3 yıldır konuşulan konu web 3.0 ve ençok ta HTML 5  web programlama dilindeki büyük gelişmeler ve akabindeki CSS3 ve javascript framework (jquery, angulerjs, nodejs vs) kütüphanelerinin genişlemesi .

Web teknolojilerindeki bu gelişmelerden dolayı, artık elimizde birçok amaca çözüm üreten frameworkler (yazılım paketleri, componentler bileşenler) mevcut. Tasarım için bootstrap gibi , jquery programlama dinamiği için en popüler kullanılan yazılım IDE (framework, component,library) lerinde kendini kanıtlamıştır. Responsive  tasarımı aslında tüm html objelerin ekran boyutuna göre otomatik sığdırması diyebiliriz. ve bir adımda ötesi çoklu menulerin mobile sitede akıllı mobile menu tasarımına dönüşmesidir.  Yani site tasarımı akıllıca tüm ekranlar için tarayıcı tarafında anında yani nesnelerin ekran boyutuna göre akıllı bir değişimi söz konusudur.

Adaptive de ise verdiğiniz ölçüler korunur ve dışına çıkılmaz  ama aşağıdaki similasyonun olduğu siteyi incelediğinizde sanki sadece sağ ve soldaki boşlukların adaptive olduğunu anlatıyor.

Tam anlamanız için konuyu biraz açıyorum . her şey ihityaçlara göre çıkar ?neden çıktı bu tasarım mimarileri ?

web 3.0 en başlı tahmin edilemeyen gelişimi mobil dünya kullanımının hızla artması oldu. artık sadece pc desktop – masaüstü veya notebook – dizüstü bilgisayarlar yok hayatımızda mobil – mobile cep telefonları tabletler dende ciddi internet sitelerine giriş aramalar işlemler yapılıyor .

işte webin ihtiyacı üç platform (desktop, mobile, tablet) üç farklı ölçüye sahip tasarımı site demek işte bunu ilk çözdüğümüz yöntemin adı aslında adaptive design adındanda anlaşılacağı gibi adapte olmak  sitenizin cihaza adepte olması gibi düşününe bilir siniz.

Peki nasıl  oluyor bu adaptasyon  ?

Üç platform için ayrı ayrı web siteleri yapılıyor mesela desktop.domain.com  mobile.domain.com  tablet.domain.com

domain.com  hangi cihazdan girerseniz serverdaki otomatik agent kontrol kodu siteyi desktop lamı mobile mi yoksa tabletlemi gezdiğinizi agent tan algılıyor.  ona gore ilgili siteye yönlendiriyor (mobile.domain.com gibi) o sitedeki tasarımda o cihaz için uyumlu adaptive tasarım olduğundan kullanıcıya cihaz ile uyumlu bir sitede gezinerek daha hızlı ve kolay kullanım imkanı buluyor işte adaptive  mantığı için en az iç farklı site tasarımı lazım aslında aynı siteyi üç kere design tasarlamak ve programlamak gerekli dememiz daha doğru olur.

Responsive bu işin neresinde ?

Adaptive anladığımıza göre responsive ise adaptive için harçanan tüm eforu daha aza indirme fikrinden doğan tek site tek tasarım tek programlama kodu ile tüm üç platform için uyumlu çalışabilen tasarımı nasıl yaparız sorusunun cevabını veren felsefe ile başlayan web tasarım programlama mimarisidir.

Tek site ile tüm platformlarda web sitenizdeki tüm html element objelerin tüm görsellerin tüm menülerin tablet ile girildiğinde tablet ekranına göre uyumlu mobile cep telefonu ile girildiğinde ise daha uyumlu hale getirmesidir.  Responsive ile zaman performans ve parasal harcamalarda da adaptive göre kazanç vardır.  Ve sitenin güncelliği içerik yönetiminde de birden fazla (üç platform için) güncelleme yerine tek güncelleme ile tüm platformlarda güncelleme efor ve maliyet kolaylığı da sitenizin sürdürülebilirliğindeki maliyet karlılığı sağlamaktadır.

Benim favorim Response tasarımdır . hatta ben daha ileri gidip native mobile uygulamayada gerek olmadığını responsive bu işide çözdüğünü düşünüyorum burada tabiki uygulamanın amacı hardware – donanımsal fonksiyonlar ile çok fazla haşır neşir olmayacak ise. web olmalı uygulamalarda responsive ile sorunsuz çalışır.

Şimdi hep şu soru var responsive mi yok sa responsive i yi seçmeliyiz ?  Hangi tasarım daha başarılı ?

Aslında her şeyi bu resim anlatıyor 🙂

Responsive tasarım örneği

Responsive ekran örnek görünüm similasyonu

Adaptive tasarım örneği

Kaynaklar : 

http://www.liquidapsive.com/  adresinde konuyu canlı gösteren bir çok tasarım similasyonu mevcut.

diğer kaynaklar : http://www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-web-design/