Adaptive vs Responsive Web Tasarım

Adaptive vs Responsive Web Tasarım

Responsive ve adaptive tasarım yaklaşımları arasındaki farklar, web ve uygulama tasarımcıları olarak bizim için önemli seçenekleri vurgulamaktadır. Sezgi ile seçim yapmak tasarımlarınızı daha iyi amaç ve sonuçlarla planlamanıza ve yürütmenize yardımcı olabilir.

Mobil cihazların yaygınlaşması ve çeşitliliği ile birlikte web tasarımcı olarak bizler çok çeşitli ekran boyutları ile karşı karşıya kalmaktayız. Günümüzde tüm web tasarımcı ve yazılımcıların karşılaştığı bir mücadeledir bu. Günümüzde devasa şirket montörlerinden tutunda akıllı saatlere kadar pek çok cihazdan online olarak içeriğe erişim sağlanmaktadır. Cihazlar arasındaki boşluğu kapatmak isteyen tasarımcıların tasarımları için iki seçeneği var: Adaptive tasarım ve responsive tasarım.

Responsiveı tasarım ile adaptive tasarım arasındaki fark konusunda belli bir miktar kafa karışıklığı vardır. Stil veya tasarım tecrübesi olmayanlar için bu fark oldukça bulanıktır. Ancak yakından dikkatlice bakıldığında bu farklar oldukça nettinr.

Responsive ( duyarlı ) Tasarım

Responsive tasarım ilk olarak web tasarımcı ve yazılımcı olan Ethan Marcotte’nin kitabında icat edildi. Responsive tasarım tarayıcı genişliğine duyarlıdır. Tarayıcı genişliğindeki değişikliklere göre elementleri kullanılabilir boşluğa göre yeniden düzenler.

Responsive web sitesi tarayıcıdaki boşluğa göre içeriği en iyi şekilde göstermeye çalışır. Eğer tarayıcıda bir responsive web sitesini açar ve tarayıcının boyutunu değiştirirseniz, İçerik dinamik olarak hareket edecektir ve tarayıcıdaki kullanılabilir alana görene kendini yeniden uyarlıyacaktır. Mobil telefonlarda bu süreç otomatik olarak işlemektedir, web sitesi kullanılabilir alanı denetler ve en iyi şekilde kendini sunar.

Responsive tasarım basit bir mantığa dayanmaktadır.

Akışkan olduğu için, kullanıcıların çevrimiçi dünyanıza erişebilecekleri ve avuçiçi cihazlarında devasa bir monitörde olduğu kadar keyfini çıkarabilecekleri anlamına gelir.

Bunun doğru olması için, duyarlı tasarım, sitenin çok iyi bir şekilde kavramsallaştırılmasını ve son kullanıcıların ihtiyaçları ve istekleri hakkında derin bir bilgi birikimi gerektirir!

Adaptive ( Uyarlanabilir ) tasarım

Adaptive tasarım 2011 yılında web tasarımcısı olan Aaron Gustafson tarafından kitabinda tanıtıldı. Uyarlanabilir Web Tasarımı: Aşamalı Geliştirme ile Zengin Deneyimler Hazırlama. Bir web sitesinin aşamalı olarak geliştirilmesi olarak da bilinir.

Responsive tasarım kullanılabilir içeriğin geçerli alana uyarlanması prensibine göre çalışırken, adaptive tasarım birden fazla katmana sahiptir. Site kullanılabilir alanı tespit ettiğinde ekran için en uygun olan katmanı seçer. Özet olarak masaüstünüzde bir tarayıcı açtığınızda site ekranınız için en iyi katmanı seçer ve onu gösterir. Tarayıcının boyutunun değiştirilmesi tasarım üstünde bir etki yaratmaz

Bazı siteler adaptive tasarım kavramını çabucak kucakladılar. Amazon, USA Today, Apple, and About.com kendilerini mobil iyileştirilmiş siteler olarak uyarladılar. Adapti tasarımı kullanan bir sitede moıbil arayüz masaüstü arayüzden tamamen farklı olabilir. Ancak bunun nedeni, tasarımcıların kendini yeniden düzenlemeye çalışmak için tasarımdan ayrılmak yerine telefonun ekranı için farklı bir düzen seçmiş olmalarıdır.

