Desain web seluler: responsif vs adaptif

2017 adalah tahun pertama dalam sejarah internet tempat lalu lintas situs web berasal smartphones dan tablet melebihi yang dari perangkat non-seluler di seluruh dunia. Mungkin tidak mengejutkan, angka ini meningkat lagi pada 2018 dan kemungkinan akan terus naik ke atas untuk beberapa waktu mendatang.

Untuk mencerminkan meningkatnya prevalensi traffic mobile, teknik dalam desain web harus bergeser secara substansial. Mesin pencari seperti Google telah mulai mengindeks versi mobile situs web, dan akan secara aktif menghukum situs web yang tidak kompatibel dengan layar yang lebih kecil. Akibatnya, lebih penting dari sebelumnya bagi bisnis untuk memiliki situs web yang dioptimalkan untuk seluler.

Dua metode utama pengoptimalan seluler dikenal sebagai desain web responsif dan desain web adaptif. Walaupun kedua metode memiliki tujuan yang sama, implementasi dan hasilnya dapat sangat berbeda.

Apa perbedaan antara responsif dan adaptif?

Beberapa proyek mungkin lebih cocok untuk desain web responsif, sedangkan yang lain akan lebih cocok dengan desain web adaptif. Tetapi bagaimana mereka membandingkan?

Pada dasarnya, perbedaan antara desain web responsif dan adaptif adalah pada fluiditas. Jika Anda menggunakan peramban web dan menyeret sudut untuk menyesuaikan ukuran jendela, catat apa yang terjadi pada konten halaman.

Jika teks, kotak, dan gambar diperkecil atau dikocok dengan lancar saat Anda mengurangi ukuran jendela, maka desainnya mungkin responsif. Namun, jika tidak ada yang berubah sampai Anda mencapai "titik lompatan" tertentu – di mana semuanya bergerak tiba-tiba bersama – maka desainnya kemungkinan besar adaptif. (Meskipun perlu dicatat bahwa desain web yang responsif juga dapat memiliki titik lompatan).

Desain web adaptif

Saat membuat situs web adaptif, pengembang biasanya akan membuat beberapa tata letak statis yang berbeda untuk halaman, dan memberi tahu situs web untuk memuat yang relevan berdasarkan resolusi atau ukuran layar halaman sedang dilihat. Misalnya, mungkin ada tata letak yang ditentukan untuk lebar layar 320 piksel, atau 960 piksel, atau 1200 piksel, dan sebagainya. Kemudian, pengguna melihat versi halaman yang dioptimalkan untuk perangkat yang berbeda jika mereka mengunjungi situs web pada iPad atau Google Pixel, atau pada PC desktop dengan monitor layar lebar.

Salah satu kelemahan dari metode ini adalah bahwa perangkat baru, dan dengan demikian ukuran layar baru, sedang dikembangkan dan dirilis terus-menerus – pikirkan saja berapa kali ukuran layar iPhone telah berubah selama bertahun-tahun. Dengan desain yang adaptif, Anda harus membangun tata letak baru untuk setiap perangkat individual, dan pekerjaan itu bertambah. Anda dapat memperkirakan tata letak yang dilayani sedekat mungkin dengan perangkat yang ada, tetapi hal itu membuat Anda terbuka untuk ketidaksempurnaan dan ketidakkonsistenan. Dan tidak ada yang menginginkan itu.

Desain web responsif

Solusi untuk masalah itu adalah membangun situs web dengan desain web yang responsif. Desain responsif dibangun dari satu tata letak, dan memperkecil (atau menaikkan) secara tepat berdasarkan resolusi perangkat melalui teknik seperti kueri media dan manipulasi CSS. Misalnya, Anda dapat membuatnya sehingga gambar pada halaman selalu memakan 30 persen halaman web, terlepas dari lebar layar, dan 70 persen lainnya juga berskala sesuai. Dengan cara ini Anda dijamin akan menangkap semua kemungkinan, dan melayani halaman web yang dioptimalkan untuk setiap perangkat individu.

Meskipun kedengarannya seperti banyak pekerjaan untuk merancang, katakanlah, enam atau tujuh tata letak individu dengan pendekatan adaptif, pendekatan responsif juga banyak pekerjaan karena Anda secara teoritis merancang tata letak tak terbatas untuk ukuran layar tak terbatas, dan itu membutuhkan keseluruhan lebih banyak pekerjaan kode – pada awalnya, setidaknya.

Salah satu faktor penting yang perlu diingat adalah bahwa begitu sebuah situs web berjalan dan berjalan, jauh lebih mudah untuk mempertahankan desain responsif daripada yang adaptif. Ini karena setiap perubahan pada konten situs yang responsif hanya perlu dilakukan untuk satu versi dan, jika implementasi berhasil, perubahan akan bekerja secara mulus di semua resolusi. Memperbarui desain adaptif adalah pekerjaan yang jauh lebih banyak, karena Anda harus memeriksa semua iterasi berbagai situs untuk memastikan bahwa tidak ada yang menembus seluruh tata letak Anda. Jadi, meskipun lebih banyak bekerja pada awalnya, upaya keseluruhan dari desain responsif diimbangi oleh berkurangnya kebutuhan untuk pemeliharaan yang berkelanjutan.

Retrofit vs mulai dari awal

Karena itu, jika Anda memulai situs web baru dari awal, desain web responsif biasanya merupakan pilihan yang lebih baik. Namun, jika Anda hanya ingin memperbaiki situs web yang ada dengan optimasi seluler, pendekatan adaptif lebih mudah diterapkan, dan Anda akan melihat banyak manfaatnya.

Jika Anda memiliki situs yang sudah ada dan ingin melakukan retrofit dengan pendekatan adaptif, sebaiknya lakukan audit perangkat untuk melihat perangkat mana yang paling populer di kalangan pengunjung Anda. Perangkat lunak seperti Google Analytics dapat menunjukkan kepada Anda perangkat mana yang digunakan untuk mengakses situs web Anda, memberi Anda dasar untuk mulai membangun tata letak khusus perangkat Anda.

Perlu diingat bahwa sebagian besar perusahaan hosting sekarang menawarkan layanan pembuatan situs web DIY di mana Anda dapat membangun situs web dengan hanya memilih dari satu dari banyak template dan menyeret dan menjatuhkan komponen ke tempatnya. Jika Anda cukup beruntung untuk membangun situs baru, tetapi belum memiliki anggaran untuk situs web yang dibuat secara profesional dulu, layanan ini adalah tempat yang tepat untuk membuat situs baru berjalan dan berjalan dengan cepat. Terlebih lagi, template mereka biasanya selalu responsif, sehingga semua kerja keras telah dilakukan untuk Anda.

Responsif vs adaptif: metode apa yang harus Anda gunakan?

Pada akhirnya, metode yang ideal akan sampai pada kasus penggunaan individu. Jika Anda memulai situs web dari awal, pertimbangkan pendekatan responsif dari solusi pembangun situs web perusahaan hosting, atau pekerjakan pengembang untuk membuatkan Anda sesuatu yang benar-benar unik. Jika Anda hanya mencoba membuat situs web Anda saat ini berfungsi pada layar yang lebih kecil, pendekatan adaptif mungkin merupakan pendekatan yang paling pragmatis untuk Anda.

Neal Thoms, manajer kampanye, Fasthosts