Belajar CSS Responsive: Biar Website Nyaman Dibuka di HP

1. Apa Itu Responsive Web Design?#

Responsive Web Design adalah pendekatan membuat tampilan website yang dapat menyesuaikan diri dengan ruang yang tersedia pada perangkat pengguna.

Misalnya, kita mempunyai tiga kartu artikel.

Pada layar laptop yang lebar, ketiganya bisa ditampilkan berdampingan.

1
DESKTOP
2

3
+---------------------------------------+
4
|                                       |
5
|  +---------+ +---------+ +---------+  |
6
|  | Artikel | | Artikel | | Artikel |  |
7
|  |    1    | |    2    | |    3    |  |
8
|  +---------+ +---------+ +---------+  |
9
|                                       |
10
+---------------------------------------+

Namun, ketika dibuka melalui HP, ruangnya jauh lebih sempit.

Daripada memaksakan tiga kartu tetap berdampingan, kita bisa menyusunnya ke bawah.

1
MOBILE
2

3
+-----------------+
4
|                 |
5
|  +-----------+  |
6
|  | Artikel 1 |  |
7
|  +-----------+  |
8
|                 |
9
|  +-----------+  |
10
|  | Artikel 2 |  |
11
|  +-----------+  |
12
|                 |
13
|  +-----------+  |
14
|  | Artikel 3 |  |
15
|  +-----------+  |
16
|                 |
17
+-----------------+

Kontennya tetap sama. Yang berubah hanyalah cara kita menyusunnya.

Inilah salah satu tujuan responsive design: menyesuaikan tampilan tanpa mengorbankan kenyamanan membaca dan menggunakan halaman.

2. Kenapa Website Bisa Melebar di HP?#

Ada beberapa penyebab umum.

Misalnya, kita membuat container dengan lebar tetap:

1
.container {
2
  width: 1000px;
3
}

Ketika layar pengguna lebih sempit dari 1000 piksel, container tersebut tetap berusaha menggunakan lebar yang sudah ditentukan.

Akibatnya, halaman bisa melebar dan memunculkan scroll horizontal.

Contoh lain adalah gambar:

1
img {
2
  width: 800px;
3
}

Jika gambar tersebut berada di dalam area yang lebih sempit, ukurannya bisa melebihi ruang yang tersedia.

Untuk mengurangi masalah seperti ini, kita bisa mulai menggunakan ukuran yang lebih fleksibel.

1
.container {
2
  width: 100%;
3
  max-width: 1000px;
4
}

Dengan kombinasi tersebut, container dapat mengikuti lebar area induknya, tetapi tidak melebihi 1000 piksel.

Untuk gambar:

1
img {
2
  max-width: 100%;
3
  height: auto;
4
}

Aturan ini membantu gambar menyusut ketika ruangnya terbatas tanpa merusak perbandingan aspek aslinya.

Perlu diingat, gambar bukan satu-satunya penyebab overflow. Teks panjang tanpa pemisah, elemen dengan min-width besar, dan padding yang tidak diperhitungkan juga bisa menimbulkan masalah.

3. Mengenal Viewport#

Sebelum mengatur responsive design, ada satu hal penting yang perlu kita periksa pada HTML.

Di dalam elemen <head>, tambahkan:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Apa fungsinya?

Secara sederhana, viewport adalah area yang digunakan browser untuk menampilkan halaman.

Pada browser mobile, meta viewport tersebut membantu membuat lebar layout mengikuti lebar perangkat dalam CSS pixel, dengan skala awal yang normal.

Tanpa konfigurasi viewport yang sesuai, browser mobile tertentu dapat menggunakan layout viewport yang lebih lebar lalu mengecilkan tampilan halaman.

Akibatnya, teks dan elemen bisa terlihat sangat kecil.

Jika kita menggunakan struktur HTML dasar dari series sebelumnya, bagian <head> kira-kira menjadi seperti ini:

1
<head>
2
  <meta charset="UTF-8">
3
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
4
  <title>Profil BapakGabut</title>
