Skip to main content

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)

Comments

Artikel Viral

Kuliah Itu Berapa Tahun Sih? Ini Jawabannya

Saya sering mendapat pertanyaan dari pengunjung blog

"kak, kuliah itu berapa tahun?" atau

"om, Kuliah S1 sampai berapa semester?" atau

"bang, semester kuliah ada berapa?"

Saya sangat senang mendapatkan pertanyaan-pertanyaan diatas.

Artinya kamu yang saat ini baru mulai kuliah, sudah mempersiapkan masa depan kamu dengan tidak ingin berlama-lama di kampus.

Untuk menjawab pertanyaan-pertanyaan dari pembaca pencaricerah.com diatas saya sedikit mengalami kesulitan.

Apa itu?

Soalnya saran yang saya berikan di tulisan kuliah itu berapa tahun? berbeda sedikit dengan pengalaman.

Jangan lewatin 7 Cara Berpakaian Untuk Mahasiswa Baru

Namun saya berharap kamu bisa belajar dari pengalaman saya yang tidak sesempurna tulisan ini.

Mungkin yang bertanya sedang menghitung berapa biaya yang harus dikeluarkan saat kuliah atau mungkin juga sedang merencanakan apa yang bisa ia lakukan disela-sela perkuliahan.

Berdasarkan pertanyaan yang beberapa kali muncul di kolom komentar beberapa post…

TEMPAT MAGANG SASTRA INGGRIS PALING IDEAL, NO 1 PALING FAVORIT

Tempat magang sastra inggris? Emang ada? Itu pertanyaan saya yang muncul ketika membaca tulisan dari blogger Ran-Chan no Hibi. Sebagai alumni sastra inggris saya sama sekali baru tahu kalau ternyata ada tempat magang bagi mahasiswa sastra inggris. Seandainya informasi ini saya dapatkan ketika kuliah tentu jalan hidup saya berbeda.
Karena itu saya ingin membagikan informasi yang cukup penting bagi kamu, mahasiswa sastra inggris, yaitu tempat magang sastra inggris.
Magang itu apa sih? Magang adalah sebuah kesempatan untuk mengintegrasikan pengalaman yang berhubungan dengan karir ke dalam pendidikan sarjana dengan berpartisipasi dalam pekerjaan yang terencana dan diawasi. (https://ekoyanto.files.wordpress.com/2011/11/apakah-magang-itu1.pps)
Dari pengertian diatas maka anda akan melihat ada perbedaan antara magang dan kerja sambilan. Walaupun sama-sama diawasi dan pekerjaan yang dilakukan terencana, perbedaan magang dan kerja sambilan terdapat dalam hubungannya dengan pendidikan sarjana.

Mengatasi Sitemap Error Pada Google Search Console

Mengatasi sitemap error pada google search console - Sitemap artinya secara harafiah adalah peta situs. Kegunaannya seperti peta yang kita kenal selama ini yaitu memberikan gambaran kepada PENGUNJUNG tentang area (baca:konten) yang sedang disinggahinya saat ini di situs/blog yang dikunjungi.

Situs yang mempunyai sitemap yang bagus dan terperinci akan menjadi primadona bagi mesin pencari seperti google. Tapi kenapa saat submit url di google webmaster malah muncul error peta situs anda terlihat seperti laman html. pakai format peta situs resmi? 

Bagaimana cara mengatasi sitemap error tersebut di Google Search Console?

Mari kita pelajari sama-sama.