Apa itu Desain Responsif?

Belum lama berselang, para desainer tidak perlu khawatir tentang tampilan situs web di ponsel dan tablet. Telepon belum benar-benar praktis untuk melihat web, dan sebelum iPad, tablet lebih merupakan hal baru daripada yang penting.

Jelas, semua itu telah berubah, dan sebagian besar pakar teknologi memperkirakan bahwa dalam beberapa tahun ke depan, mungkin lebih cepat daripada nanti, penelusuran seluler akan mengambil alih penjelajahan desktop sebagai cara dominan untuk melihat Web.

Dengan berbagai ukuran layar dan perangkat yang terus berkembang, termasuk konsol video game dan TV Internet, cara lama desain web tidak lagi sesuai dengan tugas. Dan dengan bisnis yang menyadari kebutuhan untuk mengoptimalkan pengalaman online mereka untuk pengguna seluler, desainer yang tidak beradaptasi akan tertinggal.

Catatan editor: Berikut ini adalah pengantar pemula untuk desain responsif yang tidak ditujukan untuk desainer web yang lebih berpengalaman.

Komponen Utama Desain Responsif

Di situlah Desain Web Responsif masuk, konten dan/atau tata letak yang secara otomatis menyesuaikan dengan ukuran layar yang dilihat. Pada dasarnya, tiga elemen utama Desain Responsif adalah kisi fleksibel, gambar fleksibel, dan Kueri Media, yang terakhir diperkenalkan sebagai bagian dari CSS3. Lebih lanjut tentang itu sebentar lagi.

Grid Fleksibel

Kisi fleksibel pada dasarnya adalah tema dan templat di mana elemen desain ditetapkan dalam persentase, bukan piksel. Dengan persentase sebagai satuan ukuran, itu berarti bahwa elemen yang dirancang pada 50% akan selalu menempati setengah dari layar, tidak peduli seberapa besar atau kecil layarnya.

Gambar Fleksibel

Pada dasarnya, gambar fleksibel tidak bisa lebih mudah dibuat dengan menulis aturan sederhana yang menyatakan:

 img { max-width: 100%; }

Pada dasarnya, ini berarti bahwa jika suatu elemen lebih besar dari wadahnya, aturan memaksanya untuk mencocokkan lebar wadah itu. Dan karena browser modern mengubah ukuran gambar secara proporsional, rasio aspek gambar juga dipertahankan. Terlebih lagi, aturan 100% juga dapat digunakan untuk hampir semua elemen lainnya, seperti video yang disematkan.

Kueri Media

Sejak pengenalan Jenis Media di CSS 2.1, lembar gaya telah jauh lebih inklusif untuk perangkat seluler dan lainnya. Jenis Media pada dasarnya memungkinkan penataan untuk menargetkan kelas perangkat web tertentu, dengan jenis tersebut termasuk perangkat genggam, layar, dan tv. Namun dengan sedikit standarisasi antar perangkat dan sedikit dukungan dari produsen perangkat, Jenis Media tidak pernah memenuhi potensinya.

Kueri Media memenuhi potensi itu dan kemudian beberapa. Namun alih-alih memperhatikan jenis perangkat seperti yang dilakukan Jenis Media, Kueri Media melihat kemampuan perangkat sebagai gantinya.

Media Query sederhana mungkin terlihat seperti ini:

Dua komponen kueri adalah jenis media, ditetapkan sebagai layar, lalu kueri aktual – (max-device-width: 480px) – yang pada dasarnya menanyakan apakah lebar perangkat 480 piksel atau kurang. Jika demikian, perangkat akan memuat generic.css. Jika tidak, tautan akan diabaikan, seperti yang lainnya, hingga resolusi yang benar diidentifikasi dan lembar gaya yang sesuai dimuat.

Lebih Dari Sekedar Resolusi

Namun resolusi bukanlah satu-satunya elemen desain yang dapat dikontrol melalui penggunaan Media Queries. Lebar dan tinggi jendela browser, orientasi lanskap dan potret, bahkan tata letak, adalah beberapa parameter lain yang dapat diatur.

Misalnya, jika Media Query mendeteksi bahwa perangkat adalah ponsel cerdas, desain yang mungkin memuat memperlihatkan tiga kolom dengan area teks dan dua bilah sisi vertikal di layar komputer mungkin dimuat di layar ponsel cerdas sebagai area teks lebar penuh dengan dua bilah sisi sebagai elemen horizontal di bawahnya.

Pola Pikir yang Fleksibel

Tentu saja, persyaratan utama untuk desain yang fleksibel adalah desainer dengan pola pikir desain yang fleksibel. Sayangnya, sebagian besar halaman web masih belum begitu ramah di perangkat seluler, terutama karena sebagian besar desainer biasanya masih mendesain hanya untuk desktop dengan smartphone dan tablet sebagai renungan. Beberapa desainer mendekati desain dengan mempertimbangkan banyak platform.

Meskipun ada kurva pembelajaran dalam menggabungkan Kueri Media ke dalam lembar gaya, transisi dari mendesain dengan piksel ke mendesain dengan persentase yang menghentikan beberapa desainer web. Namun pada kenyataannya, tidak ada banyak perbedaan dalam mendesain dengan persentase, dan ini juga lebih mudah.

Pertimbangkan, misalnya, perbedaan antara menetapkan lebar 100% dan 100 piksel ke dua elemen identik. Dalam satu, Anda dapat yakin bahwa elemen akan memenuhi layar, apakah itu layar desktop, laptop, atau iPhone. Tetapi elemen dengan lebar 100 piksel akan menjadi besar pada layar iPhone 480 piksel tetapi relatif kecil pada layar desktop dengan resolusi 1600x900.

Desain Responsif Berarti Bisnis

Untuk bisnis, alasan utama untuk menerapkan desain responsif sudah jelas. Semakin mudah bagi calon pelanggan untuk menavigasi dan menemukan apa yang mereka cari, semakin tinggi tingkat konversinya. Tetapi bagi banyak desainer, desain responsif untuk situs web bisnis biasanya berarti hanya mengecilkan ukuran konten agar sesuai dengan layar yang lebih kecil. Siapa pun yang menghabiskan waktu menggulir dan memperbesar dan memperkecil untuk menemukan informasi yang mereka cari tahu bahwa versi mini situs web bukanlah jawabannya.

Cara lain bisnis dan desainer telah menangani masalah perancangan untuk perangkat seluler adalah dengan membuat situs terpisah untuk perangkat yang berbeda dengan pengalihan otomatis sesuai dengan perangkat. Ini memungkinkan antarmuka terbaik disediakan serta menghindari pemuatan lambat yang disebabkan oleh JavaScript dan gambar besar.

Tetapi ada beberapa kelemahan dari pendekatan ini. Tentu saja, salah satunya adalah biaya untuk membuat dan memelihara banyak situs dan mengoordinasikan konten di seluruh situs tersebut. Dan, tentu saja, masih ada situs baru yang akan dibangun saat perangkat baru keluar. Untungnya, Desain Responsif, jika dilakukan dengan benar, dapat mengatasi hampir semua masalah dalam mendesain untuk perangkat seluler.