Pengguna perangkat mobile saat ini sudah mendominasi kunjungan pada website, sudahkah sahabat Qwords 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 Anda miliki sampai sekarang belum menerapkan responsive web design, berikut ada beberapa alasan yang perlu diketahui:
- Memudahkan pengguna untuk mengakses website Anda.
- 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 Anda sehingga crawl budget bisa lebih aman.
- Meminimalisir duplicate konten
- Tampilan responsive lebih mudah merangking di halaman pertama Google.
Baca juga: WordPress Responsive Theme: Pengertian & Contohnya
Syarat Website 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 Anda 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.
Anda perlu menambahkan kode CSS berikut agar ukuran gambar tidak melebihi atau kurang dari layar pengguna.
img { max-width: 100%; height: auto; }
script CSS diatas 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 Cek Responsive Website
Jika semua syarat diatas sudah Anda lakukan dan berhasil tidak ada masalah, kini saatnya Anda mengecek menggunakan tools apakah website Anda 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 Anda buka website yang Anda miliki, kemudian “Klik Kanan” pilih “Inspect”.
Kemudian silahkan klik ikon tablet/smartphone seperti gambar dibawah ini kemudian silahkan pilih “Dimensions”, sesuaikan ukuran gadgetnya apakah Anda 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 Anda akses di URL berikut https://search.google.com/test/mobile-friendly.
Anda 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 Anda Sudah Responsive Web Design?
Bagaimana setelah melakukan serangkaian pengujian diatas apakah website Anda sudah mobile friendly?
Jika masih ada kendala silahkan perbaiki ulang mana yang jadi penyebabnya.
Sebelum ditutup bagi Anda yang membutuhkan domain dan hosting untuk kebutuhan website kami memiliki rekomendasi di Qwords.com.
Terdapat banyak pilihan paket hosting murah dan ekstensi domain terlengkap yang bisa Anda sesuaikan dengan kebutuhan bisnis.
Selamat mencoba
