5 Tips Berguna untuk Membuat Layout Responsif

Bayangkan Anda telah melakukan semua kerja keras untuk membuat tata letak yang sangat keren. Tapi kemudian, ketika Anda membuat jendela browser Anda sedikit lebih kecil, Anda menemukan sesuatu yang meluap. Anda memasukkan kueri media untuk memperbaiki masalah ini. Tetapi setelah mengubah ukuran jendela, Anda melihat ada sesuatu yang rusak.

Ini adalah sesuatu yang akan dialami sebagian besar pengembang CSS pada satu titik. Namun untungnya, kami memiliki beberapa solusi CSS modern yang membuatnya jauh lebih mudah untuk mengembangkan berbagai hal dan membuatnya bekerja dengan baik. Artikel ini mengeksplorasi 5 praktik berguna yang perlu diingat saat mengembangkan situs web. Kiat-kiat ini akan membantu Anda menghindari jeda yang mengganggu dalam desain Anda.

1. Mulailah Dengan Lembar Gaya Global

Selalu mulai dengan gaya global saat menulis CSS. Jangan khawatir tentang tata letak. Sebagai gantinya, tetapkan gaya umum seperti tipografi, warna, dan latar belakang. Setel ulang margin, hapus garis bawah dari tautan, dan seterusnya.

Baca Juga:

Mau Berkarir di Dunia blockchain? Ini Dia 10 Skill yang Harus Kamu Dalami!

Setelah Anda selesai dengan penataan gaya umum, Anda kemudian dapat mulai membuat tata letak dan menargetkan setiap elemen dalam tata letak. Pada dasarnya, mulailah dari atas dan kemudian pindah ke elemen.

Contoh CSS berikut mengatur ulang margin pada semua elemen menjadi 0, menentukan tipografi dan warna semua judul utama, dan menambahkan margin yang konsisten untuk semuanya:

 body,
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  color: blue;
  font-family: "Verdana" sans-serif;
  font-weight: 900;
  line-height: 1;
}
h2,
h3,
p {
  margin-bottom: 1rem;
}
 

Sekarang setelah Anda menentukan semua gaya dasar, Anda dapat membangun dari sana. Misalnya, Anda dapat menambahkan padding ke elemen container. Ini akan mendorong konten menjauh dari tepi browser Anda. Kemudian Anda dapat menerapkan a max-width ke gambar, sehingga mereka dapat beradaptasi dengan lebar penampungnya. Intinya adalah memulai dari elemen umum sebelum menargetkan elemen tertentu.

Sekali lagi, tata letak akan responsif. Jadi saat Anda mengubah ukuran layar, ukuran elemen juga akan berubah. Sebagai pengembang, Anda harus mengetahui tip dan trik CSS ini karena dapat meningkatkan produktivitas Anda ke tingkat berikutnya.

2. Hindari Ukuran Tetap

Saat Anda mulai memikirkan tata letak, hal pertama yang harus Anda ingat adalah menghindari ukuran tetap. Ukuran tetap mengacu pada properti seperti lebar: 1000px, tinggi: 200px, dan seterusnya. Menetapkan tinggi atau lebar tetap hanya akan menyebabkan masalah bagi Anda dalam jangka panjang.

Sebagai gantinya, gunakan tinggi dan lebar yang dapat disesuaikan. Salah satu caranya adalah dengan menggunakan min-tinggi Dan min-lebar alih-alih tinggi Dan lebar. Misalnya, Anda mengatur lebar elemen menjadi 600px. Ketika Anda lebih kecil dari 600px, maka konten akan meluap:

Sebagai gantinya, Anda harus mengubah properti dari lebar ke max-width. Dengan max-width, elemen akan diizinkan menyusut saat jendela browser dipersempit. Dan jika jendela menjadi lebar, teks akan melebar kembali ke panjang aslinya. Inilah hasilnya:

Ini sama untuk tinggi. Misalnya, Anda mengatur tinggi dari header ke nilai tetap 200px.

 header {
  height: 200px;
  display: grid;
  place-items: center;
}
 

Ini memusatkan semua yang ada di header dengan sempurna. Namun saat Anda mempersempit jendela browser, konten pada akhirnya akan mengalir keluar dari wadahnya. Dan ini karena Anda menetapkan ketinggian tetap pada header.

Umumnya, tinggi Dan lebar keduanya sifat berbahaya. Solusinya adalah dengan menggunakan tinggi dan lebar yang dapat disesuaikan yaitu, min- Dan tinggi maksimalDan min- Dan max-width. Dalam kasus ini, jika browser mengalami situasi di mana konten menjadi lebih panjang, maka header akan tumbuh untuk beradaptasi dengan itu.