Adaptive tasarımda 6 farklı çok kullanılan ekran genişliği için ( 320, 480, 760, 960, 1200, 1920 ) 6 faklı katman geliştirmek çok normal birşeydir.

Bağımsız Mobil Tasarım

Ayrıyeten bir seçenek daha vardır oda sadece mobil site geliştirmek. ( bunlar genellikle url’nin önüne m. Takısı alırlar ) Bu seçenek bir zamanlar mükemmel bir seçimdi. Tasarımcılar, özel bir format için öğeleri ve düzeni ayarlayarak mobil cihazlar için siteler oluşturacaktı. Google, arama motoru sıralamalarını mobil sitelere verdi, ancak bugün aynı tercihler uyarlanabilir ve duyarlı sitelere veriliyor.

Mobil site oluşturmanın arkasındaki en büyük zorluk iki web sitesini de eşdeğer tutabilmek için olağan üstü bakım çalışması gerekmektedir. Bunu yapmak için özel bir teşvik olmadan, yalnızca mobil tasarım son zamanlarda gözden düştü. Yakın zamanda da geri gelecekmiş gibi durmuyor.

Adaptive ve Responsive Tasarım Arasında Seçim Yapmak

Responsive tasarım daha kolaydır ve daha az zaman alır. Çeşitli ekran genişliklerinde web sitesinin yerleşiminde daha az olanak sağlar. Ancak gene de günümüzde uzak ara en çok tercih edilen yöntemdir. Bunun, WordPress gibi İçerik Yönetim Sistemlerinin (CMS) çoğunluğu için mevcut olan çok sayıda ucuz şablonla da ilgisi olabilir. Sonuçta kim tekerleği yeniden icat etmeyi isterki.

Responsive tasarımcılar bir tane tasarım yaparlar ve bunu tüm ekran genişlikleri için kullanırlar ve genellikle oranca çözünürlükten başlarlar ve daha küçük ve daha büyük çözünürlüklere bunu uyarlarlar. Bunu kullanıcıları memnun etmek için yaparlar, çünkü farklı ekran genişliklerinde aynı tasarımı görmek kullanıcılar açısından daha kolay bir kullanım sağlamaktadır. Tekdüzelik ve kusursuzluk, iyi bir kullanıcı deneyimi sağlamada çok önemli hususlardır.

Görsel hiyerarşiyi göz önünde bulundurmak responsive tasarım için oldukça önemlidir; öğeleriniz ekranda karışırken bunu korumaya çalışmak istersiniz. Bu da demektir pek çok ekran genişliği için pek çok test gereklidir. Eğer sitenin tasarımı göreceli olarak basitse, bu durum farklı ekran çözünürlükleri arasında geçiş yapacaktır ve bir sıvının bir kaptan diğerine geçiş yapması gibi davranacaktır.

Görünüşe göre responsive tasarım kullanım açısından güçlü sebeplere sahip ama şunları da akılda tutmak lazım.

  • Web siteniz cihazdan cihaza bir sıvı gibi akacağından sitenize yerleştirdiğiniz reklamlar bu uyumu sağlayamayabilirler. Aniden, duyarlı tasarım kullanılarak sunulan "kısayol" biraz yeniden düşünmeye ve çalışmaya ihtiyaç duyabilir.
  • Downlad süresi mobil ve masaüstü cihazlarda değişkenlik gösterebilir. Görüntülerin esnekliği burada büyük bir husustur. Evde veya ofiste büyük ekranda hızla ortaya çıkan büyük bir tasarımın cep telefonunuzda görünmesi daha fazla zaman (ve veri) gerektirir. Mobil sürüm için daha küçük bir önizleme daha iyi olabilir mi?

Kullanılan cihazın ekran genişliği ne olursa olsun adaptive tasarım en iyi kullanıcı deneyimini sağlayacaktır. Bir ekranın masaüstü tasarımından daha küçük bir cihaza "aktığı" duyarlı tasarımın aksine, uyarlanabilir tasarım kişiye özel çözümler sunar. Adından da anlaşılacağı gibi kullanıcının ihtiyaçlarına ve kapasitesine göre uyum sağlar. Tasarımcı olarak kullanıcıya örneğin bir mobil cihazda kullanıcının ihtiyaçları için ayarlamalar yaptığımızı tasarımı dokunmatik dostu yaparak gösterebiliriz. Bu arada aynısını masaüstü kullanıcıları için de yapabiliriz. Tasarımcı olarak en düşük çözünürlükten sitenin yapımına başlarız ve daha üst çözünürlüklere doğru gideriz. 6 tasarım günümüzde standarttır ancak kullanıcının ve kendi ihtiyaçlarımıza göre bunu arttırabiliriz.

