Di dunia digital saat ini, pengguna cenderung melihat situs web dari berbagai perangkat yang tak terhitung jumlahnya, mulai dari ponsel pintar dan tablet hingga desktop layar besar. Pengalaman yang konsisten dan dioptimalkan di setiap perangkat bukanlah kemewahan yang disediakan situs web Anda, tetapi merupakan keharusan mutlak. Dan itulah yang membuat kita berbicara tentang Desain Web Responsif (RWD). Desain Web Responsif (RWD) memungkinkan situs web untuk mengubah tata letak, merespons, dan beradaptasi dengan ukuran, resolusi, dan orientasi layar. Kemampuan beradaptasi tersebut dimungkinkan oleh CSS (Cascading Style Sheets). Berikut ini adalah cara menggunakan CSS dan menguasai desain web responsif untuk situs web Anda, apa pun perangkat yang digunakan untuk mengaksesnya.
Desain web responsif
Desain Web Responsif (RWD) adalah pendekatan dalam menata dan mengkodekan situs web sedemikian rupa sehingga situs web tersebut memberikan pengalaman tampilan yang optimal, kemudahan membaca dan navigasi dengan minimal pengubahan ukuran, menggeser, atau menggulir di berbagai perangkat mulai dari desktop hingga ponsel. Dengan kata lain, tujuan utama memiliki desain responsif adalah untuk memastikan bahwa tidak akan ada situasi di mana Anda - sebagai perancang atau pengembang harus membuat dua salinan situs web: satu untuk seluler dan satu lagi untuk desktop. Sebaliknya, situs web ditampilkan berdasarkan layar yang dilihatnya yang berarti konten Anda tampil dengan baik terlepas dari ukuran perangkat.
CSS dalam Desain Web Responsif
Desain responsif dibangun di atas pundak CSS. Seorang pengembang dapat menggunakan properti CSS untuk membuat tata letak yang dapat diskalakan, gambar akan menunda penskalaan di mana pun diperlukan dan mencegah elemen ditampilkan jika melebihi lebar tertentu. Dalam blog ini, kita akan melihat teknik dan alat CSS inti untuk desain responsif.
1. Kisi-kisi dan Tata Letak yang Cair
Situs web standar juga menggunakan tata letak lebar statis yang luar biasa bagi mereka yang menggunakan PC, tetapi kurang cocok untuk perangkat seluler. Di mana fluid grids, berbasis persen, bukan berbasis piksel dan akan selalu mengecilkan atau meregangkan konten agar sesuai dengan layar pengguna.
Salah satu contoh dari perubahan tersebut adalah, katakanlah Anda menentukan lebar (dalam persentase) pada wadah selain menggunakannya dengan nilai piksel yang tetap:
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
Di sini, wadah akan menggunakan 90% lebar layar pada perangkat yang lebih kecil tetapi tidak akan melebihi 1200px pada layar yang lebih besar, untuk mempertahankan keterbacaan dan kegunaan.
2. Gambar yang Fleksibel
Masalah yang sering terjadi pada gambar dalam desain responsif adalah gambar yang memenuhi wadahnya pada layar yang lebih kecil. Gambar fleksibel, yaitu gambar yang dapat melar atau menyusut berdasarkan ukuran viewport adalah masalah umum yang ditangani CSS.
Aturan CSS yang diberikan di bawah ini membantu kita untuk menjaga agar gambar tetap proporsional di dalam wadah induknya:
img {
max-width: 100%;
height: auto;
}
Aturan ini menjaga gambar tetap berada dalam lebar wadahnya dan mencegah gambar melebar melampaui dimensi aslinya.
3. Kueri Media
Kueri media mungkin merupakan alat yang paling ampuh dalam CSS untuk desain responsif. Mereka memungkinkan para pengembang untuk mengatur gaya khusus berdasarkan lebar, tinggi, resolusi, dan bahkan orientasi perangkat. Kita dapat membuat situs web responsif menggunakan kueri media dan menyelamatkan kita dari memiliki banyak basis kode.
Kueri media dasar:
@media screen and (max-width: 768px) {
.container {
width: 100%;
padding: 10px;
}
}
Kueri media ini menerapkan gaya yang ditentukan hanya jika lebar layar 768 piksel atau lebih kecil, yang umum digunakan pada tablet atau smartphone. Kueri media dapat digunakan untuk menyesuaikan font, tata letak, bilah navigasi, dan lainnya, tergantung ukuran layar.
4. Tag Meta Viewport
Sangat penting untuk menyertakan tag meta viewport, karena tag ini memastikan bahwa situs responsif Anda akan ditampilkan dengan baik di perangkat seluler. Jika Anda tidak menggunakan tag ini, maka browser seluler umumnya akan merender situs dalam versi desktop dengan memperkecil konten situs yang menyulitkan pengguna untuk berinteraksi.
Meta tag ini akan membantu Anda melakukan penskalaan dengan benar:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Karena tag viewport memberi tahu browser untuk menampilkan situs berdasarkan ukuran layar aktual dan tingkat zoom awal perangkat mereka, tag ini memungkinkan situs web untuk mematuhi aturan CSS tertentu secara lebih efektif di seluruh perangkat.
5. Tipografi Responsif
Tipografi responsif menyesuaikan ukuran font berdasarkan ukuran layar, memastikan keterbacaan pada layar kecil dan besar. Unit CSS rem dan em biasanya digunakan untuk tipografi yang dapat diskalakan karena relatif terhadap elemen root atau induk.
body {
font-size: 1rem; /* Scales with the root element */
}
h1 {
font-size: 2.5rem; /* 2.5 times the base font size */
}
Untuk kontrol yang lebih baik, kueri media juga bisa digunakan untuk menyesuaikan ukuran font pada perangkat yang berbeda.
@media screen and (max-width: 600px) {
body {
font-size: 0.9rem;
}
}
Kesimpulan
Dalam pengembangan web modern, kemampuan untuk membuat situs web yang memberikan pengalaman yang luar biasa di semua perangkat adalah keterampilan yang sangat penting dan hanya dapat dicapai berkat Desain Web Responsif dengan CSS. Kisi-kisi yang mengalir, gambar yang fleksibel, kueri media, dan tipografi yang responsif membantu membuat situs web untuk perangkat apa pun. Pengembang web perlu mengetahui dasar-dasar CSS ini karena kita memiliki berbagai macam perangkat, dan faktor bentuk yang beragam. Oleh karena itu, setiap front-end harus menguasai setidaknya yang satu ini dengan margin yang baik mengenai browser yang digunakan saat ini.
