Saat ini ketika mengakses sebuah website, kita akan menemukan berbagai macam perasaan dan pengalaman, mulai dari perasaan dan pengalaman menjengkelkan, membuat marah, frustasi, sampai kepada perasaan atau pengalaman yang baik seperti menyenangkan, dapat dinikmati, menghibur, memotivasi, menolong, lucu dan beberapa perasan positif yang lainnya.

Bagimana membuat sebuah website begitu menyenangkan ketika dikunjungi, sangat menghibur, mudah diakses, dan tentu saja memberikan pengalaman-pengalaman yang lainnya yang baik buat penggunanya.  Tentu saja, pertama-tama website tersebut haruslah minimal memenuhi syarat minimal kegunaan atau usability, seperti efektif, efisien, dan aman ketika digunakan, mempunyai kegunaan yang baik, mudah dipelajari dan mudah diingat (Rogers, Sharp, & Preece, 2012).

Pengalaman yang buruk yang timbul saat mengakses sebuah website seringkali ditimbulkan oleh layout yang buruk dan tulisan yang terlalu kecil, disamping faktor-faktor lain desain interaksi yang diabaikan. Pengembang software seringkali kesulitan dalam merancang desain sebuah halaman website, pengembang diperhadapkan dengan berbagai resolusi komputer mulai dari layar komputer yang berukuran raksaksa sampai kepada ukuran sebuah smart watch, serta kegunaan dan keanekaragaman layar perangkat mobile.

Sekarang ini pengembang mulai mencari cara untuk menjembatani berbagai peralatan komputer, konsep yang muncul ada dua: adaptive desain atau responsive desain. Perbedaan antara pendekatan desain responsif dan adaptif menjadi sorotan penting bagi pengembang web dan aplikasi desainer.

Ada sebuah konsep yang baik yang layak untuk diterapkan dalam merancang sebuah web atau aplikasi, yaitu: “Jadikanlah kontent itu seperti air, air ketika menempati sebuah tempat berupa cangkir air akan berbentuk cangkir, ketika menempati sebuah botol air akan berbentuk botol, dan ketika menempati sebuah teko, air akan berbentuk teko, jadikan konten layaknya sebuah air”.

Antara pendekatan response dan adaptif desain ada perbedaan yang dianggap samar jika tidak berpengalaman dalam berbagai gaya desain, namun keduanya mememiliki perbedaan yang jelas ketika kita melihatnya lebih dekat.

Desain Responsif

Istilah desain Responsif pertama kali diciptakan oleh desainer web dan pengembang Ethan Marcotte dalam bukunya, Responsif Web Design. desain responsif menanggapi perubahan lebar browser dengan menyesuaikan penempatan elemen desain agar sesuai dengan ruang yang tersedia.

Sebuah situs web responsif menunjukkan konten berdasarkan pada ruang browser yang tersedia. Jika Anda membuka situs responsif pada desktop dan kemudian mengubah ukuran jendela browser, konten akan bergerak dinamis untuk mengatur dirinya sendirisecara optimal untuk jendela browser. Pada ponsel, proses ini otomatis; situs memeriksa ruang yang tersedia dan kemudian menyajikan dirinya dalam pengaturan yang ideal.

Desain Adaptif

Adaptif Desain Web diperkenalkan pada tahun 2011 oleh web designer Aaron Gustafson dalam bukunya, Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement. Hal ini juga dikenal sebagai peningkatan progresif dari sebuah situs web.

Ketika sebuah desain responsive bergantung kepada perubahan desain yang sesuai dengan perubahan bentuk yang tersedia saat itu, desain adaptif memiliki berbagai ukuran tata letak tetap. Ketika situs mendeteksi layar ruang layar yang tersedia, maka situs akan memilihkan setting tata layar yang tepat perangkat anda, perubahan ukuran browser tidak akan berpengaruh besar pada perubahan layout layar. Biasanya desain adaptif ini diterapkan pada versi mobile website. Pada perangkat mobile desainer akan mengubah tata letak untuk versi mobile dan menyediakan desain masing-masing untuk layar yang berbeda. Adalah lumrah dalam desain adaptif seorang desainer mengembangkan enam lebar layar yang paling umum, yaitu 320, 480, 760, 960, 1200, 1600 pixel, dan akan terus berkembang sesuai dengan resolusi layar yang dikembangkan produsen perangkat mobile.

Memilih antara desain response atau adaptif

Kedua pendekatan tersebut memiliki kelebihan dan kekurangan, yang menjadi pertimbangan pengembang untuk memilih pendekatan mana. Kelebihan dan kekurangannya dapat dilihat pada tabel dibawah ini:

Tabel 1.0 Keuntungan dan kerugian pendekatan responsif dan adaptif

 

Tipe desain

 

Keuntungan

 

Kerugian
Desain responsive Mudah dikerjakan, dan mudah dalam implementasinya Kadang layanan iklan yang muncul tidak dapat masuk ke layar yang kecil.
  Bentuk seragam dari setiap tampilan layar File gambar yang didownload ukurannya tidak fleksibel, kerugian mengunduh file besar untuk layar yang kecil.Unduh lebih lama
  Mendukung SEO lebih baik Elemen dapat bergerak
  Memiliki banyak template yang bisa diunduh Kurang kontrol pada desain ukuran layar.
Desain adaptif

Desain yang sengaja disesuaikan dengan target user (layar besar atau kecil) memberikan keuntungan bagi user, menjadikannya semakin user friendly.

Memungkinkan desainer untuk membangun UX terbaik untuk perangkat yang sesuai.

 Pembuatan website dan implementasi lebih susah dikerjakan. Biasanya ada 6 setting untuk setiap halaman yang dibuat.
  Kecepatan download menjadi lebih cepat, terutama untuk perangkat mobile yang memiliki keterbatasan kecepatan internet, perangkat mobile cukup mendownload sesuai dengan setting perangkat mereka, tidak perlu mendownload versi desktop, memberikan user experience yang baik. Menempatkan user pada resolusi setting yang ditengah, kadang menyebabkan user yang berada resolusi yang tertinggi dan terendah akan mengalami user experience yang tidak begitu baik. Developer harus mampu mengantisipasi perkembangan teknologi.
  Perangkat mobile dapat merasakan lingkungan pengguna mereka. Kesulitan setting untuk perangkat tablet yang berada ditengah desktop dan perangkat mobile.
  Perangkat mobile dapat merasakan lingkungan pengguna mobile Tantangan buat menejer SEO untuk mengoptimalisasi websitenya.

Silahkan rekan-rekan pengembang untuk memilih pendekatan desain yang sesuai dengan proyek anda.

Referensi

Jerry, C. (2016). Responsive vs. Adaptive Design: What’s the Best Choice for Designers. (J. Cao, Editor) Retrieved December 2016, from Studio by UxPin: https://www.uxpin.com/studio/blog/responsive-vs-adaptive-design-whats-best-choice-designers/

Rogers, Y., Sharp, H., & Preece, J. (2012). Interaction design: beyond human-computer interaction (3rd ed.). Chichester, West Sussex, United Kingdom: John Wiley & Son Ltd.

Uzayr, S. b. (2013, September 19). RESPONSIVE VS. ADAPTIVE DESIGN. Retrieved from Torque: https://torquemag.io/2013/09/responsive-design-vs-adaptive-design/