Apa Itu Responsive Design Pada Web? Guru Blogger Menjawab

Apa Itu Responsive Design Pada Web? Guru Blogger Menjawab

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 didesaiin 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



pengertian-responsive-design-website

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


murid: Ngapain sih sibuk dengan responsive design, blog saya tetap rame kok?


Fungsi Responsive Desain:

  1. Efektif dan Efisien (Biaya, Tenaga, dan Pikiran)
  2. Memberi Kemudahan Kepada Pengunjung (Improved User Exp)
  3. 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 akan 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:

  1. Memudahkan user untuk sharing dan menautkan konten Anda dengan satu URL.
  2. Membantu algoritme Google menetapkan pengindeksan secara lebih akurat (daripada mengindex versi mobile dan desktop)
  3. Membutuhkan crawling
  4. Mengurangi resiko salah index versi mobile dan dekstop
  5. Mempercepat loading karena tanpa redirect halaman web versi mobile dan desktop
  6. 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 Guru Blogger V.1.1.1"

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

Tampilan template responsive blog Guru Blogger kurang lebih seperti ini:

template-blog-seo-friendly-responsive-design-mudah-diedit

Selain powerfull template ini juga mudah diedit, download sekarang : Template Blogger Responsive Terbaik


Selamat belajar . . .



Komentar
Silahkan, saya ga nggigit !