Responsive Web Design: Rahasia Website Cantik di HP dan Laptop

Halo Sobat Jurnal Coding! Kemarin, kita sudah merayakan keberhasilan merilis website pertamamu ke internet menggunakan GitHub Pages. Kamu pasti sudah sangat bangga membagikan tautan tersebut ke grup WhatsApp keluarga atau teman-teman nongkrongmu.

Namun, beberapa menit kemudian, temanmu membalas dengan sebuah tangkapan layar (screenshot) dari HP-nya. Di foto tersebut, website yang sudah kamu buat susah payah ternyata terlihat sangat hancur berantakan! Tombolnya saling bertumpuk, teksnya keluar dari layar, dan pengunjung harus menggeser layar ke kanan dan ke kiri hanya untuk bisa membaca artikelmu.

Kepanikan pun melanda. Apa yang salah dengan kodemu? Mengapa di laptop terlihat sangat rapi, tetapi di HP terlihat seperti kapal pecah?

Jawabannya sederhana: Kamu mendesain website tersebut khusus untuk layar besar. Komputer tidak tahu bagaimana cara melipat atau mengecilkan elemenmu secara otomatis jika kamu tidak mengajarinya. Di sinilah kamu wajib menguasai ilmu paling penting di era mobile saat ini, yaitu Responsive Web Design (Desain Web Responsif).

### Filosofi Air di Dalam Gelas

Mendiang legenda bela diri Bruce Lee pernah berkata, "Jadilah seperti air. Jika kamu menuangkan air ke dalam cangkir, ia menjadi cangkir. Jika kamu menuangkannya ke dalam botol, ia menjadi botol."

Prinsip itulah yang persis kita gunakan dalam mendesain website modern. Sebuah website harus memiliki sifat elastis seperti air. Jika dibuka di monitor 24 inci, website akan melebar menyajikan banyak informasi sekaligus. Namun jika dituangkan ke dalam layar HP 6 inci, elemen-elemen website tersebut tidak boleh hancur, melainkan harus menyusut, merapat ke tengah, dan turun ke bawah secara berurutan.

### Mantra Sakti Pertama: Tag Viewport

Sebelum kita masuk ke CSS, ada satu baris mantra HTML yang sering kali dilupakan oleh pemula. Mantra ini wajib diletakkan di dalam ruangan pada file HTML kamu. Tanpa baris ini, sekuat apa pun kode CSS kamu, HP akan tetap menganggap website kamu adalah versi laptop yang dipaksa mengecil.



Kode di atas memberi instruksi tegas kepada browser HP: "Tolong sesuaikan lebar halaman ini persis dengan lebar perangkat yang sedang menggenggamnya, dan jangan lakukan zoom-out paksa!"

### Media Queries: Membelah Dimensi Ruang dan Waktu

Sekarang kita masuk ke sihir utamanya. Di dalam file CSS, kita bisa menciptakan "dimensi alternatif" menggunakan fitur yang bernama Media Queries (@media).

Fitur ini bertindak seperti seorang Satpam Pengecek Layar. Kita bisa memberikan instruksi: "Hei CSS, gunakan warna latar hitam dan teks berukuran besar secara normal. TETAPI, JIKA lebar layar pengunjung menyempit dan berada di bawah 600 pixel (seukuran HP), tolong ubah teksnya jadi lebih kecil agar muat!"

Mari kita lihat wujud kodenya:



Sangat magis, bukan? Jika kamu menjalankan kode di atas di komputermu, coba kecilkan jendela browser Google Chrome-mu secara perlahan. Saat lebar jendela menyentuh angka 600 pixel, kotak tersebut akan tiba-tiba berubah warna dari biru menjadi merah, dan ukurannya melebar memenuhi layar!

Di dunia industri, kita biasanya mengubah elemen yang tadinya berdampingan di laptop (kiri dan kanan), menjadi bertumpuk atas-bawah saat berada di HP menggunakan Media Queries ini. Tentu saja, untuk mengatur tumpukan elemen dengan rapi, kita butuh satu teknologi CSS tingkat tinggi lainnya. Penasaran? Mari kita bahas di artikel selanjutnya!