Tampilan Mobile Berantakan? Ini Cara Membuat Website Responsive Yang Benar

Tampilan desktop yang sudah rapi bisa mendadak melebar, terpotong, atau mengecil seperti miniatur saat dibuka dari ponsel. Dalam kondisi seperti ini, cara membuat website responsive bukan sekadar menambahkan satu media query, melainkan membenahi cara halaman menentukan lebar, menyusun kolom, menampilkan gambar, dan merespons ruang yang tersedia.

Responsive design juga bukan proses membuat versi HP secara terpisah. Google merekomendasikan desain responsif karena satu URL dan satu HTML dapat melayani desktop maupun perangkat seluler dengan tampilan berbeda sesuai ukuran layar. Pendekatan ini lebih mudah dirawat dan sejalan dengan mobile-first indexing yang memakai versi seluler untuk crawling serta pengindeksan.

Tutorial ini dimulai dari struktur paling dasar, lalu masuk ke ukuran layout, gambar, navigasi, dan pengujian. Targetnya bukan sekadar membuat halaman muat di layar kecil, tetapi memastikan teks tetap terbaca, tombol mudah disentuh, dan tidak ada bagian penting yang hilang.

Cara Membuat Website Responsive Dari Struktur Paling Dasar

Jangan langsung membuat banyak breakpoint. Periksa dulu apakah dokumen sudah memberi tahu browser untuk memakai lebar perangkat yang sebenarnya. Tanpa pengaturan viewport, browser ponsel dapat merender halaman dalam lebar virtual sekitar 980 piksel, kemudian mengecilkannya sampai teks terlihat sangat kecil.

Tambahkan kode berikut di dalam elemen <head>.

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

Setelah itu, bangun tampilan dari layar sempit terlebih dahulu. Kolom, sidebar, dan ruang tambahan baru dimunculkan saat tersedia cukup tempat.

1. Hindari Lebar Tetap Pada Kontainer

Kontainer dengan width: 1200px akan melewati layar ponsel. Gunakan lebar fleksibel dengan batas maksimum.

.container {

width: min(100% – 2rem, 1200px);

margin-inline: auto;

}

Kontainer akan mengikuti lebar layar, menyisakan jarak di kedua sisi, lalu berhenti melebar setelah mencapai 1.200 piksel.

2. Susun Kolom Dengan Grid Atau Flexbox

CSS Grid dan Flexbox lebih mudah menyesuaikan ruang dibandingkan layout lama yang bergantung pada float dan ukuran tetap.

.product-list {

display: grid;

grid-template-columns: 1fr;

gap: 1rem;

}

@media (width >= 48rem) {

.product-list {

grid-template-columns: repeat(3, 1fr);

}

}

Tampilan awal memakai satu kolom. Tiga kolom hanya muncul ketika ruangnya cukup, bukan karena kode menebak jenis perangkat pengguna.

3. Gunakan Satuan Yang Bisa Menyesuaikan

Gunakan %, rem, em, fr, min(), max(), dan clamp() pada elemen yang harus mengikuti ruang atau ukuran teks.

.hero-title {

font-size: clamp(2rem, 5vw, 4.5rem);

}

Judul dapat tumbuh mengikuti layar, tetapi tetap memiliki ukuran minimum dan maksimum. Cara ini mencegah teks menjadi terlalu kecil di ponsel atau terlalu besar di monitor lebar.

4. Pakai Container Query Pada Komponen

Media query membaca lebar viewport. Container query membaca ruang yang tersedia di dalam elemen induk. Teknik ini cocok untuk kartu produk, sidebar, atau blok artikel yang dapat dipasang di beberapa lokasi.

.card-wrapper {

container-type: inline-size;

}

@container (width >= 32rem) {

.card {

grid-template-columns: 180px 1fr;

}

}

MDN menjelaskan bahwa container query membuat komponen dapat berubah berdasarkan ukuran wadahnya, bukan hanya ukuran seluruh layar.

Penyebab Website Tidak Responsive Di HP Yang Sering Terlewat

Saat website tidak responsive di HP, penyebabnya sering hanya satu elemen yang lebih lebar daripada viewport. Satu tabel, banner, iframe, atau baris teks panjang sudah cukup untuk mendorong seluruh halaman ke samping.

Beberapa sumber masalah yang perlu diperiksa antara lain:

• Gambar memakai lebar tetap melebihi kontainer.
• Tabel tidak dibungkus area dengan overflow horizontal.
• Iframe video masih menggunakan ukuran desktop.
• Tombol memakai white-space: nowrap tanpa batas.
• Elemen absolut ditempatkan dengan koordinat tetap.
• Padding kanan dan kiri terlalu besar.
• Grid memiliki kolom minimum yang tidak bisa mengecil.
• URL panjang tidak diizinkan berpindah baris.

Gunakan aturan dasar berikut agar gambar dan video tidak keluar dari kontainer.

img,

video {

max-width: 100%;

height: auto;

display: block;

}

Iframe juga perlu mengikuti lebar halaman.

.video {

width: 100%;

aspect-ratio: 16 / 9;

}

.video iframe {

width: 100%;

height: 100%;

}

Jangan langsung menambahkan overflow-x: hidden pada body. Cara tersebut hanya menyembunyikan scroll horizontal, sementara elemen yang rusak tetap terpotong.

Ukuran Desain Website Responsive Tidak Ditentukan Dari Merek HP

Tidak ada breakpoint wajib khusus iPhone, Samsung, tablet, dan laptop tertentu. Ukuran perangkat terus berubah, sedangkan isi halaman biasanya menunjukkan sendiri kapan layout mulai terlalu sempit.

Untuk menentukan ukuran desain website responsive, gunakan rentang sebagai titik awal, kemudian sesuaikan breakpoint berdasarkan kondisi konten.

Breakpoint sebaiknya memakai unit relatif seperti rem, lalu ditempatkan saat konten mulai pecah. MDN juga menyarankan pendekatan mobile-first dan breakpoint relatif daripada menargetkan ukuran absolut satu perangkat.

Tombol dan tautan perlu cukup besar untuk disentuh. web.dev merekomendasikan target sentuh sekitar 48 piksel independen perangkat. Area ini bisa dibuat melalui padding tanpa harus memperbesar tulisan secara berlebihan.

Cara Cek Responsive Website Sampai Ketemu Bagian Yang Rusak

Preview di page builder belum cukup. Cara cek responsive website yang lebih aman adalah menggabungkan simulasi viewport, pengujian jaringan, dan perangkat asli.

Chrome DevTools menyediakan Device Mode untuk mengubah lebar layar, meniru orientasi, serta memperlambat CPU dan koneksi. Namun, hasil simulasi tetap perlu diperiksa di perangkat nyata karena laptop tidak sepenuhnya meniru CPU, browser engine, keyboard virtual, dan perilaku sentuhan ponsel.

1. Tarik Lebar Viewport Secara Perlahan

Buka DevTools, aktifkan Toggle device toolbar, lalu pilih mode Responsive. Jangan hanya mencoba preset perangkat.

Tarik viewport dari kecil ke besar. Catat titik ketika menu bertabrakan, kartu terlalu sempit, judul pecah, atau scroll horizontal muncul. Gunakan titik tersebut sebagai dasar breakpoint.

2. Uji Dengan Konten Yang Lebih Ekstrem

Masukkan judul panjang, harga dengan digit lebih banyak, nama pengguna panjang, dan gambar dengan rasio berbeda.

Desain yang hanya bekerja dengan contoh konten pendek belum benar-benar responsif. Data asli sering lebih berantakan daripada mockup.

3. Jalankan Lighthouse

Lighthouse dapat memeriksa performa, aksesibilitas, dan SEO. Laporannya juga membantu menemukan gambar yang jauh lebih besar daripada ukuran tampilannya.

Jalankan pengujian dengan koneksi lebih lambat. Website mungkin terlihat rapi, tetapi tetap terasa berat apabila setiap kartu memuat gambar berukuran beberapa megabita.

4. Coba Pada Ponsel Asli

Uji formulir, keyboard, menu sentuh, modal, sticky header, dan perubahan orientasi. Perhatikan pula apakah tombol terlalu dekat, halaman bergerak saat gambar dimuat, atau elemen tertutup oleh bagian browser.

Gambar Dan Navigasi Sering Membuat Desain Terasa Berat

Layout yang mampu mengecil belum tentu nyaman digunakan. Halaman mobile juga harus mengirim gambar dengan ukuran sesuai dan menyediakan navigasi yang mudah disentuh.

Gunakan srcset serta sizes agar browser dapat memilih file berdasarkan ruang tampil. Responsive images mencegah layar kecil mengunduh gambar yang jauh lebih besar daripada kebutuhan sebenarnya.

<img

src=”hero-800.webp”

srcset=”

hero-480.webp 480w,

hero-800.webp 800w,

hero-1440.webp 1440w”

sizes=”(max-width: 48rem) 100vw, 50vw”

width=”1440″

height=”900″

alt=”Tampilan dashboard pada laptop dan ponsel”>

Atribut width dan height tetap perlu ditulis agar browser menyediakan ruang sebelum file selesai dimuat. Langkah ini membantu mengurangi pergeseran layout. WebP dan AVIF juga dapat menghasilkan ukuran lebih kecil dibandingkan format gambar lama.

Untuk navigasi mobile, pertahankan fungsi utama seperti pencarian, login, keranjang, kontak, dan menu terpenting. Jangan sekadar memindahkan semua tautan desktop ke tombol hamburger tanpa menyusun prioritasnya.

Saat eksplorasi layout mulai memakan waktu, AI dapat dipakai untuk membuat wireframe dan variasi antarmuka awal. Panduan desain web AI Google Stitch bisa membantu mempercepat proses tersebut. Hasilnya tetap perlu diperiksa dari sisi struktur CSS, aksesibilitas, performa, dan pengalaman mobile.

Pada akhirnya, cara membuat website responsive yang benar bukan menambahkan breakpoint sampai halaman kebetulan rapi di satu ponsel. Mulailah dari viewport, kontainer fleksibel, komponen yang bisa menyusut, gambar sesuai ukuran, lalu uji pada berbagai lebar dan perangkat nyata.

Q&A

Apakah Semua Website Harus Memakai Media Query?

Tidak. Grid fleksibel, Flexbox, clamp(), minmax(), dan container query dapat menyelesaikan banyak perubahan layout tanpa media query tambahan.

Media query tetap berguna saat susunan halaman memang perlu berubah pada lebar tertentu.

Lebih Baik Memulai Dari Desktop Atau Mobile?

Mobile-first lebih aman untuk sebagian besar proyek karena desain dimulai dari konten inti dan ruang paling sempit. Kolom tambahan, dekorasi, dan fitur pendukung dimunculkan saat tersedia lebih banyak ruang.

Kenapa Tampilan Sudah Rapi Tetapi Masih Ada Scroll Horizontal?

Biasanya ada satu elemen yang melewati viewport. Periksa tabel, gambar, iframe, elemen absolut, teks panjang, dan komponen dengan min-width.

Temukan sumbernya melalui DevTools daripada langsung menyembunyikan overflow seluruh halaman.

Sebagai SEO Specialist dan Penulis Konten, Mila Jelita ahli memadukan riset kata kunci dan search intent untuk mendatangkan trafik organik yang maksimal ke dalam website.