Pengguna perangkat mobile saat ini sudah mendominasi kunjungan pada website, sudahkah kamu menerapkan responsive web design?
Data dari Statista pada Quarter pertama tahun 2021, bahwa pengguna perangkat mobile mencapai 54,8% dari keseluruhan kunjungan yang datang.
Jadi sudah setengah lebih berasal dari perangkat mobile, ini belum termasuk pengguna tablet ya.
Website tanpa menggunakan desain responsive para pengunjung akan banyak yang kabur karena user experience yang buruk.
Misalnya pengguna smartphone kesulitan mencari tombol “kembali” saat membaca artikel sehingga lebih memilih membuka website lain.
Contoh lain untuk kasus website toko online, karena tampilan website yang belum responsive pengunjung batal melakukan transaksi karena kesulitan menemukan tombol checkout.
Nah kalau sudah seperti ini para pemilik website akan dirugikan mulai dari trafik yang semakin menurun dan juga omzet semakin menipis.
Apa Itu Responsive Web Design?
Responsive web design adalah tampilan website yang bisa menyesuaikan dengan device pengguna.
Tampilan dari website akan menyesuaikan sesuai dengan ukuran layar pengguna, bisa jadi tampilan satu device dengan device lainnya akan berbeda.
Semuanya aspek dari desain website mulai dari user interface, image, font, video akan menyesuaikan dengan resolusi device pengguna.
Tampilannya pun akan dibuat dengan komposisi terbaik sesuai dengan ukuran layar pengguna.
Jadi responsive web design akan meningkatkan user experience dari setiap pengguna.
Contoh mudahnya pengunjung website tidak perlu melakukan zoom saat membaca artikel, tulisan akan disesuaikan dengan device yang digunakan.
Mengapa Harus Responsive Web Design?
Jika website yang kamu miliki sampai sekarang belum menerapkan responsive web design, berikut ada beberapa alasan yang perlu diketahui:
- Memudahkan pengguna untuk mengakses website kamu.
- Tingkat bounce rate lebih rendah.
- Membantu algoritma Google dalam melakukan indexing halaman untuk perangkingan di SERP Google.
- Bisa meminimalisir waktu untuk proses develop website dengan tampilan yang sama.
- Mengurangi kemungkinan kesalahan dari tampilan mobile.
- Tidak perlu melakukan redirect ke URL lain sehingga waktu loading website bisa dipangkas lebih cepat.
- Menghemat resource saat Google melakukan perayapan website kamu sehingga crawl budget bisa lebih aman.
- Meminimalisir duplicate konten
- Tampilan responsive lebih mudah merangking di halaman pertama Google.
Syarat Web Responsive
Ada beberapa syarat website bisa dikatakan memiliki responsive web design, simak pembahasannya berikut ini:
1. Layout dan Tata Letak
Syarat website yang responsive pertama kali bisa dilihat dari layout dan tata letak website.
Jika ditemui layout dan tata letak yang masih tidak beraturan maka website belum bisa disebut responsive.
Saat proses develop website, semua diawali dengan membuat layout website yang non-responsive terlebih dahulu, kemudian baru menambahkan settingan CSS responsive.
Selain itu kamu juga harus menambahkan Media Queries agar bisa menyesuaikan dengan device tanpa perlu merubah kontennya.
Jadi media queries akan membuat tampilan responsive pada semua layar device, termasuk juga untuk perangkat desktop.
2. Media
Setelah aspek layout dan tata letak beres, syarat responsive website selanjutnya terletak pada media.
Media yang ada pada website kebanyakan berupa gambar dan ada beberapa format video.
Kamu perlu menambahkan kode CSS berikut agar ukuran gambar tidak melebihi atau kurang dari layar pengguna.
img { max-width: 100%; height: auto; }
script CSS di atas bertujuan untuk membuat file media tampil full satu layar menyesuaikan dengan devicenya.
3. Typography
Syarat terakhir website yang responsive design adalah tipografi yang digunakan harus responsive.
Biasanya para developer website menggunakan patokan pixel untuk menentukan ukuran typography yang digunakan.
Jadi tulisan akan menyesuaikan dengan parent container yang digunakan sehingga bisa beradaptasi dengan ukuran layar.
Jadi font yang tampil bisa terlihat ideal tidak terlalu besar dan juga kecil.
Cara Membuat Web Responsive Bagi Pemula
Membuat website yang tampil cantik di HP maupun laptop tidak hanya soal tampilan, tetapi juga memberikan kenyamanan bagi pembaca.
Berikut adalah panduan langkah demi langkah cara membuat web responsive:
1. Menambahkan Meta Viewport
Tanpa baris kode ini, browser mobile akan mencoba “menipu” tampilan dengan merender halaman dalam lebar desktop, lalu mengecilkannya hingga teks tidak terbaca.
Meta viewport memberitahu browser untuk menyesuaikan lebar halaman dengan lebar layar perangkat.
Tambahkan kode ini di dalam tag <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width: Mengatur lebar halaman mengikuti lebar layar perangkat.initial-scale=1.0: Mengatur level zoom awal saat halaman dimuat.
2. Gunakan Layout yang Fleksibel (Fluid Grid)
Hindari penggunaan satuan tetap seperti px (piksel) untuk elemen besar. Gunakan satuan relatif seperti % (persentase) atau vw/vh (viewport width/height).
- Salah:
width: 960px;(Akan terpotong di layar HP). - Benar:
width: 100%;ataumax-width: 1200px;(Akan menyesuaikan layar tapi punya batas maksimal).
3. “Sihir” CSS Media Queries
Media Queries memungkinkan kamu menerapkan gaya CSS yang berbeda berdasarkan ukuran layar atau karakteristik perangkat. Ini adalah inti dari desain responsif.
Misalnya, kamu ingin warna latar belakang berubah saat dibuka di HP (layar di bawah 768px), maka kamu bisa menggunakan kode ini:
/* Gaya untuk Desktop (Default) */
body {
background-color: white;
}
/* Gaya untuk Tablet & Smartphone (Layar maksimal 768px) */
@media screen and (max-width: 768px) {
body {
background-color: lightgrey;
}
.sidebar {
display: none; /* Menyembunyikan sidebar di layar kecil */
}
}
- Tips: Gunakan pendekatan Mobile First dengan menulis kode untuk layar terkecil terlebih dahulu, lalu gunakan
@media (min-width: ...)untuk menambahkan kompleksitas saat layar semakin lebar.
4. Membuat Gambar Responsif
Seringkali gambar menjadi penyebab layout berantakan karena ukurannya yang terlalu besar. Pastikan gambar tidak pernah lebih lebar dari wadahnya.
Tambahkan ini di CSS global:
img {
max-width: 100%;
height: auto;
}
5. Memanfaatkan Framework: Bootstrap
Jika kamu ingin membangun website responsif dengan cepat tanpa menulis Media Queries dari nol, Bootstrap adalah solusinya. Bootstrap menggunakan sistem grid 12 kolom yang sangat fleksibel.
Berikut caranya:
- Masukkan link CDN Bootstrap di
<head>. - Gunakan kelas bawaan seperti
container,row, dancol.
Contoh Layout Responsif Bootstrap:
<div class="container">
<div class="row">
<div class="col-12 col-md-6">Konten Kiri</div>
<div class="col-12 col-md-6">Konten Kanan</div>
</div>
</div>
Dengan Bootstrap, kamu cukup mengatur breakpoint menggunakan singkatan seperti sm (small), md (medium), lg (large), dan xl.
Untuk last check, kamu harus memastikan hal-hal berikut diterapkan dengan baik:
- Pastikan Meta Viewport sudah terpasang.
- Gunakan Percent (%) bukan Pixels (px) untuk lebar kontainer.
- Gunakan Media Queries untuk mengatur elemen yang harus hilang atau pindah posisi di layar kecil.
- Terapkan
max-width: 100%pada semua gambar. - Jika ingin lebih praktis, pelajari sistem Grid Bootstrap.
Cara Cek Responsive Website
Jika semua syarat diatas sudah kamu lakukan dan berhasil tidak ada masalah, kini saatnya kamu mengecek menggunakan tools apakah website kamu sudah benar-benar responsive atau belum.
Berikut langsung saja cara cek responsive website:
1. Fitur Inspect
Cara cek responsive website pertama cukup dengan fitur Inspect yang ada pada browser.
Caranya cukup mudah sekali silahkan kamu buka website yang kamu miliki, kemudian “Klik Kanan” pilih “Inspect”.
Kemudian silahkan klik ikon tablet/smartphone seperti gambar dibawah ini kemudian silahkan pilih “Dimensions”, sesuaikan ukuran gadgetnya apakah ada masalah atau tidak.
Bagaimana test responsive pertama sudah berhasil atau ada kendala?
2. Mobile Friendly Test
Cara cek tampilan responsive website kedua ini tidak hanya sebatas tampilan website saja, melainkan pada komponen yang membangun website.
Caranya dengan tools dari Google bernama Mobile-Friendly Test yang bisa kamu akses di URL berikut https://search.google.com/test/mobile-friendly.
Kamu tinggal memasukan nama domain saja kemudian lakukan test URL dan tunggu hasilnya.
Pada contoh diatas kami melakukan pengujian pada website blog dari Qwords, hasilnya seperti berikut ini.
Nah dari gambar diatas website tidak ada masalah sudah mobile friendly semuanya.
Website Kamu Sudah Responsive Web Design?
Bagaimana setelah melakukan serangkaian pengujian diatas apakah website kamu sudah mobile friendly?
Jika masih ada kendala silahkan perbaiki ulang mana yang jadi penyebabnya.
Bagi kamu yang membutuhkan domain dan hosting untuk kebutuhan website, cek pilihan paket hosting murah dan ekstensi domain terlengkap yang bisa kamu sesuaikan dengan kebutuhan bisnis di Qwords.
