About these ads

Responsive Web Design: Satu Tampilan Web Untuk Semua Perangkat Klien

Responsive web design merupakan sebuah parameter yang saat ini dijadikan standar baik bagi blogger maupun website untuk perusahaan. Website merupakan metode penjualan yang tidak baru di beberapa tahun belakangan ini.

Sebuah prediksi dari techinasia menyebutkan bahwa di tahun 2015 transaksi online di Indonesia akan mencapai Rp. 50 Trilyun. Bisa anda bayangkan jika dari total transaksi tersebut anda bisa mendapatkan minimal 0.1% ?

Artikel saya kali ini berawal dari keprihatinan saya terhadap tampilan antara website resmi perusahaan saya dan portal komunitas karyawan yang sangat berbeda. Tujuannya agar perusahaan dapat melihat ada yang kurang maksimal dari investasi berupa website yang telah diluncurkan.

Sebagai sebuah channel penjualan website megainsurance bisa dikatakan sama sekali tidak menjual. Kenapa? Pada saat ini teknologi website sedang berkembang kepada responsive web design. Dengan menggunakan teknik desain ini perusahaan cukup membuat satu tampilan website yang tidak akan berubah kala diakses oleh klien di perangkat yang dimilikinya.

Dengan perkembangan teknologi yang sangat pesat saat ini hampir semua informasi yang diakses oleh seseorang berawal dari perangkat yang ia genggam saat ini. 61 % pencarian yang dilakukan oleh seseorang dilakukan melalui perangkat mobile sebut google dalam salah satu artikel yang mereka rilis.

Dari 61 % pencarian melalui perangkat mobile tersebut 21% pengunjung yang berasal dari mesin pencari memilih sebuah website yang loadingnya kurang dari 10 detik akan menerima kunjungan lebih banyak dibandingkan dengan website yang mempunyai loading lebih dari itu.

Salah satu kekurangan tampilan website yang belum menggunakan responsive web design adalah durasi waktu yang dibutuhkan agar informasi dalam website tersebut muncul. Lalu Bagaimana cara mengetahui sebuah website responsive atau tidak?

Ada dua metode yang bisa anda lakukan.

#1 anda dapat mengetikan alamat situs yang akan diakses. Contoh yang saya ambil adalah situs perusahaan saya megainsurance.co.id. Berikut tampilan website megainsurance yang diakses melalui pc atau komputer

tampilan website di desktop

Jika seseorang ingin mencari informasi polis asuransi melalui perangkat mobile yang dimiliki maka tampilan website diatas akan terlihat seperti gambar dibawah;


Dari dua gambar yang saya sampaikan diatas terlihat bagaimana jika seseorang yang mengakses untuk situs di desktop dan perangkat mobile mendapatkan perbedaan. Untuk perangkat mobile pengunjung harus melakukan double tap di layar perangkat mobile mereka untuk membaca informasi tentang produk asuransi yang dicari.

#2 dengan mengunjungi situs mobile friendly test yang disediakan oleh google. Tool ini dapat anda gunakan secara gratis saat ini juga.

Dapat dilihat bahwa tampilan website megainsurance saat ini akan membuat pengunjung lari dari situs sebelum mereka membaca atau mendapatkan informasi tentang produk asuransi yang mungkin sedang dicari.

Hal yang sangat bertolak belakang dapat terlihat di website internal karyawan, portal megainsurance. Dengan menggunakan wordpress self hosted tampilan portal dapat diakses dari perangkat mobile manapun.


Ketika pengunjung datang ke portal megainsurance dengan menggunakan desktop maka tampilannya akan terlihat seperti gambar diatas. Jika seorang pengunjung mengakses portal dengan menggunakan perangkat mobile yang dimiliki maka tampilan portal akan terlihat seperti gambar dibawah:

tampilan portal yang menggunakan responsive web design
Seperti yang terlihat pada dua gambar dari cara akses yang berbeda anda bisa melihat tampilan portal megainsurance tidak mengalami perbedaan baik saat diakses melalui desktop ataupun perangkat mobile.

Template yang digunakan oleh portal megainsurance dimana tampilannya dapat menyesuaikan lebar dari layar yang sedang mengakses itu yang dimaksud dengan responsive web design. Untuk mendapatkan tampilan website yang dapat beradaptasi dengan layar perangkat yang sedang digunakan ini tidak sulit. (Anda dapat membaca artikel saya tentang membuat template blog sendiri di blog pribadi saya)

Sudah banyak website besar yang menggunakan teknologi ini, coba anda akses detik.com baik di komputer maupun di smartphone. Pastinya anda akan menemui hal yang sama yaitu tampilan yang tak jauh beda antara pengguna mengakses melalui komputer maupun menggunakan gadget.

Penerapan teknologi Responsive Web Design sendiri tidak memerlukan tambahan alat khusus jika kita memahami kode pembentuk dari website. Dengan tambahan kode CSS yang dimodifikasi dari W-3 CSS website megainsurance akan tampil dengan baik di semua gadget. Dengan kemampuan akses website di segala gadget maka tentunya website yang dimiliki akan mampu untuk lebih dekat kepada pelanggan dan lebih mendengar kebutuhan-kebutuhan mereka.

(Update: situs megainsurance telah direnovasi setelah tulisan ini diterbitkan)

About these ads

Leave a Reply

%d bloggers like this: