Cara Membuat Situs Web Responsif di Ponsel

Untuk membuat situs web responsif di ponsel, tambahkan tag meta viewport, bangun tata letak dengan pendekatan mobile-first menggunakan lebar yang fleksibel, dan gunakan breakpoint CSS untuk menyusun ulangnya di layar yang lebih besar — menumpuk kolom, melipat menu, dan menskalakan gambar agar pas. Lalu periksa setiap halaman pada lebar ponsel untuk melihat apakah ada gulir horizontal, teks yang terlalu kecil, atau tombol yang terlalu kecil untuk disentuh. Di situs buatan AI, satu prompt yang jelas ditambah pemeriksaan di pratinjau ukuran ponsel biasanya memperbaiki sebagian besar masalah.

Apa sebenarnya desain responsif itu

Situs responsif menggunakan satu rangkaian halaman dan URL yang menyesuaikan diri dengan layar. Alih-alih situs "m." terpisah, CSS mengubah tata letak pada lebar tertentu, yang disebut breakpoint. Blok bangunannya:

• Tag meta viewport memberi tahu browser mobile agar memakai lebar perangkat yang sebenarnya.
• Tata letak fluid memakai persentase, flexbox, dan grid, bukan lebar piksel yang tetap.
• Media query (atau kelas framework seperti md: di Tailwind) mengubah tata letak di atas lebar tertentu.
• Media yang fleksibel — gambar dan video yang menyusut mengikuti wadahnya.

Ini penting karena sebagian besar trafik Anda kemungkinan datang dari ponsel, dan Google mengindeks versi mobile dari halaman Anda. Jika konten atau tautan hanya ada di desktop, Google mungkin juga tidak melihatnya.

Opsi dan trade-off

Mobile-first biasanya lebih sederhana: satu kolom adalah tata letak yang paling mudah, dan menambah kolom saat ruang bertambah lebih sedikit kerjanya daripada menghapus kolom.

Bagian yang biasanya rusak

Tag viewport

Jika halaman terlihat seperti situs desktop mini di ponsel, tag viewport belum ada:

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

Jangan tambahkan maximum-scale=1 atau user-scalable=no. Memblokir pinch-zoom membuat situs lebih sulit dipakai oleh orang dengan low vision.

Lebar tetap dan gulir horizontal

Bug responsif yang paling umum adalah sesuatu yang lebih lebar dari layar: wadah width: 1200px yang tetap, tabel lebar, URL panjang atau blok kode, gambar tanpa max-width: 100%. Seluruh halaman kemudian bergulir ke samping. Gunakan max-width alih-alih width, biarkan teks membungkus, dan beri elemen lebar area gulir sendiri.

Navigasi

Lima tautan menu desktop jarang muat di ponsel. Jawaban yang biasa adalah tombol menu yang membuka panel. Pertahankan dua atau tiga tindakan terpenting tetap terlihat — "Pesan", "Keranjang", "Masuk" — dan pastikan menu bisa dipakai dengan keyboard serta mudah ditutup.

Teks dan target sentuh

• Teks isi sekitar 16 px adalah batas minimum yang masuk akal di ponsel. Input dengan teks lebih kecil membuat iPhone melakukan zoom saat diketuk.
• Buat tombol dan tautan mudah ditekan. WCAG 2.2 AA menetapkan batas minimum 24 x 24 piksel CSS (atau jarak yang cukup); sekitar 44 piksel lebih nyaman untuk jempol.
• Beri ruang antara tautan yang berdekatan agar orang tidak menekan yang salah.

Tabel dan data

Tabel lebar adalah bagian tersulit dari aplikasi responsif. Pilihan, sesuai urutan preferensi: tampilkan lebih sedikit kolom di ponsel, ubah setiap baris menjadi kartu, atau letakkan tabel di dalam wadah yang bisa digulir ke samping dengan kolom pertama yang dikunci. Pilih berdasarkan apa yang perlu dibandingkan orang.

Gambar dan media

Gunakan max-width: 100% dan height: auto, sajikan file yang lebih kecil untuk layar kecil dengan srcset, dan atur width dan height untuk menghindari loncatan tata letak. Video dan peta yang disematkan memerlukan pembungkus responsif agar rasio aspeknya tetap. Gambar yang lebih kecil juga membuat halaman lebih cepat — lihat cara membuat situs web Anda lebih cepat.

Form

Tumpuk label di atas kolom, buat kolom lebar penuh, dan gunakan tipe input yang tepat (type="email", type="tel", inputmode="numeric") agar ponsel menampilkan keyboard yang sesuai. Letakkan tombol kirim di tempat yang bisa dijangkau jempol dan tetap terlihat saat keyboard muncul.

Interaksi yang hanya mengandalkan hover

