Önceki bloğumuzda detaylıca bahsetmiş olduğumuz Responsive tasarımları bu bloğumuzda Adaptive tasarımla karşılaştıracağız.
Responsive ve Adaptive nedir, responsive ve adaptive benzerlikleri nelerdir, responsive ve adaptive farkları nelerdir ve responsive ve adaptive performans farkı gibi başlıklar altında inceleyeceğiz. Ancak öncelikle “Responsive Tasarım Nedir?” bloğumuzu okuyarak detaylı bilgiye sahip olmanızı tavsiye ederim.
Responsive Nedir?
Kısaca responsive mobil, tablet ve geniş çözünürlükteki cihazlardan siteye giriş yapılması dahilinde çözünürlüğe göre tasarımın oluşmasına olanak sağlamaktadır. Tek bir tasarımla tüm çözünürlüklere uyumlu bir site oluşturulmuş olur. Responsive tasarım aslında Adaptive tasarım ve Liquid tasarım kullanılarak şekillendirilmiş kodlama yapısını oluşturmaktadır.
Kullanıcı deneyimi açısından yüksek memnuniyet sağlayan responsive tasarımlar ayrı ayrı Css kodlaması yapılabileceği gibi Css frameworkleri (Bootstrap, Materializecss, PureCSS) kullanılarak da sitenizi oluşturmanıza olanak sağlar.
Adaptive Nedir?
Masaüstü ve mobil için ayrı ayrı tasarımlar yapmamızı sağlar. Belirtilen çözünürlüğe küçülene kadar yapısı bozulmadan site elementlerinde aşamalı bir şekilde değişim sağlar. Mobil ve tabletlerde 100% çözünürlük avantajı sağlamaktadır. Liquid ve Responsive tasarımlar çözünürlük bazlı çalışırken, Adaptive tasarım komple site elementlerinin boyutlarında değişim sağlayabilir, ekstra alanlarda oluşturulabilmektedir.
Adaptive genellikle daha önceden oluşturulmuş bir web sitesinin mobile uyarlanması aşamasında kullanılmaktadır. Bu durumda farklı viewportlar için şablonlar geliştirilir. Başarılı bir tasarım için 320px, 480px, 760px, 960px, 1200px, 1600px çözünürlüklerine göre optimize edilmiş en az 6 adet tasarım şablonu oluşturulmalıdır.
Responsive ve Adaptive Benzerlikleri Nelerdir?
Aslında her ikisi de birbirine oldukça yakın kavramlardır. Kullanılan cihazın çözünürlüğünü baz alarak o çözünürlüğe göre ayarlama prensibine sahiptir. İki tasarım modeli de kullanıcılara rahat, kolay bir kullanım sunmayı amaçlar.
Responsive ve Adaptive Farkları Nelerdir?
Responsive ve Adaptive arasındaki en büyük fark responsive tasarımların esnek olmasıdır. Responsive akışkan bir yapıya sahipken Adaptive kesin çizgiler içerisindedir. Responsive tasarımlarda %’lik değerler kullanılırken Adaptive tasarımlarda px tarzında ölçülendirme birimleri kullanılır. Bu sebeple responsive tasarımlarda geçişler daha yumuşakken, Adaptive tasarımlarda daha keskindir.
Responsive ve Adaptive Performans Farkı
Performans farklarını incelediğimizde responsive bu konuda sınıfta kalacaktır. Çünkü responsive her ekrana uyumlu olmasını sağlamak amacıyla kodlama aşamasında fazla yük taşır. Adaptive tasarımlarda böyle bir durum söz konusu değildir. Çünkü her şablon için ayrı ayrı html ve css kodu kullanılır. Bu durumda responsive tasarıma oranla daha az yük taşımasından kaynaklı performans olarak responsive tasarımları geride bırakacaktır. Kısacası Adaptive tasarımlar performans açısından responsive tasarımlara oranla 2 kat daha performans sağlar.
Hoş çakalın,
Weeb Tasarım Blog Ekibi
