Template responsive merupakan jenis template yang paling populer saat ini, template ini datang dengan membawa satu keunikan yaitu mampu beradaptasi dengan lebar area browser. jika dilihat ini memang sangat menguntungkan bagi para designer web dan ada juga yang menyediakan framework seperti contohnya bootstrap, yang pada dasarnya bertujuan untuk mempermudah pembuatan layout jadi kita hanya menyesuaikannya kembali agar bisa sesuai dengan keinginan sendiri.

Akan tetapi template responsive sendiri tidak datang sendirian dengan satu keunikan yang berujung meraih keuntungan karena dia didampingi oleh satu kelemahan yang mungkin tidak begitu terasa namun sangat terasa jika memiliki konektivitas internet yang lambat.

Kelemahannya adalah browser akan mengambil seluruh kode yang ada di website tersebut baik dari javascript, css, maupun code html. namun terkadang ada beberapa element yang tidak diperlukan bahkan secara otomatis dihilangkan dimuat dalam browser. ini memang tidak terasa pada browser desktop tapi ini akan terasa pada browser mobile.

Hari ini saya akan memberikan tips mengenai membuat template responsive untuk mobile yang pastinya ini akan berpengaruh pada versi desktopnya jika ditinjau dari penggunaan HTML, CSS, dan Javascript saja. sisanya seperti PHP yang menggunakan code untuk mendeteksi browser apa yang digunakan maka mungkin hanya beberapa saja yang bisa digunakan.

Gunakan Javascript yang seperlunya

Perlu diketahui penggunaan javascript yang terlalu banyak dapat menyebabkan beban transfer data yang akan diminta oleh browser menjadi lebih besar, belum lagi jika terdapat javascript yang conflict antara yang 1 dengan yang 2 mungkin ini akan menyebabkan masalah yang begitu panjang.

Tips Pertama yang mungkin saya berikan yaitu gunakanlah javascript yang seperlunya karena template responsive berfungsi untuk menyesuaikan template halaman website pada luas daerah browser yang digunakan, namun jika tidak bisa maka kalian dapat menggunakan beberapa fungsi php seperti get_browser atau wp_is_mobile pada wordpress.

Kurangi penggunaan gambar dengan size besar

Tidak berarti menggunakan template responsive membuat website anda menjadi berat, pemasangan gambar yang tidak sesuai dengan petunjuk yang telah disediakan oleh pengembang framework atau memasang gambar dengan ukuran yang sangat besar seperti contohnya gambar High Definition (HD) akan menjadi masalah pada konektivitas internet yang lambat.

Tips Kedua yang mungkin untuk mengatasi ini yaitu cobalah untuk menggunakan gambar thumbnail, gambar dengan ukuran besar namun diresize menggunakan CSS dengan menggunakan code max-width:100%; tetap tidak akan merubah keadaan sebenarnya. untuk itu gunakan thumbnail generator atau pada wordpress menggunakan ukuran thumbnail pada fungsi the_post_thumbnail.

Gunakan Sistem Grid

Penggunaan sistem grid memberikan beberapa keuntungan yang sangat berguna pada saat melakukan peletakan komponen pada suatu halaman website, contohnya seperti penggunaan widget, peletakan sidebar, ataupun pembuatan komponen footer. (Baca : Mengenal sistem grid pada peletakkan web design)

Tips Ketiga yaitu gunakanlah sistem grid pada halaman website yang kalian buat, jika kalian menggunakan framework maka beruntunglah kalian. dikarenakan pada setiap framework terdapat grid yang memang dikhususkan untuk desktop dan ada pula yang dikhususkan untuk mobile sehingga peletakan menjadi lebih baik lagi.

Masukkan komponen yang seperlunya dibutuhkan

Tips Keempat atau Terakhir yaitu masukkan saja komponen yang memang dianggap perlu untuk dimasukkan ke halaman website yang kalian buat, ini ditujukkan untuk tidak membuat halaman website yang terlihat pada browser mobile menjadi lebih panjang atau lebar atau bisa dibilang over dari ukuran sebenarnya.

Kesimpulan

Dari artikel yang saya buat mengenai Tips membuat template responsive untuk mobile, saya dapat menyimpulkan bahwa tidak semua jenis template datang dengan banyak keunggulan bahkan tidak datang dengan kelemahan. jika kalian tidak bisa menggunakan template responsive saya menyarankan untuk menggunakan plugins (jika ada), namun jika tidak ada maka belajar lagi untuk mengetahui bagaimana cara menggunakan template responsive yang benar agar pengunjung tertarik untuk sering mengunjungi situs yang kalian kelola.