Responsive Web Desain

Seiring berkembangnya Smartphone dan Tablet , berkembang pula pembuatan website yang dikhususkan untuk pengguna mobile. Saat ini ada 3 cara yang paling populer dalam mengimplementasikan website untuk diakses digadget dengan keterbatasan layar yang kecil dengan antarmuka touchscreen. Tiga teknik yang akan saya jelaskan adalah Mobile site,  Dynamic Serving, Responsive design.

Responsive Web Desain
Responsive Web Desain

Mobile Site

Mobile site juga sering disebut juga dengan teknik separete URL karena pembuat web harus membuat dua versi untuk webnya. Biasanya mobile site menggunakan subdomain m atau mobile di urlnya. Contohnya m.detik.com, m.facebook.com dan sterusnya. Teknik ini adalah teknik paling lama dan sekarang sudah mulai ditinggalkan. Berikut ini adalah kelebihan dan kekurangannya

Kelebihan 

  1. Loading lebih cepat karena content yang di load lebih sedikit.
  2. Mampu berfungsi dengan baik bahkan di Feature phone

Kekurangan

  1. Repot karena harus membuat dua versi website versi desktop dan versi mobile
  2. Tidak bagus dari sisi seo karena ada dua alamat url untuk content yang sama.
  3. Biasanya tampilan dari mobile site tidak menarik karena fokus pada “yang penting content bisa dibaca”.

Dynamic Serving

Dynamic Serving digunakan untuk mengatasi permasalahan SEO di mobile site. Dengan dynamic serving, dari manapun user mengakses, baik dari feature phone, smartphone,atau desktop Browser) alamat URL Tetap sama dan ini sangat bagus buat SEO. User akan mendapatkan website sesuai dengan device yang sedang dipakainya dan tanpa mengakses URL yang berbeda.

Kelebihan

  1. Content disesuaikan dengan perangkat
  2. bekerja dengan baik disegala perangkat jika di implementasikan dengan benar
  3. Menggunakan satu URL sehingga bagus buat SEO.

Kekurangan 

  1. Implementasinya cukup rumit karena kita harus mengimplementasikan semau proses di server
  2. Harus mendata user agent di setiap gadget/device
  3.  Proses redirect menyebabkan waktu akses menjadi lebih lama

Responsive Web design

Teknik ketiga inilah yang sedang trend di dunia Web.  Teknik ini memanfaatkan Meta View Port di HTML5. Apa kelebihannya?

Kelebihan

  1. Implementasi Mudah karena hanya menyediakan satu website dan satu base code
  2. Bagus buat SEO karena hanya menggunakan satu URL
  3. Tampilan halaman web akan menyesuikan diri dengan perangkat user (adaptive)

Kekurangan 

  1. Boros Bandwidth jika diakses dari perangkat feature phone/smartphone karena content sama persis dengan web desktop
  2. Waktu loading sama dengan waktu loading akses desktop
  3. Responsive web design hanya berjalan untuk perangkat yang mendukugn HTML5 Meta View Port

Dari penjelasan diatas, tidak ada teknik yang paling bagus, yang ada adalah yang paling sesuai dengan budget, Kemampuan developer  dan besarnya website. Namun jika dilihat dari sisi teknis, maka teknik Responsive web Design adalah yang paling mudah di implementasikan  bahkan oleh orang awam sekalipun. Jika anda memakai wordpress, teknik ketiga ini lebih mudah lagi karena cukup mengunakan Thema WordPress yang responsive.

Untuk mengimplentasikan cara diatas, sudah banyak tutorial di internet, namun jika sempat saya akan memberi contohnya di lain waktu.  Referensi lebih lanjut tentang 3 teknik diatas bisa dibaca di link berikut :

  1. Mobile SEO, https://developers.google.com/webmasters/mobile-sites/mobile-seo/
  2. A Cheat Sheet for Mobile Design: Responsive Design, Dynamic Serving and Mobile Siteshttp://www.bruceclay.com/blog/mobile-design-cheat-sheet/
  3. A Comparison of Methods for Building Mobile-Optimized Websites, http://sixrevisions.com/mobile/methods-mobile-websites/

By Candra Adi Putra

Candra Adi Putra S.Kom adalah Alumni STMIK AKAKOM Yogyakarta. hubungi saya di candraadiputra (at) gmail (dot) com

Leave a Reply

Your email address will not be published. Required fields are marked *