Berita / Blog

Dalam web development dikenal istilah web responsif. Web responsif adalah sebuah rangkaian desain dan teknik pengembangan yang memungkinkan website untuk secara otomatis melentur, meregang, mengecil dan menyesuaikan diri agar tampilan bisa sesuai dengan ukuran layar tiap-tiap perangkat yang berbeda. 

Web responsif sangat penting karena ia memastikan pengguna bisa menikmati tampilan terbaik tidak peduli ukuran layar perangkat yang sedang digunakan. Penting untuk diketahui bahwa responsive web design sejatinya adalah satu website yang bisa dibuka dengan nyaman di versi desktop maupun mobile.

Banyaknya Jenis dan Ukuran Perangkat

Saat ini ada banyak tersedia gawai dengan jenis dan ukuran layar yang berbeda-beda. Kita mengenal laptop 14 inchi, 13 inchi, 11 inchi, 10 inchi, kemudian kita mengenal PC desktop dengan layar berukuran lebih besar yaitu 15 inchi hingga iMac 27 inchi, kemudian ada tablet berukuran 10 inchi, 9 ichi, 6 inchi, lalu smartphone dengan ukuran layar di kisaran 5 inchi hingga 6 inchi.

Beragam jenis gawai dengan ukuran yang berbeda-beda tersebut akan mempengaruhi bagaimana tampilan website jika dibuka di perangkat-perangkat tersebut. Pengembang website mungkin membuat website untuk tampilan PC ukuran 14 inchi, tapi ketika dibuka di smartphone dengan ukuran layar 6 inch, tampilan menjadi kacau balau.

Di sinilah responsive web design akhirnya muncul. Dengan adanya responsive design, para pengembang web cukup melakukan coding di satu tampilan website agar bisa dibuka dengan nyaman tanpa ada kekacauan tampilan bila dibuka di perangkat dengan ukuran layar yang berbeda.

Bagaimana Cara Kerja Web Responsif?

Bagi pengguna web, barangkali tidak terlalu penting untuk mengetahui cara kerja web responsif. Tapi, bagi para pengembang web, sangat penting untuk mengetahui bagaimana cara kerja web responsif agar bisa membuat sebuah web responsif.

Supaya lebih mudah untuk memahami, berikut ini kami lampirkan gambar yang kami ambil dari www.oneupweb.com mengenai cara kerja responsive web design.

Gambar di atas merupakan tampilan sebuah website di ukuran laptop/PC secara normal. Tampilan website pada intinya merupakan rangkaian elemen terpisah yang disusun dalam grid seperti gambar di atas. Elemen-elemen pada website diberi angka 1 — 7 dan diberi warna berbeda untuk memudahkan penjelasan.

Ketika website dibuka di perangkat dengan ukuran layar berbeda, maka elemen-elemen 1 — 7 tersebut harus tetap dipertahankan dan sesuai urutan, pada dasarnya mereka saling menempel satu dengan lainnya. Pada responsive web design, pengembang bisa membuat elemen-elemen tersebut lebih kecil atau lebih besar, mengganti warna, mengubah ukuran font, dsb. 

Bahkan, bisa juga ada elemen yang dihilangkan ketika dibuka di perangkat lebih kecil. Hanya saja, Anda tidak bisa mengubah urutan dari elemen-elemen tersebut. Lihat gambar berikut ini:

Dari gambar di atas ini, Anda bisa melihat bahwa ukuran dan bentuk dari blok-blok elemen yang diberi angka tersebut bisa berubah-ubah, tapi tidak dengan urutan blok tersebut.

Dan yang paling penting, sebagai pengembang Anda harus ikhlas jika tak semua konten bisa ditampilkan dalam satu ukuran layar yang kecil. Ketika mengembangkan website di desktop, Anda mungkin merasa puas dengan tampilannya yang sudah sangat sempurna dan konten-konten bisa ditempatkan dengan baik.

Akan tetapi, masalah muncul manakala Anda membukanya di tampilan mobile. Tidak semua konten bisa dimuat dengan sempurna di satu layar yang lebih kecil. Mungkin membutuhkan beberapa kali scroll layar handphone untuk bisa melihat keseluruhan isi konten website.

Prinsip-prinsip dalam Responsive Web Design

Setidaknya ada tiga prinsip utama dalam responsive web design, yaitu:

(1) Sistem Fluid Grid

Sebelum era internet, kita mengenal media cetak. Dalam media cetak, ukuran ditentukan secara absolut. Ketika internet hadir, tren tersebut berlanjut dan website ditentukan dalam ukuran piksel. 

Akan tetapi, pada responsive web design, ukuran absolut menjadi tidak bisa diterapkan. Maka dari itu digunakanlah ukuran relatif daripada ukuran absolut.

Untuk menemukan ukuran relatif, digunakan rumus matematika:

Target size / context = relative size

Misalnya, Anda sedang mengerjakan situs web dengan wrapper yang dirancang untuk menampilkan situs dengan lebar maksimum 960 piksel, sementara perangkat menggunakan lebar jendela browser maksimum 1280 piksel.

960 piksel adalah ukuran target dan konteksnya adalah 1280 piksel.

Sehingga:

960 / 1280 = 75%

(2) Penggunaan Fluid Image

Fluid Image adalah gambar yang diskalakan agar sesuai dengan kontainernya. Biasanya pengembang menggunakan command CSS sbb:

img { max-width: 100%;}

Command CSS kurang lebih memerintahkan browser untuk menampilkan gambar 100% dari nilai pikselnya dan harus diskalakan sesuai dengan kontainernya. Ini dilakukan untuk menghindari gambar menjadi stretch ketika kontainer menjadi lebih besar daripada gambarnya serta memastikan agar gambar menyusut mengikuti kontainer (dengan mempertahankan aspek rasio asli dari gambar).

(3) Media Queries

Kueri media dirancang untuk mengubah tata letak situs ketika kondisi tertentu terpenuhi. Kueri media memungkinkan website untuk mengambil data ukuran layar yang digunakan untuk menampilkan konten.

Referensi: 

1. www.oneupweb.com 
2. www.interaction-design.org

Business photo created by creativeart – www.freepik.com