Belajar RWD (Responsive Web Design) dalam 5 Menit
Membahas teknik RWD seperti Relative CSS Units, Media Query, dan Flexbox.
Pada artikel ini, kita akan belajar teknik RWD (Responsive Web Design) sebanyak mungkin dalam 5 menit.
Ini jelas tidak cukup untuk mempelajarinya dengan lengkap, namun cukup memberi kita gambaran penting tentang konsep RWD (Responsive Web Design), adapun yang dibahas sebagai berikut:
- Relative CSS Units.
- Media Queries
- Flexbox
- Responsive Typography
Jika ingin mempelajari lebih dalam ke pembahasan setelahnya, bisa mengunjungi tutorial The Responsive Web Design Bootcamp yang akan memungkinkan kita membuat web responsive secara profesional.
Tapi untuk sekarang, mari kita mulai belajar hal-hal mendasar.
Relative CSS Units.
Inti dari RWD adalah Relative CSS Units. Ini adalah units yang mendapatkan nilainya dari beberapa nilai external lainnya. Ini berguna karena memungkinkan, misalnya, lebar gambar harus berdasarkan pada lebar browser.
Yang paling umum adalah:
- %
- em
- rem
- vw
- vh
Pada artikel ini, kita akan mulai dengan unit persen %, dan kemudian kita akan melihat unit rem di bagian akhir.
Katakanlah kita memiliki website yang sederhana, seperti ini:
Kode HTML hanya seperti ini:
<body>
<h1>Welcome to my Website</h1>
<img src="img/img.png" alt="image" class="myImg">
</body>Seperti yang kita bisa lihat dari GIF di bawah, gambar kita secara default memiliki lebar yang tetap:
Ini tidak terlalu responsive, jadi mari kita ubah unitnya menjadi 70%. Kita hanya melakukan hal berikut:
.myImg {
width: 70%;
}Ini akan mengatur lebar gambar menjadi 70% dari lebar induknya yaitu tag <body>. Saat lebar tag <body>berubah, gambar akan selalu 70% dari lebar tag <body> sendiri.
Berikut hasilnya:
Betapa mudahnya membuat gambar yang responsive.
Media Queries
Menggunakan Media Queries untuk meningkatkan mobile experience.
Kita memiliki satu masalah pada layout kita, di mana gambar terlihat aneh pada layar kecil (read: mobile). Lebar 70% terlihat kecil ketika diakses dari mobile. Coba perhatikan:
Membuat tampilan yang lebih baik di versi mobile bisa menggunakan teknik Media Queries. Media Queries memungkinkan kita menerapkan style yang berbeda untuk setiap tampilan device, misalnya “Jika lebar layar kurang dari 768px, gunakan style yang berbeda”.
Berikut cara membuat media queries untuk versi mobile:
@media (max-width: 768px) {
.myImg {
width: 100%;
}
}CSS di atas hanya akan dijalankan ketika lebar layar kurang dari 768px (tampilan mobile).
Seperti yang kita lihat, website memiliki breakpoint untuk tampilan mobile di mana gambar tiba-tibe menjadi lebih luas pada halaman mobile. Ketika lebar browser kurang dari 768px, gambar akan berubah dari 70% menjadi 100%.
Flexbox
Menggunakan flexbox untuk membuat navbar.
Selanjutnya adalah Flexbox, kita tidak bisa belajar tentang RWD tanpa belajar tentang Flexbox. Flexbox mengubah konsep desain responsive ketika diperkenalkan beberapa tahun yang lalu, karena flexbox membuat website jauh lebih mudah untuk memposisikan element secara responsif di sepanjang sumbu.
Untuk praktik menggunakan Flexbox kita akan membuat navbar di atas title.
Berikut kode HTML:
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>Secara default, website akan terlihat seperti ini:
Semua item navigasi kita berada di sebelah kiri, di mana bukan itu yang kita inginkan. Kita ingin setiap item ditempatkan secara merata di seluruh halaman.
Untuk melakukan hal tersebut, kita perlu mengubah nav container menjadi flexbox, dan kemudian gunakan property ajaib justify-contentuntuk meratakan item.
Property display: flex;mengubah nav menjadi kotak flexbox, dan property justify-content: space-aroud; akan membuat item flex memiliki space (ruang) di antara item yang lain.
Jadi browser membagikan semua sisa space secara merata pada tiga item.
Berikut tampilannya:
Responsive Typography: rem
Langkah terakhir adalah membuat typography kita menjadi responsif. Kita ingin ukuran font navbar dan title mengecil ketika ukuran layar kurang dari 768px (menggunaka breakpoint media query).
Salah satu cara untuk melakukan ini adalah dengan mengurangi semua ukuran font di media query, seperti ini:
@media screen and (max-width: 768px) {
nav {
font-size: 14px;
}
h1 {
font-size: 28px;
}
}Tapi ini tidak ideal. Kita mungkin berakhir dengan beberapa breakpoints di aplikasi, dan juga memiliki banyak element (h2, h3, paragprahs, etc). Akibatnya, kita harus melacak semua elemen di semua breakpoint yang berbeda. Ini akan berantakan.
Jadi bagaimana jika ada cara yang dapat menyesuaikan satu faktor, dan membuat ukuran font akan relatif terhadap faktor itu?
Caranya gunakan REM.
REM pada dasarnya adalah: nilai dari font-size kita atur ke tag <html>. Seperti ni:
html {
font-size: 14px;
}Jadi, di halaman ini, 1 rem sama dengan 14px.
Itu berarti kita bisa mengatur semua ukuran font kita di website dalam unit rem, seperti ini:
h1 {
font-size: 2rem;
}nav {
font-size: 1rem;
}
Kemudian kita dapat mengubah nilai dari property font-size untuk tag <html> di media query:
@media (max-width: 768px) {
html {
font-size: 14px;
}
}Dan hanya seperti itu, kita memiliki breakpoint untuk seluruh font-size kita. Perhatikan bagaimana font-size berubah ketika lebar halaman kurang dari 768px:
Hanya lima menit, tapi kita telah belajar membuat font-size, images, item navbar menjadi lebih responsive.
Itu cukup bagus, dan kita telah mengambil langkah pertama untuk mempelajari skill yang berharga dalam membangun web responsive.
Jika tertarik mendalami RWD (Responsive Web Design), bisa mengunjungi kursus The Responsive Web Design Bootcamp. Itu Diajarkan oleh salah satu tutor youtube paling populer tentang masalah ini, dan akan membawa kita ke tingkat profesional dalam RWD.
Sumber