Uyarlanabilir tasarımın gücü, modern kullanıcı deneyimiyle daha alakalı hissettirmesidir, duyarlı tasarım ise daha masaüstü merkezli bir yaklaşım gösterir. Kullanıcılar olarak, akıllı cihazlarımızla daha çok dışarıdayız. Cihazlarımızın bizim ne yapmaya çalıştığımızı anlaması hissetmeyi severiz. Gündelik yaşamdan bir örnek verelim, uzun bir tünelden geçerken GPS ekranın kendi parlaklığını otomatik ayarlaması güzel olmaz mıydı? Bu bağlama dayalı performans ve kullanılabilirlik güven vericidir ve aynı zamanda akıllı cihazınızın uyum sağlayacak ve ekstra kullanışlı olacak kadar akıllı olduğunu onaylar.

Aynı zamanda site içindeki reklamlarınızı da kullanıcının cihazına göre ayarlamanıza da olanak sağlar. Çünkü tasarımcı olarak farklı ekran çözünürlükleri için farklı tasarımlar yapıyorsunuzdur, kullanıcının spesifik ihtiyaçlarına uygun tasarımlar yapabilirsiniz. Diyelim ki bir akıllı telefondaki sensörlerin karmaşıklığı, şirketlerin (ve biz tasarımcıların) kullanıcılarımız hakkında her zamankinden daha fazla bilgi sahibi olmasını sağlıyor. Bir kullanıcı favori bir mağazaya, restorana, spor salonuna vs. sık sık gider - orada check-in yaparak bir profil oluşturur. Bundan (kişiselleştirme olarak da bilinen davranışsal hedefleme), ince ayarlanmış reklamlar tasarlayabiliriz.

Diğer bir avantaj ise araştırmalar adaptive tasarıma sahip bir şirketin hız testlerinde responsive tasarıma sahip bir şirketten daha önde olduğunu gösteriyor. Bu öyle küçük bir fark da değil, adaptive siteler responsive sitelerden 2-3 kat daha hızlı çalışmaktadırlar.

Adasptive tasarım bazı güçlü avantajlara sahiptir. Bununla beraber tasarım oyununda en iyi kullanıcı deneyimini sağlamak ve en iyi çözümleri sunabilmek için işimize biraz zaman ayırıp seçeneklerimizi incelemeli ve kullanıcılarımızdan gelen geri bildirimleri dikkate almalıyız.

Adaptive tasarımın dez avantajları da vardır. İlk olarak responsive tasarıma göre çok daha fazla iş yüküne sahiptir. Bu nedenle, uyarlanabilir tasarımların çoğu, birden fazla cihazda kullanılmasına izin vermek için mevcut siteleri güçlendirmek için kullanılır. O halde, ilk iş, geleneksel siteleri daha fazla cihaza erişmelerine izin vererek güncel hale getirmek gibi görünüyor.

İkinci olarak, adaptive tasarım bazı kullanıcıları yüzüstü bırakabilir. Tablet ve notebook kullanıcıları açıkta kalabilir çünkü tasarımcı sadece masaüstü ve mobil versiyonlar üzerinde çalışmıştır. Böyle durumlarda kullanıcıya versiyonlar arasında geçiş yapabileceği bir link bırakmak elzemdir.

Son olarak, arama motoru botları ".com" siteleriniz ile "m .com" sitelerinizi ayırt etmek için isabetleri eleme ve sıralama konusunda daha iyi hale gelirken, mevcut durumu kabul etmek akıllıca olacaktır. Çoğu arama motoru, aynı içeriği birden çok URL üzerinden eşit olarak sıralamaz. Bu da demek oluyor ki adaptive tasarımın sizi SEO konusunda geride bırakabileceğini göz önünde tutmanız gereklidir.

Bu nedenle, şu anda responsıve tasarım için kesin bir tercih olsa da, bütçeniz varsa adaptive tasarımı göz ardı etmeyin.