Apa Itu Responsive Design Pada Web? Guru Blogger Menjawab

#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:

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

  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”

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