5
  <link rel="stylesheet" href="style.css">
6
</head>

Meta viewport tidak otomatis membuat website responsive.

Kita tetap perlu menulis CSS yang mampu menyesuaikan layout.

4. Mengenal Media Query#

Sekarang kita sampai pada salah satu fitur penting CSS Responsive, yaitu media query.

Media query memungkinkan kita menerapkan aturan CSS ketika kondisi tertentu terpenuhi.

Misalnya:

1
.kotak {
2
  background-color: lightblue;
3
}
4

5
@media (max-width: 600px) {
6
  .kotak {
7
    background-color: lightgreen;
8
  }
9
}

Artinya:

• Secara default, kotak menggunakan warna biru muda.
• Ketika lebar viewport 600 piksel atau kurang, warnanya berubah menjadi hijau muda.

Coba ubah ukuran jendela browser dan perhatikan kapan warnanya berubah.

Media query tidak hanya digunakan untuk warna. Kita bisa memakainya untuk mengubah layout, ukuran teks, jarak, atau properti CSS lainnya.

Angka 600px pada contoh tersebut bukan aturan wajib.

Kita memilih breakpoint berdasarkan kebutuhan layout, bukan semata-mata berdasarkan merek atau ukuran perangkat tertentu.

5. Desktop First dan Mobile First#

Ada dua pendekatan yang sering dibahas ketika membuat responsive design.

1
.kartu {
2
  width: 600px;
3
}
4

5
@media (max-width: 600px) {
6
  .kartu {
7
    width: 100%;
8
  }
9
}

1
.kartu {
2
  width: 100%;
3
}
4

5
@media (min-width: 768px) {
6
  .kartu {
7
    width: 600px;
8
  }
9
}

6. Praktik: Membuat Kartu Profil Responsive#

Pada artikel Flexbox sebelumnya, kita sudah membuat kartu profil BapakGabut.

Foto berada di sebelah kiri, sedangkan nama dan deskripsi berada di sebelah kanan.

Layout tersebut cocok untuk layar yang cukup lebar.

Namun, bagaimana jika kartu dibuka melalui HP?

Kita akan membuatnya berubah menjadi susunan vertikal pada layar sempit dan horizontal pada layar yang lebih lebar.

1
<!DOCTYPE html>
2
<html lang="id">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Profil Responsive BapakGabut</title>
7
  <link rel="stylesheet" href="style.css">
8
</head>
9
<body>
10
  <main class="halaman">
11
    <article class="kartu-profil">
12
      <img
13
        src="foto-profil.jpg"
14
        alt="Foto profil BapakGabut"
15
        class="foto-profil"
16
      >
17

18
      <div class="informasi-profil">
19
        <h1>BapakGabut</h1>
20
        <p>Ngoding, main game, dan ngulik apa saja.</p>
21
        <a href="#artikel">Lihat Artikel</a>
22
      </div>
23
    </article>
24

25
    <section id="artikel" class="bagian-artikel">
26
      <h2>Artikel Pilihan</h2>
27
      <p>Tempat berbagi cerita dan pembelajaran.</p>
28
    </section>
29
  </main>
30
</body>
31
</html>

1
* {
2
  box-sizing: border-box;
3
}
4

5
body {
6
  margin: 0;
7
  font-family: Arial, sans-serif;
8
  line-height: 1.6;
9
  color: #1f2937;
10
  background-color: #f1f5f9;
11
}
12

13
.halaman {
14
  width: 100%;
15
  max-width: 1000px;
16
  margin: 0 auto;
17
  padding: 16px;
18
}
19

20
.kartu-profil {
21
  display: flex;
22
  flex-direction: column;
23
  align-items: center;
24
  gap: 20px;
25

26
  padding: 24px;
27
  border: 1px solid #d1d5db;
28
  border-radius: 12px;
29
  background-color: white;
30
}
31

32
.foto-profil {
33
  width: 120px;
34
  height: 120px;
35
  flex-shrink: 0;
36
  object-fit: cover;
37
  border-radius: 50%;
38
}
39

