AHLI NGODINK
Learning PathTersimpanSemua Artikel Telegram
Dasar Web

Cara Membuat Website Responsive dengan HTML dan CSS untuk Pemula

Pelajari cara membuat website responsive dengan HTML dan CSS agar tampil baik di HP, tablet, dan desktop. Panduan pemula lengkap dengan viewport, media query, Flexbox, gambar responsive, dan contoh project sederhana.

Ditulis Ahli Ngodink 12 menit membaca

Website saat ini tidak hanya dibuka melalui komputer. Banyak pengguna mengakses website menggunakan smartphone, tablet, laptop, dan perangkat dengan ukuran layar yang berbeda-beda.

Karena itu, website perlu dibuat responsive agar tampilannya dapat menyesuaikan ukuran layar pengguna.

Dalam artikel ini kita akan belajar cara membuat website responsive menggunakan HTML dan CSS dari dasar.

Apa Itu Website Responsive?

Website responsive adalah website yang tampilannya dapat menyesuaikan ukuran layar perangkat.

Misalnya sebuah website dibuka melalui:

  • Smartphone.
  • Tablet.
  • Laptop.
  • Monitor desktop.

Layout website akan menyesuaikan agar konten tetap mudah dibaca dan digunakan.

Pada layar besar, beberapa elemen mungkin tampil berdampingan.

Pada layar kecil, elemen tersebut dapat berubah menjadi susunan vertikal.

Mengapa Website Responsive Penting?

Website yang tidak responsive dapat menimbulkan berbagai masalah.

Contohnya:

  • Teks terlalu kecil.
  • Konten keluar dari layar.
  • Pengguna harus melakukan zoom.
  • Tombol sulit ditekan.
  • Menu sulit digunakan.
  • Gambar terlalu besar.

Website responsive membantu memberikan pengalaman yang lebih baik pada berbagai perangkat.

Struktur HTML Dasar

Sebelum membuat desain responsive, kita mulai dengan struktur HTML sederhana.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Website Responsive</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>

    <header>
        <h1>Website Saya</h1>
    </header>

    <main>
        <section>
            <h2>Belajar Responsive Web Design</h2>
            <p>Website ini dibuat menggunakan HTML dan CSS.</p>
        </section>
    </main>

</body>
</html>

Perhatikan bagian berikut:

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

Tag tersebut sangat penting ketika membuat website responsive.

Apa Itu Meta Viewport?

Meta viewport memberi tahu browser bagaimana halaman harus ditampilkan pada perangkat dengan ukuran layar yang berbeda.

Gunakan:

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

Bagian:

width=device-width

membuat lebar halaman mengikuti lebar perangkat.

Sedangkan:

initial-scale=1.0

menentukan skala awal halaman.

Tanpa meta viewport, tampilan website pada smartphone dapat terlihat terlalu kecil atau tidak sesuai dengan ukuran layar.

Hindari Lebar Elemen yang Terlalu Kaku

Salah satu penyebab website tidak responsive adalah penggunaan ukuran tetap yang terlalu besar.

Contohnya:

.container {
    width: 1200px;
}

Jika layar pengguna hanya memiliki lebar sekitar 400 piksel, elemen dengan lebar 1200 piksel dapat keluar dari layar.

Salah satu pendekatan yang lebih fleksibel adalah:

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

Dengan cara ini:

  • Lebar container mengikuti ukuran layar.
  • Lebarnya tidak melebihi 1200 piksel.
  • Container berada di tengah halaman.

Apa Itu max-width?

max-width menentukan lebar maksimum sebuah elemen.

Contohnya:

.container {
    width: 90%;
    max-width: 1100px;
}

Jika layar sangat besar, lebar container tidak akan melebihi 1100 piksel.

Jika layar lebih kecil, nilai width: 90% membuat container menyesuaikan ukuran layar.

Membuat Gambar Responsive

Gambar yang memiliki ukuran lebih besar dari layar dapat menyebabkan halaman melebar.

Salah satu aturan CSS sederhana yang sangat berguna adalah:

img {
    max-width: 100%;
    height: auto;
}

max-width: 100% mencegah gambar menjadi lebih lebar daripada container.

height: auto menjaga perbandingan ukuran gambar.

Apa Itu Media Query?

Media Query memungkinkan CSS menerapkan aturan tertentu berdasarkan karakteristik layar.

Contoh:

@media (max-width: 768px) {
    body {
        background-color: #f5f5f5;
    }
}

CSS di dalam media query tersebut akan diterapkan ketika lebar viewport 768 piksel atau lebih kecil.

Media query sering digunakan untuk mengubah:

  • Layout.
  • Ukuran font.
  • Menu navigasi.
  • Jumlah kolom.
  • Spacing.
  • Ukuran elemen.

