Perbedaan Desain Web Responsif dan Adaptive

Perancangan halaman website sebelum popularitas mobile phone muncul cenderung lebih mudah. Kita tahu saat ini hampir semua kegiatan explore internet dilakukan dari seperangkat mobile seperti baca berita dari smartphone, mengakses website kampus dan lain sebagainya dan membaca layaan e-book atau menonton video streaming dari tablet.

Tentunya hal ini berpengaruh pada suatu desain layout web. Jika dulu kita membuat halaman web untuk diakses melalui komputer dekstop, laptop dan sejenisnya. Saat ini kita harus memastikan bagaimana suatu halaman website dapat tampil dengan sempurna pada mobile device yang ukuran layarnya lebih kecil.

Seorang desainer web dalam merancang layout web tentunya berharap agar tampilan website tersebut dapat dibaca di berbagai perangkat mobile. Secara terminologi terdapat dua sebutan layout web yang dapat berjalan dengan baik di sisi perangkat mobile seperti : smartphone dan tablet yaitu :

• Responsive Web
• Adaptive Web

Apakah anda tahu perbedaan "Responsive Web" dan "Adaptive Web" ?

Responsive Web Design

Responsive Web Design adalah suatu teknik desain web yang akan menyesuaikan dengan ukuran layar dari suatu perangkat.

Dengan demikian halaman-halaman web akan menampilkan konten berdasarkan ruang browser yang tersedia. Ketika kita membuka halaman situs responsif di desktop dan kemudian mengubah ukuran jendela browser, konten akan bergerak secara dinamis untuk mengatur dirinya sendiri (setidaknya secara teori) secara optimal untuk jendela browser. Pada smartphone, proses ini berjalan otomatis; situs memeriksa ruang yang tersedia dan kemudian menampilkan layout sesuai ukuran layar smartphone tersebut.

Sumber :blog.hubspot.com/website/adaptive-design

Orang yang mencetus ide web design responsiv adalah seorang web developer yang bernama Ethan Marcotte. Dalam karangan bukunya yang berjudul "Responsive Web Design", desain responsif dapat merespons perubahan lebar browser dengan menyesuaikan penempatan elemen desain agar sesuai dengan ruang yang tersedia.

Adaptive Web Design

Adaptive Web Design adalah suatu rancangan web yang pengaturan layoutnya dibuat fix untuk beberapa ukuran layar yang paling umum digunakan.Ukuran layar yang dimaksud adalah lebarnya.

Jadi ketika kita mengakses halaman web pada smarphone yang lebar layarnya 320 px, maka layout web yang fix untuk ukuran 320 px akan diload. Bila diakses dari smartphone ukuran layar 960 px maka akan diload layout web yang sesuai ketika pada proses perancangan awal.

Dengan kata lain, seorang web designer harus merancang beberapa tampilan web untuk beberapa ukuran layar yang berbeda (ukuran layar yang umum dan banyak digunakan). Hal ini berbeda dengan "Responsive Web Design" yang hanya cukup membuat satu tampilan layout yang kemudian akan menyesuaikan dengan ukuran layar dari device yang digunakan.

Pada Adaptive Web Design, layout sangat bergantung pada ukuran layar yang digunakan sehingga dengan mempertimbangkan masing-masing ukuran ini, tata letak harus dirancang untuk itu. Biasanya, pengembang adaptif membuat fix layout untuk enam lebar piksel layar:

• 320
• 480
• 760
• 960
• 1200
• 1600

Desainer membuat tampilan berdasarkan enam ukuran layar diatas dengan fitur, tautan, dan fungsi untuk memastikan tersedianya desain web yang sesuai setiap kali pengunjung baru datang. Saat pengguna mengakses situs web , ukuran yang paling sesuai dipilih dan ditampilkan di perangkat pengunjung.

Responsive Web Design vs Adaptive Web Design

Berikut ini adalah keuntungan dan kerugian penerapan model desain web responsif dan adaptif seperti yang ditunjukkan oleh tabel di bawah ini :

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.

Sumber :socs.binus.ac.id

Kesamaan Desain Web Responsif dan Adaptive

Memang agak sulit membedakan sebuah website termasuk menerapkan model responsif atau adaptive. Karena pada struktur kode HTML dan CSS sama-sama menggunakan viewport meta tag dan CSS media query.

Penggunaan viewport meta tag

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1">
    …
  </head>
  …

Penggunaan CSS Media Query

@media screen and (max-width: 500px) {
  .module {
    width: 300px;
  }
}

Referensi

---

1. Desain Adaptif dan Desain Responsif, [online](https://socs.binus.ac.id/2016/12/28/desain-adaptif-dan-desain-responsif/)
2. Adaptive vs. Responsive Design, [online] (https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design)
3. Adaptive vs responsive web design,[online](https://uxplanet.org/adaptive-vs-responsive-web-design-eead0c2c28a8)