40
.informasi-profil {
41
  min-width: 0;
42
  width: 100%;
43
  text-align: center;
44
}
45

46
.informasi-profil h1 {
47
  margin: 0 0 8px;
48
  font-size: 1.75rem;
49
}
50

51
.informasi-profil p {
52
  margin: 0 0 16px;
53
}
54

55
.informasi-profil a {
56
  display: inline-block;
57
  padding: 10px 16px;
58
  border-radius: 8px;
59
  background-color: #2563eb;
60
  color: white;
61
  text-decoration: none;
62
}
63

64
.informasi-profil a:hover {
65
  background-color: #1d4ed8;
66
}
67

68
.informasi-profil a:focus-visible {
69
  outline: 3px solid #f59e0b;
70
  outline-offset: 3px;
71
}
72

73
.bagian-artikel {
74
  margin-top: 32px;
75
}

1
.kartu-profil {
2
  display: flex;
3
  flex-direction: column;
4
}

7. Mengubah Layout Ketika Layar Lebih Lebar#

Sekarang kita tambahkan media query di bagian bawah style.css.

1
@media (min-width: 768px) {
2
  .halaman {
3
    padding: 32px;
4
  }
5

6
  .kartu-profil {
7
    flex-direction: row;
8
    gap: 32px;
9
  }
10

11
  .informasi-profil {
12
    text-align: left;
13
  }
14

15
  .foto-profil {
16
    width: 150px;
17
    height: 150px;
18
  }
19
}

Mari kita bahas.

@media (min-width: 768px) berarti aturan di dalamnya diterapkan ketika lebar viewport setidaknya 768 piksel.

flex-direction: row mengubah foto dan informasi profil menjadi berdampingan.

text-align: left mengembalikan teks profil ke rata kiri.

gap: 32px memberikan jarak yang lebih besar karena ruang layar juga lebih luas.

Dengan cara ini, kita hanya menggunakan satu HTML dan satu CSS, tetapi mendapatkan dua susunan layout yang berbeda.

Ukuran 768 piksel hanyalah breakpoint untuk contoh ini. Dalam proyek nyata, kita sebaiknya mengujinya dan menyesuaikan titik perubahan ketika layout mulai membutuhkan ruang tambahan.

8. Membuat Daftar Kartu Artikel Responsive#

Sekarang kita kembangkan halaman profil dengan menambahkan daftar artikel.

Ganti isi section bagian-artikel pada HTML sebelumnya menjadi:

1
<section id="artikel" class="bagian-artikel">
2
  <h2>Artikel Pilihan</h2>
3

4
  <div class="daftar-artikel">
5
    <article class="kartu-artikel">
6
      <h3>Belajar HTML</h3>
7
      <p>Memahami struktur dasar halaman web.</p>
8
    </article>
9

10
    <article class="kartu-artikel">
11
      <h3>Belajar CSS</h3>
12
      <p>Mengatur tampilan dan layout website.</p>
13
    </article>
14

15
    <article class="kartu-artikel">
16
      <h3>Belajar JavaScript</h3>
17
      <p>Mengenal logika dan interaksi halaman.</p>
18
    </article>
19
  </div>
20
</section>

Tambahkan CSS berikut:

1
.daftar-artikel {
2
  display: flex;
3
  flex-direction: column;
4
  gap: 16px;
5
}
6

7
.kartu-artikel {
8
  flex: 1;
9
  min-width: 0;
10
  padding: 20px;
11
  border-radius: 10px;
12
  background-color: white;
13
  border: 1px solid #d1d5db;
14
}
15

16
.kartu-artikel h3 {
17
  margin-top: 0;
18
}

Pada layar kecil, ketiga kartu tersusun secara vertikal.

Selanjutnya, tambahkan aturan ini di dalam media query min-width: 768px yang sudah dibuat sebelumnya:

1
.daftar-artikel {
2
  flex-direction: row;
3
}

Sekarang, pada layar yang lebih lebar, ketiga kartu akan disusun berdampingan.