Contoh Media Query Sederhana

Misalnya kita mempunyai judul dengan ukuran:

h1 {
    font-size: 48px;
}

Pada smartphone, ukuran tersebut mungkin terlalu besar.

Kita bisa mengubahnya menggunakan media query:

@media (max-width: 600px) {
    h1 {
        font-size: 32px;
    }
}

Sekarang ukuran judul menjadi lebih kecil pada layar dengan lebar maksimum 600 piksel.

Membuat Layout Responsive dengan Flexbox

Flexbox sangat membantu untuk membuat layout yang fleksibel.

Misalnya kita mempunyai tiga card.

HTML:

<div class="cards">

    <div class="card">
        <h3>HTML</h3>
        <p>Belajar struktur website.</p>
    </div>

    <div class="card">
        <h3>CSS</h3>
        <p>Belajar desain website.</p>
    </div>

    <div class="card">
        <h3>JavaScript</h3>
        <p>Belajar interaksi website.</p>
    </div>

</div>

CSS:

.cards {
    display: flex;
    gap: 20px;
}

.card {
    flex: 1;
    padding: 20px;
    border: 1px solid #ddd;
}

Pada layar besar, tiga card akan tampil berdampingan.

Mengubah Flexbox Menjadi Vertikal di Smartphone

Untuk layar kecil, kita dapat mengubah arah Flexbox.

@media (max-width: 768px) {
    .cards {
        flex-direction: column;
    }
}

Sekarang pada layar kecil, card akan tampil dari atas ke bawah.

Konsep ini sangat sering digunakan dalam responsive web design.

Menggunakan flex-wrap

Flexbox juga memiliki properti flex-wrap.

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

Jika ruang tidak cukup, elemen dapat pindah ke baris berikutnya.

Contohnya:

.card {
    flex: 1 1 250px;
}

Dengan pengaturan tersebut, browser dapat menyesuaikan jumlah card dalam satu baris berdasarkan ruang yang tersedia.

Membuat Layout Responsive dengan CSS Grid

Selain Flexbox, CSS Grid juga sangat berguna untuk membuat layout responsive.

Contoh:

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

Pada layar besar, layout mempunyai tiga kolom.

Kita dapat mengubahnya menjadi dua kolom:

