Responsive Template vs Mobile Friendly

Info Blog 97. Banyak orang (blogger) yang menganggap atau beranggapan bahwa sebuah website atau blog yang ramah seluler (mobile friendly) dan responsif (resnponsive template) itu adalah merupakan bentuk yang sama, padahal hal tersebut tidak saling terkait dan atau berbeda dalam ruang lingkupnya, lalu apa yang sebenarnya membedakan antara desain responsif dan ramah seluler tersebut ? Mari kita bahas.

Pengertian Desain Web Responsif dan Samah Seluler

Pengertian Desain Web Responsif
Responsif berarti tampilan sebuah web atau blog yang mampu menyesuaikan tampilan dengan segala jenis perangkat terutama dalam konteks ukuran layar dan resolusi layar. Sehingga pada desain web responsif, sumberdaya atau resource yang digunakan sama saja, dan lebih sering mengunakan media query untuk menyesuaikan tampilan berdasarkan perangkat yang dipergunakan.

Pengertian Desain Web Ramah Seluler (mobile friendly)
Website atau blog yang ramah seluler dapat mirip dengan website atau blog yang reponsive, perbedaannya hanya pada sumberdaya (resource) yang digunakan. Seperti kita ketahui bahwa perangkat seluler memiliki kemampuan yang lebih rendah dalam menampilkan halaman web dengan sumberdaya besar dan berat, untuk itu para pembuat website ramah seluler membuat pemuatan sumberdaya secara adaptif, tergantung perangkat yang digunakan selain itu juga bisa menggunakan desain website untuk seluler dan desktop yang berbeda.

Perbedaan

Seperti yang tertera di atas, bisa disimpulkan bawah website atau blog yang ramah seluler pasti responsif, namun website atau blog responsif belum tentu ramah seluler.

Mengapa Ramah Seluler ?
Nah ini merupakan pertanyaan umum yang sering ditanyakan kenapa sih, harus seluler (mobile) friendly ? Responsif aja kan cukup, iya ngak ? Begitu kiranya pertanyaan yang akan muncul di benak anda, seperti yang saya utarakan tadi, bahwa ramah seluler bukan hanya tentang tampilan, tapi lebih kompleks meliputi kecepatan, aksesibilitas, kenyamanan pengguna, dan kompabilitas.

Tahukah anda ? Di tahun 2015 ini diprediksi 52,4% akses Internet dunia berasal dari perangkat seluler, dan tahukah anda, waktu yang dibutuhkan untuk memuat sebuah halaman website desktop responsif pada perangkat seluler membutuhkan waktu 1,2 sampai 3 kali lipat lebih lama daripada perangkat desktop, jadi jika website atau blog anda membutuhkan waktu 2-3 detik untuk dimuat, maka di perangkat seluler bisa mencapai 6-9 detik, dan seperti yang kita ketahui, bahwa pengunjung akan meninggalkan sebuah halaman website jika membutuhkan waktu lebih dari 5 detik untuk berhasil di render.

Bagaimana Membuat Website Ramah Seluler

Secara garis besar, ada beberapa poin penting dalam membuat website atau blog menjadi ramah seluler, diantaranya :

Penyajian Sumberdaya DinamisHal ini sangat efektif terutama apabila anda mengurangi sumberdaya JavaScript, karena pada perangkat desktop saja JavaScript sering membuat suatu website menjadi berat, apalagi dengan perangkat seluler, benar ? Hal ini bisa dilakukan dengan menghilangkan beberapa elemen pada tampilan seluler atau membuat laman khusus untuk pengguna seluler. 

Biasanya, Penyajian Sumberdaya Dinamis pada website menggunakan Header HTTP Vary untuk mendeteksi perangkat yang digunakan. Sedangkan bagi blog yang menggunakan CMS seperti WordPress dan Blogger, bisa menggunakan fitur kondisional seluler untuk memberikan sumberdaya dinamis. Dan saya menggunakan metode ini untuk memberikan sumberdaya dinamis. 

Membuat Desain Web Responsif
Seperti yang saya sebutkan diatas, halaman ramah seluler pasti responsif, kenapa ? Karena perangkat seluler jauh lebih variatif daripada perangkat desktop, jika kebanyakan perangkat desktop memiliki aspek rasio 16:9, 4:3 atau 16:10, web yang ramah seluler harus mampu tampil sempurna di perangkat seluler dengan aspek rasio 16:9, 16:10, 4:3, 3:4, 10:16, dan 9:16, tentu lebih rumit bukan ?

Salah satu jalan pintas untuk mengimplementasikan RWD (Responsive Web Design) yang ramah seluler bagi anda yang tidak ingin pusing adalah dengan menggunakan jasa pembuatan website dengan RWD, atau membeli template yang responsif bagi blog atau website anda. 

Nah trik membuat RWD terakhir agar anda tidak membuang banyak waktu untuk mengubah tampilan website atau blog anda adalah membuat template dengan plugin framework responsif seperti Bootstrap dan sejenisnya, kebetulan saya juga pengguna framework Bootstrap.

Membuat Laman Web Khusus Seluler
Tentunya hal ini menjadi senjata pamungkas apabila anda kesulitan melakukan hal-hal di atas, anda bisa menggunakan penanda URL khusus seperti query string atau subdomain untuk website atau blog versi seluler milik anda, untuk blogger, sudah disediakan fasilitas query string ?m=1 sebagai penanda website seluler, dan apabila anda menggunakan cara ini, jangan lupa menambahkan tautan rel='alternate' dari :

    Versi seluler ke versi desktop;
    Versi desktop ke versi seluler;

Untuk mengatasi deskripsi meta duplikat dan juga indeks duplikat di search engine, selain itu pastikan anda menambahkan tautan rel='canonical' menuju versi utama website atau blog anda (dekstop) baik dari versi seluler dan juga desktop. Hal ini bertujuan untuk menunjukkan website utama kepada mesin telusur.

Sumber : http://www.msm.web.id/2015/04/reponsive-desain-dan-mobile-friendly.html