Ponsel tidak punya hover. Tooltip, dropdown, dan pratinjau yang hanya muncul saat di-hover tidak terlihat oleh pengguna sentuh. Buat juga agar berfungsi saat diketuk.

Prompt yang berhasil

Untuk membangun sesuatu yang baru, sampaikan sejak awal:

Bangun ini dengan pendekatan mobile-first. Satu kolom di ponsel, dua kolom mulai dari lebar tablet, tata letak penuh di desktop. Tidak ada gulir horizontal pada lebar 320 px, teks isi minimal 16 px, target sentuh minimal 44 px, tombol menu di layar kecil, dan tabel yang berubah menjadi kartu di ponsel.

Untuk halaman yang sudah ada, jelaskan apa yang Anda lihat:

Di ponsel, halaman /pricing bergulir ke samping dan ketiga kartu paket tergencet berdampingan. Tumpuk kartu secara vertikal di bawah 768 px, buat tabel perbandingan bisa digulir ke samping di dalam wadahnya sendiri dengan kolom fitur dikunci, dan biarkan tata letak desktop tidak berubah.

Periksa setiap halaman pada lebar 375 px. Daftarkan apa pun yang meluap, tumpang tindih, memiliki teks lebih kecil dari 16 px atau target sentuh lebih kecil dari 44 px, atau hanya berfungsi saat di-hover, lalu perbaiki satu per satu.

Langkah demi langkah

1. Pastikan tag viewport ada di head halaman.
2. Uji pada lebar 320–375 px di mode perangkat browser atau pratinjau ukuran ponsel. Gulir setiap halaman dari atas ke bawah.
3. Perbaiki gulir horizontal lebih dulu. Temukan elemen yang terlalu lebar; semua hal lain sulit dinilai sampai itu hilang.
4. Rapikan navigasi: tombol menu, tindakan utama tetap terlihat.
5. Periksa teks, target sentuh, dan form pada setiap alur utama — daftar, pencarian, checkout, kontak.
6. Tangani tabel dan media: kartu atau wadah gulir, gambar dan embed yang responsif.
7. Periksa ukuran di antaranya. Geser lebar pelan-pelan dari ponsel ke desktop; tata letak sering rusak di sekitar lebar tablet.
8. Uji di ponsel sungguhan. Emulator melewatkan hal-hal seperti keyboard di layar yang menutupi tombol, poni layar, dan seberapa cepat situs terasa di jaringan seluler.

Kesalahan umum

• Hanya menguji pada satu ukuran ponsel. Periksa ponsel kecil, ponsel besar, dan tablet.
• Menyembunyikan konten di mobile agar muat. Google mengindeks versi mobile, dan pengguna ponsel menginginkan informasi yang sama.
• Menonaktifkan zoom di tag viewport.
• Gambar berukuran desktop di ponsel, yang memakan waktu muat dan kuota.
• Elemen posisi tetap yang menumpuk: header lengket, banner cookie, dan gelembung chat bisa menutupi setengah layar ponsel.
• Pop-up yang tidak bisa ditutup di layar kecil karena tombol tutup berada di luar layar.

Daftar periksa mobile

• Tag meta viewport ada; zoom tidak dinonaktifkan
• Tidak ada gulir horizontal pada 320 px di halaman mana pun
• Teks isi sekitar 16 px; input tidak memicu zoom
• Target sentuh cukup besar dan berjarak
• Menu berfungsi di ponsel dan dengan keyboard
• Tabel mudah dibaca di ponsel (kartu, kolom lebih sedikit, atau wadah gulir)
• Gambar dan embed menyesuaikan ukuran; file dengan ukuran tepat disajikan
• Form memakai tipe input yang tepat; tombol kirim bisa dijangkau
• Tidak ada hal penting yang bergantung pada hover
• Sudah diuji di setidaknya satu ponsel sungguhan

Desain responsif juga bagian dari aksesibilitas: WCAG menuntut agar konten berfungsi pada lebar 320 px dan zoom 200%. Jika Anda membangun aplikasi yang akan dipakai setiap hari di ponsel, cara membangun web app yang ramah ponsel membahas lebih jauh, termasuk PWA yang bisa dipasang.

Desain responsif di Mythex

Mythex membangun web app yang responsif, dan di paket Pro aplikasinya bisa dibungkus menjadi aplikasi Android dan iPhone. Di workspace, klik ikon ponsel di atas Preview (Switch to Mobile) untuk melihat aplikasi Anda dalam bingkai ukuran ponsel, dan seret tepi bingkai untuk mencoba lebar lain (Preview dan Code). Dokumentasi memiliki prompt awal singkat untuk memperbaiki tata letak layar kecil di prompt responsif mobile. Periksa juga di ponsel sungguhan — buka URL yang sudah dipublikasikan, atau bagikan tautan pratinjau dan buka di ponsel Anda.

Pertanyaan