Ini adalah salah satu kesalahan CSS paling umum yang harus Anda hindari.

3. Ingatlah Bahwa Situs Web Anda Responsif Secara Default

Ingatlah bahwa situs web Anda responsif bahkan sebelum Anda menulis satu baris kode CSS. Pola pikir ini dapat membantu Anda menghindari proses desain yang terlalu rumit. Tata letak akan bekerja pada layar besar dan layar kecil. Mungkin tidak cantik. Bahkan mungkin sulit untuk membaca di layar besar. Tetapi situs web beradaptasi dengan area pandang terlepas dari ukurannya.

Tentu saja, gambarnya bisa meluap, dan teksnya mungkin terlalu kecil. Tapi Anda tidak akan kehilangan apapun dengan tata letak default. Teks Anda tidak akan pecah, dan semua elemen akan terlihat di layar.

Memahami dan menerima fakta ini dapat sangat membantu saat Anda menulis kode CSS. Saat Anda mengalami masalah, Anda akan yakin bahwa kesalahan berasal dari CSS yang Anda tulis. Ini membuatnya lebih mudah untuk menemukan masalah dan memperbaikinya.

Coba gunakan kueri media hanya untuk menambah kerumitan. Misalnya, saat Anda ingin tata letak memiliki tiga kolom di layar yang lebih besar. Jika tidak, jangan gunakan mereka. Untuk mendalami kueri media, baca panduan kueri media kami.

Inilah satu skenario. Bayangkan elemen dengan nama kelas .membelah memiliki tiga elemen di dalamnya. Dengan CSS berikut, tata letak tiga kolom akan dibuat:

 .split {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}
 

Di layar yang lebih kecil (40em lebar atau kurang), Anda ingin semuanya menempati satu kolom. Jadi Anda akan melakukan ini:

 @media(max-width: 40em) {
  .split {
    display: block;
  }
}
 

Di sini, Anda mengganti perataan default (tiga kolom). Tetapi kueri media tidak diperlukan karena browser menggunakan tampilan: blok secara default. Jadi Anda tidak perlu mendefinisikannya secara eksplisit.

Dengan mengingat hal itu, Anda dapat memfaktorkan ulang kode Anda untuk menggunakan kueri media tunggal yang hanya berlaku untuk layar besar. Di sana Anda akan beralih ke tiga kolom saat layar lebih lebar dari 40em:

 @media(max-width: 40em) {
  .split {
    display: flex;
    flex-direction: row;
    gap: 2rem;
  }
}
 

Di layar kecil, browser menumpuk semuanya dalam satu kolom. Tetapi Anda tidak harus menentukannya karena menggunakan browser tampilan: blok secara default. Jadi, Anda hanya menggunakan kueri media untuk menambah kerumitan.

Jadi, alih-alih menambahkan kerumitan dan kemudian harus mengganti sekumpulan properti, Anda sekarang menambahkan kerumitan saat Anda membutuhkannya. Sebagian besar waktu, Anda hanya perlu min-lebar pertanyaan media. Mulailah dengan seluler dulu, lalu saat situs terlihat bagus di seluler, tambahkan kompleksitas (mis. kolom) untuk versi desktop.

5. Manfaatkan CSS Modern

Dengan menggunakan pendekatan CSS modern, Anda dapat menghindari sebagian besar masalah penyelarasan dan breakpoint dan beralih ke pencapaian desain intrinsik.

Salah satu cara yang dapat Anda lakukan adalah:

h1 { font-size: clamp(3rem, 1rem + 10vw, 7rem)}

Ini menjepit h1 antara ukuran font minimum dan maksimum. Yang terkecil yang kita inginkan adalah 3rem dan yang tertinggi adalah 7rem. Bagian tengah adalah apa yang akan kita ulangi (1rem + 10 vw). Akibatnya, judul akan secara otomatis menyusut saat viewport semakin kecil dan tumbuh saat semakin besar.

Pelajari Lebih Lanjut Tentang CSS Modern

CSS telah banyak berkembang selama bertahun-tahun. Hari ini kami memiliki pendekatan yang lebih baru dan lebih baik untuk memposisikan elemen di CSS. Dalam artikel ini, kami menyentuh beberapa praktik ini dan menyoroti bagaimana praktik tersebut dapat membantu Anda menghindari jebakan desain yang umum. Salah satu cara terbaik untuk mempelajari CSS modern adalah melalui pendekatan langsung, seperti menggunakan CSS modern untuk mendesain tabel HTML.