@media (max-width: 900px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

Kemudian menjadi satu kolom pada smartphone:

@media (max-width: 600px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

Grid Responsive Tanpa Banyak Media Query

CSS Grid juga memiliki teknik yang sangat berguna:

.grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

Browser akan mencoba menampilkan sebanyak mungkin kolom dengan ukuran minimum 250 piksel.

Ketika ruang semakin kecil, jumlah kolom akan otomatis berkurang.

Apa Itu Mobile First?

Mobile First adalah pendekatan membuat desain mulai dari layar kecil terlebih dahulu.

Setelah desain untuk smartphone selesai, kita menambahkan aturan untuk layar yang lebih besar.

Contoh:

.cards {
    display: flex;
    flex-direction: column;
}

Secara default, card tampil vertikal.

Kemudian:

@media (min-width: 768px) {
    .cards {
        flex-direction: row;
    }
}

Pada layar 768 piksel atau lebih besar, card berubah menjadi horizontal.

max-width dan min-width pada Media Query

Dua kondisi yang sering digunakan adalah:

max-width

dan:

min-width

Contoh menggunakan max-width:

@media (max-width: 768px) {
    /* CSS untuk layar 768px atau lebih kecil */
}

Contoh menggunakan min-width:

@media (min-width: 768px) {
    /* CSS untuk layar 768px atau lebih besar */
}

Pilih pendekatan yang konsisten agar stylesheet lebih mudah dikelola.

Gunakan Box Sizing

Salah satu aturan CSS yang sering digunakan dalam project adalah:

* {
    box-sizing: border-box;
}

Dengan box-sizing: border-box, padding dan border akan diperhitungkan di dalam ukuran elemen.

Hal ini membuat pengaturan ukuran layout menjadi lebih mudah diprediksi.

Menggunakan Padding yang Fleksibel

Padding yang terlalu besar juga dapat membuat tampilan smartphone terasa sempit.

Misalnya:

.hero {
    padding: 100px;
}

Kita dapat mengubahnya pada layar kecil:

@media (max-width: 600px) {
    .hero {
        padding: 40px 20px;
    }
}

Dengan begitu ruang pada layar kecil digunakan lebih efisien.

Ukuran Font Responsive

Selain menggunakan media query, CSS juga memiliki function seperti clamp().

Contoh:

h1 {
    font-size: clamp(32px, 6vw, 64px);
}

Nilai tersebut memberikan:

  • Ukuran minimum 32px.
  • Ukuran fleksibel berdasarkan viewport.
  • Ukuran maksimum 64px.

Teknik ini dapat membantu membuat tipografi lebih fleksibel.

Membuat Navigasi Responsive Sederhana

Misalnya kita mempunyai navigasi:

<nav class="navbar">
    <a href="#">Home</a>
    <a href="#">Artikel</a>
    <a href="#">Belajar</a>
    <a href="#">Tentang</a>
</nav>

CSS desktop:

.navbar {
    display: flex;
    gap: 20px;
}

Pada smartphone:

@media (max-width: 600px) {
    .navbar {
        flex-direction: column;
        gap: 10px;
    }
}

Sekarang menu akan berubah menjadi vertikal pada layar kecil.

Contoh Project Website Responsive

Sekarang kita membuat contoh halaman responsive sederhana.

Buat file index.html:

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">

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

    <title>Website Responsive</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>

    <header class="header">

        <div class="container nav-container">

            <h2>Ngodink</h2>

            <nav class="navbar">
                <a href="#">Home</a>
                <a href="#">Artikel</a>
                <a href="#">Belajar</a>
            </nav>

        </div>

    </header>

    <main>

        <section class="hero">

            <div class="container">

                <h1>Belajar Web Development</h1>

                <p>
                    Belajar HTML, CSS, dan JavaScript
                    dari dasar.
                </p>

                <a href="#" class="button">
                    Mulai Belajar
                </a>

            </div>

        </section>

        <section class="materi">

            <div class="container">

                <h2>Materi Belajar</h2>

                <div class="cards">

                    <article class="card">
                        <h3>HTML</h3>
                        <p>
                            Pelajari struktur dasar website.
                        </p>
                    </article>

                    <article class="card">
                        <h3>CSS</h3>
                        <p>
                            Pelajari cara mendesain website.
                        </p>
                    </article>

                    <article class="card">
                        <h3>JavaScript</h3>
                        <p>
                            Buat website menjadi interaktif.
                        </p>
                    </article>

                </div>

            </div>

        </section>

    </main>

</body>
</html>

CSS Project Responsive

Buat file style.css:

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

.header {
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar {
    display: flex;
    gap: 20px;
}

.navbar a {
    color: #222;
    text-decoration: none;
}

.hero {
    padding: 100px 0;
}

.hero h1 {
    margin-top: 0;
    font-size: clamp(36px, 6vw, 64px);
}

.button {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 20px;
    background: #111;
    color: white;
    text-decoration: none;
    border-radius: 8px;
}

.materi {
    padding: 60px 0;
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.card {
    padding: 24px;
    border: 1px solid #ddd;
    border-radius: 12px;
}

@media (max-width: 768px) {

    .nav-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .cards {
        grid-template-columns: 1fr;
    }

    .hero {
        padding: 60px 0;
    }
}

@media (max-width: 480px) {

    .navbar {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .hero {
        padding: 40px 0;
    }

    .card {
        padding: 18px;
    }
}

Bagaimana Project Responsive Tersebut Bekerja?

Bagian pertama yang penting adalah:

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

Container dapat mengecil mengikuti layar tetapi tidak menjadi terlalu lebar pada monitor besar.

Kemudian bagian card:

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

Pada desktop, card tampil dalam tiga kolom.

Pada layar maksimal 768 piksel:

@media (max-width: 768px) {
    .cards {
        grid-template-columns: 1fr;
    }
}

Layout berubah menjadi satu kolom.

Cara Menguji Website Responsive

Setelah membuat website, jangan hanya melihatnya pada satu ukuran layar.

Kita dapat menguji responsive melalui Developer Tools browser.

Pada browser berbasis Chromium, langkah umumnya:

  1. Buka halaman website.
  2. Buka Developer Tools.
  3. Aktifkan mode perangkat atau Device Toolbar.
  4. Pilih beberapa ukuran perangkat.
  5. Coba ubah lebar viewport.

Perhatikan apakah ada konten yang keluar dari layar.

Ukuran Layar yang Perlu Diuji

Tidak perlu mendesain hanya berdasarkan satu merek smartphone.

Lebih baik menguji layout pada beberapa rentang ukuran layar.

Contohnya:

  • Layar kecil sekitar 320–480px.
  • Smartphone besar sekitar 480–600px.
  • Tablet sekitar 600–900px.
  • Laptop dan desktop di atasnya.

Breakpoint sebaiknya digunakan berdasarkan kebutuhan layout, bukan sekadar mengikuti nama perangkat.

Jangan Membuat Terlalu Banyak Breakpoint

Pemula kadang membuat media query untuk terlalu banyak ukuran.

Misalnya:

@media (max-width: 1200px) {}
@media (max-width: 1100px) {}
@media (max-width: 1000px) {}
@media (max-width: 900px) {}
@media (max-width: 800px) {}
@media (max-width: 700px) {}

Hal tersebut dapat membuat CSS sulit dikelola.

Buat breakpoint ketika layout memang mulai membutuhkan perubahan.

Hindari Horizontal Scroll

Salah satu tanda website belum responsive adalah muncul scroll horizontal.

Beberapa penyebab umumnya:

  • Elemen memiliki width terlalu besar.
  • Gambar tidak responsive.
  • Padding terlalu besar.
  • Konten panjang tidak dapat membungkus.
  • Layout menggunakan ukuran tetap yang tidak sesuai.

Cari elemen penyebabnya daripada langsung menyembunyikan masalah menggunakan CSS.

Gunakan Relative Unit Jika Sesuai

CSS menyediakan berbagai jenis satuan.

Contohnya:

  • px
  • %
  • rem
  • em
  • vw
  • vh

Tidak berarti kita harus menghindari px sepenuhnya.

Gunakan satuan yang sesuai dengan kebutuhan.

Untuk container, misalnya:

width: 90%;

sering lebih fleksibel dibandingkan lebar tetap yang sangat besar.

Responsive Bukan Hanya Mengecilkan Website

Responsive design bukan sekadar membuat semua elemen menjadi lebih kecil.

Kita juga perlu mempertimbangkan:

  • Urutan konten.
  • Ukuran tombol.
  • Keterbacaan teks.
  • Jarak antar elemen.
  • Navigasi.
  • Jumlah kolom.
  • Ukuran gambar.

Tujuannya adalah membuat halaman tetap nyaman digunakan pada berbagai ukuran layar.

Kesalahan Umum Membuat Website Responsive

1. Lupa Meta Viewport

Pastikan bagian head memiliki:

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

2. Menggunakan Width Tetap Terlalu Besar

Hindari:

width: 1200px;

untuk elemen yang harus dapat menyesuaikan layar.

Gunakan pendekatan seperti:

width: 90%;
max-width: 1200px;

3. Gambar Keluar dari Container

Tambahkan:

img {
    max-width: 100%;
    height: auto;
}

4. Tidak Menguji di Layar Kecil

Website yang terlihat bagus di desktop belum tentu nyaman digunakan pada smartphone.

Selalu lakukan pengujian pada beberapa ukuran viewport.

5. Menggunakan Media Query untuk Setiap Elemen

Cobalah membuat layout dasar sefleksibel mungkin dengan Flexbox, Grid, persentase, dan max-width.

Gunakan media query ketika perubahan layout memang diperlukan.

Checklist Website Responsive

Sebelum menganggap website selesai, periksa hal berikut:

  • Meta viewport sudah tersedia.
  • Tidak ada horizontal scroll yang tidak diperlukan.
  • Gambar tidak keluar dari container.
  • Teks tetap mudah dibaca.
  • Tombol mudah ditekan.
  • Menu dapat digunakan di layar kecil.
  • Card dapat menyesuaikan jumlah kolom.
  • Spacing tidak terlalu besar pada smartphone.
  • Layout sudah diuji pada beberapa ukuran viewport.

Latihan Responsive Web Design

Untuk melatih kemampuan, buat halaman dengan:

  1. Header dan navigasi.
  2. Hero section.
  3. Tiga card materi.
  4. Tombol.
  5. Footer.

Pada desktop, buat tiga card berdampingan.

Pada tablet, buat menjadi dua kolom.

Pada smartphone, buat menjadi satu kolom.

Kemudian pastikan navigasi dan spacing juga tetap nyaman digunakan.

Kesimpulan

Website responsive adalah website yang dapat menyesuaikan tampilannya berdasarkan ukuran layar pengguna.

Beberapa dasar penting yang perlu dipahami adalah:

  • Meta viewport.
  • Width yang fleksibel.
  • max-width.
  • Media query.
  • Flexbox.
  • CSS Grid.
  • Gambar responsive.
  • Pengujian pada berbagai ukuran layar.

Untuk pemula, jangan mencoba membuat responsive design terlalu rumit.

Mulailah dengan membuat container fleksibel, memastikan gambar tidak keluar dari layar, kemudian gunakan Flexbox atau Grid dan tambahkan media query ketika layout perlu berubah.

Setelah memahami HTML, CSS, responsive design, JavaScript, DOM, Event, dan LocalStorage, kamu sudah memiliki fondasi yang cukup kuat untuk membuat website sederhana yang lebih lengkap dan nyaman digunakan di berbagai perangkat.

Topik: #CSS #CSS Grid #Flexbox #HTML #Media Query #Pemula #Responsive Web Design #Web Development #Website Responsive
Lanjut Belajar
Semua artikel →

Artikel berikutnya

Cara Menggunakan AI untuk Membantu Belajar Coding →