Pasang Mobile Theme

Tambahan untuk readability

Yak, karena protes tambahan dari FajarMcXoem dan NengBiker, setelah install theme sebelumnya, saya cari-cari lagi plugin untuk ngubah jadi mobile theme yang bagus. Sebenarnya saya agak ogahan pasang mobile plugin ini, karena masalah sekuritas atau keamanan (katanya temen yang heker sih). Tapi demi kemudahan membaca bagi pengunjung yang pakai mobile browser, saya install deh plugin ini.

Saya cari-cari plugin yang relatif aman dan enak dipakai, sekaligus tersedia theme yang simple nan menarik. Cukup lama saya browsing mencari plugin ini. Dan akhirnya saya nemu yang cocok sesuai selera saya. Sebuah plugin yang langsung terintegrasi dengan theme yang sederhana. Plugin ini namanya adalah HandHeld.

Nggak asal langsung pakai pastinya. Saya perlu banyak sesuaikan style tampilan agar mirip-mirip dengan versi desktop-nya. Warna background, logo, ukuran, dan margin saya sesuaikan lagi. Masih banyak ternyata yang harus diedit. Yang paling parah adalah bagaimana menampilkan image menjadi sesuai ukuran device bila ukuran lebar device lebih kecil daripada ukuran gambar.

Sedikit coding, saya buat script dengan jQuery untuk deteksi event resize, terus dicek apakah gambar lebih besar daripada lebar layar. Kalau iya, maka gambar akan ditampilkan lebih kecil daripada lebar layar. Cukup lama juga bikinnya karena ternyata struktur kode HTML theme aslinya kurang konsisten. Jadi kode javascript-nya kadang bisa kadang nggak.

Untuk membantu pengembangan, saya tambahkan addon User Agent Switcher. Tentu saja Firebug tetap jadi rajanya untuk live prototyping. Setelah itu, edit file css dan php aslinya, dan langsung upload. Testingnya langsung online sih, karena repot kalau mau test offline kalau post-nya gak diimport.

Overall, setelah saya coba-coba dan edit berkali-kali (meski sudah online), saya cukup puas dengan hasilnya. Setidaknya sekarang blog saya ini sudah bisa dilihat lebih nyaman di mobile browser. Tapi sepertinya sih tetap mobile browser yang support javascript. Kalau pakai mobile browser seperti opera mini sih, sepertinya tetep gak support.

Buat yang lagi akses blog ini via desktop, bisa lihat skrinsut tampilan mobile-nya ― yang di-capture dengan Firefox + User Agent Switcher as iPhone 3 ― di bawah ini.

Tampilan mobile untuk blog ini

16 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.