Selamat Datang

Responsive Website vs Mobile Website

Pertumbuhan pengguna mobile device  melonjak dalam pertumbuhan yang luar biasa dalam beberapa tahun ini. Menurut data dari IDC tahun 2013 vendor smartphone mengapalkan 1 milyar smartphone ke seluruh dunia. Smartphone memiliki share sebesar 31,4% dari total mobile phone seluruh dunia. Yang mencengangkan pada tahun 2012 ada pertumbuhan sebesar 300 juta unit dengan rata-rata pertumbuhan 38,4%.

Saat ini personal computer (desktop dan notebook) tidak lagi mendominasi dalam mengakses konten web.  Mobile device seperti tablet dan smartphone memiliki populasi yang besar pula dalam mengakses konten website, browsing, bersosialisasi, berbelanja, bertransaksi. Pemain di jagat teknologi informasi seperti situs portal berita, blog, media sosial, web perusahaan berduyun-duyun go mobile.

RWD_vs_mobile

Menurut website Mashable pada August 2013, 17.4 percent dari global web traffic berasal dari mobile devices dan angka ini akan terus tumbuh sampai 2014. Ini berarti hampir 1/5 dari global web traffic berasal dari mobile device, apakah trend ini akan terus berlanjut di masa akan datang terus melaju atau malah melambat. Tidak ada yang bisa mengetahui dengan pasti, yang jelas trend ini sedang berlangsung.

Dalam tulisan ini saya ingin berbagi mengenai fenomena pertumbuhan luar biasa mobile device ini yang kaitannya dengan website yaitu responsive website dan mobile website. Membahas kelebihan dan kekurangan di antara keduanya. Sumber dari tulisan saya ini saya ambil dari beberapa blog yang membahas responsive web design dan mobile website.

Apakah Responsive Website dan Mobile Website

Responsive Website
Responsive website adalah website yang bisa menyesuaikan tampilan layoutnya berdasarkan ukuran viewport dari device yang digunakan mulai dari smartphone, tablet atau computer screen. Dengan responsive website bisa memberi pengalaman yang optimal bagi  pengguna dengan resizing, scrolling dan panning seminimal mungkin. Perkembangan teknologi mobile device begitu pesat melahirkan mobile device dengan ukuran layar yang berbeda dengan merek yang begitu variatif. Smartphone yang diproduksi oleh berbagai vendor memiliki varian ukuran. Dengan responsive website,  website bisa menyesuaikan dengan ukuran viewport device pengaksesnya.

Mobile Website
Mobile website secara prinsip adalah sama dengan website secara umum, yang dibuat dengan HTML, CSS, javascript, PHP. Namun perbedaannya adalah mobile website dibuat agar optimal untuk ukuran layar mobile device seperti smartphone atau tablet. Bila kita mengakses web yang memang dibuat untuk layar desktop komputer/laptop menggunakan mobile device maka akan ada scroll horizontal dan zoom yang tentu mengganggu kenyamanan pengguna (bad user experience). Adanya mobile website tentu tidak akan ada lagi masalah scrolll horizontal dan zoom dimaksud.

Dengan fenomena pertumbuhan mobile device penyedia konten merasa perlu membuat website secara terpisah, yakni website untuk pengguna dekstop dan mobile web untuk mobile user. Namun sejak gagasan responsive web design oleh Ethan Marcotte ada trend baru berupa ide satu website untuk semua device. Walaupun tidak lepas dari pro kontra juga ide satu website untuk semua device di kalangan web profesional, berikut kita lihat sisi kelebihan dan kelemahannya.

RWD_vs_mobile2

Kelebihan

Responsive Website

  • Dengan adanya responsive website berarti hanya memiliki 1 website namun bisa diakses oleh berbagai device dengan ukuran layar berbeda-beda
  • Dengan hanya memiliki 1 website berarti kemudahan dalam maintenance
  • Dengan hanya memiliki 1 website tentu lebih hemat biaya
  • Dengan hanya memiliki 1 hanya butuh 1 alamat domain
  • Dengan hanya memiliki 1 website tidak perlu upaya dan biaya tambahan untuk marketingnya, berbeda bila memiliki responsive website sekaligus mobile website

Mobile Website

  • Membuat mobile website tidaklah serumit membuat responsive website
  • Untuk news dan publikasi website kita bisa melakukan customisasi agar berita yang paling update, berita penting saja yang ditampilkan di mobile website
  • Dirancang sejak awal untuk diakses melalui smartphone dengan layar relatif kecil, sehingga pengguna akan mendapatkan user experience maksimal

Kekurangan

Responsive Website

  • Waktu loading yang lebih lama dibandingkan mobile web, karena responsive web harus me-loading semua image dan skrip yang ada
  • Mengganggu penempatan banner iklan, posisi banner iklan jelas akan terpengaruh dengan sifat responsive web yang menyesuaikan layoutnya berdasarkan ukuran layar devicenya. Seperti kita tahu banyak blog, news web yang mengandalkan pendapatan dari iklan
  • Pengembangan responsive website membutuhkan biaya lebih tinggi karena kompleksitas yang ada pada responsive website

Mobile Website

  • Dengan mobile website berarti harus memiliki dua URL berbeda. Sebagai contoh mobile website memiliki URL yang diawali huruf m. Bisa kita ambil contoh : www.m.detik.com
  • Dengan memiliki mobile website berarti ada 2 website yang berbeda yang harus dimaintain :  website utama dan mobile website. Ini berarti ada tambahan biaya.
  • Mobile website biasanya dibuat hanya untuk 1 ukuran layar, sebagai contoh smartphone dengan ukuran tertentu

Kesimpulan

Dari pembicaraan ini kita bisa lebih mengerti apakah cukup memiliki satu website saja yaitu responsive web atau dengan strategi memiliki 2 website terpisah yakni website utama (non responsive) dan mobile web untuk melayani mobile user.

Pilihan mana yang akan diambil dari kedua pilihan itu akan tergantung dari kebutuhannya dan strategi apa yang akan diambil sebagai respon terhadap pertumbuhan mobile user, website apa yang akan dibuat, berapa besar anggaran yang dimiliki.  Hal tersebut tentu menjadi pertimbangan dalam pengambilan keputusan.

Mengutip dari Ethan Marcotte, “most importantly, responsive web design isn’t intended to serve as a replacement for mobile web sites.”





Penulis :

Web designer, graphic designer and illustrator, love digital design. View all posts by iwan setiawan

Comments

15 thoughts on “Responsive Website vs Mobile Website

  1. untuk saat ini masih milih “responsive website”, ya walaupun sedikit berat, kan kecepatan internet kemungkinan akan bertambah dan tempat free wifi juga mulai banyak…
    kalo masalah diiklannya sih kurang begitu tahu, belum pernah dapet iklan soalnya.
    Itu aja sih menurutku, mohon dikoreksi jika salah

    • @Windu : semua tergantung kebutuhannya, bagi website yang trafficnya tinggi tentu kecepatan loading menjadi masalah serius

      klo iklan online seperti adsense kita gak bisa bikin responsive untuk imagenya, kecuali iklan punya kita sendiri

  2. Ya, kalau menurut aku, penggunaan responsive dan mobile site, kembali pada website itu sendiri. Kalau website besar sepertinya mending dibuatkan mobile site, mengingat responsive itu lebih banyak makan bandwidth, terutama di image ya. Apalagi di Indonesia, jaringan internet untuk mobile device masih memuaskan dari segi kecepatannya.

    Responsive itu keren kalau dipakai pada website promosi, atau website portfolio kita sendiri =p

    overall, menurut saya sebuah website perlu memiliki layout yang tampil rapi untuk dibuka di mobile device.

  3. herda says:

    om tlong bntuin sya,sya dpet tgas dari sklah buat layout pkek potoshop ukuran 800x 600,na supaya bisa pas di semua ukuran lyar itu gmna,,kan background’a poto yang udah ke potong2 gtu,,

  4. Kalo menurut ane utk ngakalin responsive yg agak berat..
    Sebenernya bisa dengan cara menggunakan compress gzip atau caching itu bisa sangat berguna sekali! Coba anda gunakan google page insight utk melihat kecepatan load website..

  5. Artinya kehadiran teknologi responsive website, bukanlah untuk menggantikan posisi mobile website, melainkan memberi pilihan kepada kita, mana yang lebih sesuai dengan kebutuhan kita terhadap mobile user. Betul ?

    Salam kenal. :)

  6. […] bagaimanapun ada perbedaan signifikan antara mobile website dan responsive website. Perbedaan pertamanya yaitu layout mereka terlihat agak berbeda. Yang kedua adalah bahwa domain […]

  7. aditya says:

    Saya ingin bertanya nih, website saya kan full responsive. Tetapi saat saya taruh banner iklan dengan ukuran 620×90 px ternyata di tampilan mobile tampak ke potong.

    Itu karena apa ya? mohon pencerahannya

  8. Arif says:

    Informasi yang sangat bermanfaat min. Kalau mobile website sama AMP berarti sama ya min?

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development