#Apa Itu Responsive Design?
Pengertian Desain web responsif atau disebut juga Responsive Web Design adalah sebuah teknik yang digunakan untuk mendesain sebuah website agar tampilannya secara otomatis dapat menyesuaikan viewport device (resolusi layar perangkat) yang mengakses
Dulu sebuah website hanya didesain untuk komputer desktop
Namun seiring perkembangan jaman muncullah laptop, tablet, handphone, smartphone dll
Masing masing gadget tersebut memiliki vieport yang berbeda (area website yang terlihat) dikarenakan lebar device yang berbeda
Contoh Kasus Desain Responsive :
Sebuah website didesan dengan lebar fix yaitu 1.000 px
Ketika sebuah device yang hanya memiliki lebar 500 px mengakses website tersebut, Maka yang terlihat pada layar handphone (viewport) hanya setengah dari website tersebut
Teknik responsive design digunakan untuk menutup kelemahan viewport masing masing device yang berbeda
Fungsi Responsive Design
Ngapain sih sibuk dengan responsive design, blog saya tetap rame kok?
Fungsi Responsive Desain:
- Efektif dan Efisien (Biaya, Tenaga, dan Pikiran)
- Memberi Kemudahan Kepada Pengunjung (Improved User Exp)
- Meningkatkan SEO Score dimata Google
1. Efektif dan Efisien
Pilihan lain selain responsive design adalah membuat tampilan web yang berbeda untuk masing masing device (membuat versi mobile dan desktop)
Metode tersebut sangat tidak efisien karena besarnya biaya, dan energi yang harus dikeluarkan
Desain responsive menyederhanakan segalanya, kita cukup membuat 1 buah website yang tampilannya bisa berubah sesuai device yang mengakses
Dalam hal pemeliharaan, pembiayaan, tenaga, fikiran, penggunaan desain web responsive adalah the real winner
2. Improved User Experience
Keuntungan menggunakan design template responsive adalah user experience (pengalaman berselancar para visitor)
Bila website yang kita tampilkan hanya versi dekstop maka para visitor yang mengakses menggunakan mobile phone akan kesulitan
Harus scroll kesana kemari, membesarkan dan mengecilkan gambar dll
Endingnya score bounce rate akan tinggi (rasio visitor meninggalkan halaman) karena website susah dibaca
Tampilan desain responsive memberikan pengalaman berselancar yang nyaman bagi para visitor yang ujungnya visitor menjadi betah berlama lama di website kita
3. Meningkatkan SEO Score
Iya, penggunaan responsive design meningkatkan seo score di mata google !!
Pernyataan di atas bukan saya yang bilang, namun google sendiri dalam postingan Responsive Web Design
Kata Google, Alasan mengapa kita harus menggunakan Responsive Design adalah:
- Memudahkan user untuk sharing dan menautkan konten Anda dengan satu URL.
- Membantu algoritme Google menetapkan pengindeksan secara lebih akurat (daripada mengindex versi mobile dan desktop)
- Membutuhkan crawling
- Mengurangi resiko salah index versi mobile dan dekstop
- Mempercepat loading karena tanpa redirect halaman web versi mobile dan desktop
- Kerja Google Bot lebih ringan
Test Responsive Design
murid: Untuk mengetahui apakah blog yang kita bangun sudah responsive atau belum gimana?
Ada banyak penyedia layanan yang menyediakan jasa “test responsive website” secara online
Layanan gratis tidak dipungut biaya sepeserpun, teman teman dapat menggunakan ami.responsivedesign.is atau hresponsivedesignchecker.com
Bila tampilan blog teman teman sudah responsive maka selamat, namun bila belum maka “Wajib Ganti Template”
Download Template Responsive
Hampir semua template blog sudah didesain responsive oleh para developernya, termasuk juga template buatan Guru Blogger
Blog ini sendiri menggunakan template responsive dengan nama “SEO Aggressive”
Saya bagikan gratis, teman teman bisa langsung mendownload template responsive ini di halaman download (100% sama dengan yang saya gunakan)
Untuk performa dan tampilannya teman teman bisa test sendiri live site nya menggunakan web.dev atau google speed insight
Bila ingin mencoba template desain responsive buatan guru blogger bisa diunduh disini
Selamat belajar . . .