Perbedaan Antara Desain Adaptif dan Responsive

 

Ada sejumlah kesamaan antara kedua konsep desain adaptif dan responsive yang menyebabkan kebingungan di kalangan pengembang. Secara garis besar, kedua strategi desain tersebut digunakan untuk mengoptimalkan pengalaman penjelajahan web pengguna seluler dan desktop, dengan menyesuaikan tampilan elemen halaman web.

Desain situs web yang responsive dan adaptif secara virtual mengubah perilaku browser sesuai dengan perangkat yang digunakan oleh pengguna. Dalam panduan berikut, kami bertujuan untuk memberikan deskripsi komprehensif tentang kedua konsep tersebut, menggunakan contoh, dalam upaya menghilangkan sedikit kebingungan.

Kedua metode tersebut mengandalkan prinsip break point

Titik putus ditemukan di kedua kategori desain. Titik putus pada dasarnya terdiri dari sekumpulan aturan yang menentukan cara elemen laman web ditampilkan berdasarkan lebar layar umum perangkat. Aturan ini mungkin tampak sewenang-wenang, tetapi pada kenyataannya aturan tersebut ditentukan oleh lebar layar yang paling populer.

Contoh titik putus dan tata letak

Untuk memahami konsep ini dengan lebih baik, mari kita ambil 4 titik putus relatif: di bawah 778 piksel, antara 778 dan 992 piksel, antara 992 dan 1200 piksel, dan lebih dari 1200 piksel.

Batas lebar layar yang telah ditentukan sebelumnya ini memicu penataan kembali elemen halaman yang kurang lebih signifikan untuk mengakomodasi konten situs web. Hasilnya terdiri dari 4 tata letak jendela browser yang berbeda. Perlu diperhatikan bahwa nilai batasan dapat disesuaikan secara manual agar sesuai dengan popularitas berbagai perangkat seluler yang terus berubah.

Pertimbangan kompatibilitas

Menetapkan titik putus dimungkinkan berkat opsi bahasa CSS3 yang disebut sebagai kueri media. Meskipun opsi ini diterapkan di hampir semua browser baru, versi lama seperti IE 8 tidak memiliki dukungan untuk itu. Namun, ini adalah kemunduran minimal, mengingat situs web seluler umumnya dirancang untuk kompatibilitas dengan ponsel cerdas modern, 'phablet', dan tablet.

Modus operandi desain responsive

Desain Responsive bergantung pada penskalaan elemen halaman web yang dapat disesuaikan berdasarkan rasio yang Anda pilih untuk masing-masing. Mari kita asumsikan bahwa halaman terdiri dari 3 kolom berbeda, 1 kolom utama menempati 60% ruang dan 2 kolom sekunder berbagi 40% sisanya secara merata. Apa yang dilakukan desain responsif adalah mempertahankan proporsi ini saat dimensi layar berkurang.

Namun, bila ukuran tampilan sangat kecil, bahkan ruang 60% dari kolom utama akan membuat konten tidak dapat dibaca. Dalam kasus ini, pengembang harus menyetel kueri media yang memanfaatkan titik putus yang telah ditentukan untuk menghapus, menyembunyikan, atau memindahkan kolom sekunder dan mengizinkan kolom utama menempati posisi sentral dan luas di jendela browser.

Pendekatan standar adalah dengan 'memanjangkan' halaman di perangkat seluler layar kecil, dalam arti bahwa konten sekunder ditempatkan di bagian bawah konten utama. Sederhananya, saat lebar layar berkurang, halaman web menjadi lebih panjang.

Modus operandi desain adaptif

Inilah perbedaan utama antara kedua konsep tersebut: meskipun desain responsif adalah tentang penskalaan elemen, padanan adaptifnya terutama bergantung pada ukuran elemen tetap. Oleh karena itu, jika Anda memiliki halaman web yang menampilkan 3 kolom dimensi yang telah ditentukan, semuanya tidak akan diskalakan dengan dimensi layar sama sekali. Kolom akan terus menempati jumlah ruang yang sama, dan ketika titik putus tercapai, elemen terkunci pada posisi yang ditentukan berikutnya.

Garis bawah

Desain adaptif paling diuntungkan dari kategori perangkat tertentu, sedangkan desain responsif dapat dianggap sebagai pendekatan yang dapat digunakan secara keseluruhan. Intinya, situs web yang menggunakan desain adaptif dapat memperoleh manfaat penuh dari iPad Mini atau iPhone. 

Namun, ini kurang efektif dibandingkan dengan phablet seperti Samsung Galaxy Note atau Nokia Lumia 102.