Jika ukuran layar semakin sempit, aturan dasarnya akan kembali menggunakan flex-direction: column.

Ini adalah contoh sederhana bagaimana Flexbox dan media query bekerja sama.

9. Apakah Semua Hal Harus Menggunakan Media Query?#

Tidak selalu.

Beberapa masalah responsive dapat diselesaikan menggunakan ukuran fleksibel tanpa media query.

Contohnya:

1
.gambar-artikel {
2
  display: block;
3
  max-width: 100%;
4
  height: auto;
5
}

Atau:

1
.container {
2
  width: 100%;
3
  max-width: 1000px;
4
  margin: 0 auto;
5
}

Kita juga bisa menggunakan fungsi CSS seperti clamp() untuk membuat ukuran teks menyesuaikan ruang dalam rentang tertentu.

1
.judul {
2
  font-size: clamp(1.5rem, 4vw, 2.5rem);
3
}

Artinya, ukuran teks memiliki batas minimum 1,5rem, nilai yang menyesuaikan viewport sebesar 4vw, dan batas maksimum 2,5rem.

Untuk saat ini, cukup pahami bahwa responsive design tidak hanya bergantung pada media query.

Media query kita gunakan ketika memang perlu mengubah aturan berdasarkan kondisi tertentu.

10. Cara Menguji Tampilan Responsive#

Kita tidak harus mempunyai banyak HP dan laptop untuk mulai menguji tampilan.

Browser modern menyediakan alat pengembang atau Developer Tools.

Jika menggunakan Google Chrome:

1. Buka halaman HTML yang sedang dibuat.
2. Tekan F12 atau klik kanan lalu pilih Inspect.
3. Aktifkan Toggle Device Toolbar atau tekan Ctrl + Shift + M.
4. Coba beberapa ukuran viewport, termasuk ukuran sempit dan lebar.
5. Perhatikan apakah ada teks yang terpotong, gambar yang meluap, atau elemen yang sulit digunakan.

Namun, simulasi perangkat pada browser desktop tidak selalu sama persis dengan perilaku perangkat sungguhan.

Jika memungkinkan, tetap coba membuka hasilnya melalui HP.

Periksa bukan hanya apakah tampilannya rapi, tetapi juga apakah teks mudah dibaca, tautan mudah disentuh, dan halaman tidak memunculkan scroll horizontal yang tidak diperlukan.

11. Kesalahan Umum Saat Membuat Website Responsive#

1
.container {
2
  width: 1200px;
3
}

12. Latihan Mandiri#

Sekarang coba kembangkan halaman profil tadi.

1. Ubah breakpoint dari 768px menjadi 640px, lalu amati perbedaannya.
2. Ubah ukuran foto pada desktop menjadi 180px.
3. Tambahkan satu kartu artikel lagi.
4. Coba gunakan flex-wrap: wrap pada daftar artikel dan bandingkan hasilnya dengan pendekatan media query.
5. Uji tampilan pada lebar viewport sekitar 360px, 768px, dan 1200px.
6. Pastikan halaman tetap nyaman dibaca tanpa scroll horizontal yang tidak diperlukan.

Tidak ada satu ukuran breakpoint yang selalu benar untuk semua website.

Yang penting, kita memahami kapan layout perlu berubah dan mengapa perubahan tersebut membantu pengguna.

13. Selanjutnya: Mini Project Profil BapakGabut#

Sekarang kita sudah mengenal beberapa fondasi CSS:

• Cara memberikan style pada HTML.
• Selector, property, dan value.
• Box Model.
• Flexbox.
• Responsive Web Design.

Pada artikel berikutnya, kita akan menggabungkan semuanya dalam Mini Project: Mempercantik Halaman Profil dengan CSS.

Kita akan menggunakan struktur profil yang sudah dibuat pada series HTML, lalu mengubahnya menjadi halaman yang lebih menarik, rapi, dan responsive.

Jadi, bukan sekadar menghafal properti CSS, tetapi benar-benar melihat bagaimana semuanya bekerja bersama.

Sampai jumpa di mini project berikutnya, Gabuters!