Bagaimana Membuat Website Versi Mobile untuk Handphone, Smartphone dan Tablet

 

Penggunaan tablet ataupun smartphone beberapa tahun belakang meningkat sangat signifikan, banyak orang yang melakukan pekerjaan yang biasanya dilakukan menggunakan komputer mengalihkan sebagain besar kegiatannya menggunakan smartphone atau tablet, seperti ber–kirim email, membaca e-book atau majalah, menulis blog, dan browsing.

Untuk anda yang bergerak di bidang web 

development sudah seharusnya anda perhatikan pula untuk tampilan di tablet atau di smartphone, memang memerlukan sentuhan khusus agar tampilannya sesuai dengan yang diharapakan atau setidaknya masih bisa terlihat seprti sebuah WEB. 

Ada beberapa hal yang perlu anda perhatikan dalam pembuatan web versi mobile diantaranya

1. Clean Code

Sangat disaranakan jika anda membuat web design sebaiknya anda menggunakan tag DIV jika anda masih menggunakan TABLE sudah saatnya anda Move On, penggunaan TABLE dalam web design selain tidak fleksibel misalkan anda tidak bisa menggunakan tag margin untuk mengatur jarak antara table walaupaun anda masih bisa mengatur dengan menambahkan tag TD, selain itu jika anda membangun sebuah web dengan harapan Responsive Design saya jamin anda tidak akan berhasil, dan seharusnya penggunaan TABLE adalah untuk data yang berbentuk tabel bukan untuk LAYOUT

2. CSS Media Query / Responsive Design

CSS Media Query pada intinya menghilangkan beberepa bagian tampilan web atau mengatur kembali posisi dan beberapa value CSS yang nantinya disiapkan khusus untuk tampilan mobile website di Smartphone atau Tablet, sebagai contohnya jika anda membuka website Samarata.com menggunakan komputerdesktop atau laptop silahkan resize ukuran browsernya maka tampilannya akan mengikuti ukuran browser dan tampilannyapun akan berubah. Ini dinamakan Responsive Design, posting berikutnya kita akan bahas cara membuat responsive design

3. Membuat Website Khusus Versi Handphone atau Smartphone

Berbeda dengan responsive, jika menggunakan website khusus untuk versi smartphone atau handphone artinya anda membuat folder dan file coding terpisah, anda bisa menggunakan jQuery Mobile untuk pembuatannya atau anda bisa membuat versi anda sendri,kemudahan manggunakan jQuery mobile disana anda sudah disiapkan segala kebutuhan anda hanya perlu memanggilnya, untuk penggunaan anda bias melihat panduan penggunaannya

Cara kerjanya yaitu jika pengunjung menggunakan handphone maka akan secara otomatis di arahkan ke website versi mobile, tetapi anda perlu menyimpan coding tertentu agar website bisa mendeteksi mana yang menggunakan handphone/smartphone dangan pengunjung yang menggunakan komputer desktop atau laptop, cara untuk membedakan biasanya berdasarkan resolusi layar.

Khusus untuk tablet, website yang muncul sama seperti versi desktop karena rata-rata untuk tablet resolusi 1024 px. Pembuatan website versi handphone cukup efektif jika target pasar anda adalah pengguna handphone dengan OS selain Android ataupun iOs. Dan URL pun berbeda misalakan anda menggunakan m.domain-anda.com atau mobile.domain-anda.com

Kesimpulan:

Jika anda hendak membuat website versi mobile sebaiknya anda tes pula di beberapa handphone yang memiliki OS berbeda yakni Android, Nokia, Symbian, iOS, minimal satu dari setiap OS tersebut, jika memungkinkan tes pula di resolusi layar yang berbeda, memang proses ini memakan waktu, jika tampilan tidak terlalu rumit kami saranakan untuk menggunakan jQuery Mobile penggunaan yang mudah selain itu kompatibel hampir di seluruh device.

Bagaimana dengan anda apakah memiliki solusi lain, silahkan berbagi di kolom komentar.