Tau ngga.. banyak sekali pengguna internet browsing lewat HP – khususnya kalau fesbukan?Jika kita promosi link di posting status facebook, yang paling bikin orang males nge-klik adalah karena mereka pake mini browser di gadgetnya. Tau sendiri kan.. kalau membuka halaman website/blog lewat HP harus pake acara zoom – khususnya untuk layar-layar ukuran kecil. Makanya jadi males nge-klik. Padahal pengunjung yang pake HP ini juga merupakan potential customer.
Gimana caranya supaya website/blog kita menjadi mobile friendly – ngga pake acara zoom kalau kalau pas membukanya di gadget atau mini browser?
Berikut tips cepat melakukan optimisasi untuk menyulap blog jadi mobile friendly kurang dari 5 menit.
WordPress Mobile Blog Plugin
Plugin ini akan menyulap blog Anda menjadi mobile friendly dengan cepat. Cukup upload plugin dan theme maka selesai. Berikut ini ttg bagaimana caranya:
- Download Pluginnya di sini
- Extract
- Upload file wp-mobile.php ke direktori plugins
- Upload folder carrington-mobile-1.0.2 ke direktori themes
- Aktifkan plugin dari admin dashboard
Kalau sudah yakin plugin aktif, sekarang Anda bisa cek apakah blog sudah mobile friendly. Caranya dengan cek buka alamat blog di mini browser gadget Anda, atau bisa juga dengan Mobile Web Emulator, atau cek saja di W3C MobileOk Checker.
Catatan: Untuk blogspot silahkan minta optimisasi sama tim blogger. Walau di sana ada setelan buat mobile blog optimization, tapi nyatanya pas di buka di HP masih aja harus nge-zoom juga 
Deteksi User Agent Menggunakan PHP, Kemudian Redirect Ke Alamat mobi.
Nah.. gimana kalo website tidak dibuat dari wordpress?
Asalkan dibuat dengan PHP, maka tip di bawah ini berlaku. Yang perlu kita lakukan adalah membuat sub-domain untuk tujuan redirect jika mobile browser terdeteksi.
Pertama
Buat folder di bawah public_html (www) dan namai itu seperti misalnya m atau mobile. Kemudian bikin sub-domain dengan nama seperti itu juga sehingga nanti kita punya alamat seperti http://mobile.nama-domain.com.
Buat folder di bawah public_html (www) dan namai itu seperti misalnya m atau mobile. Kemudian bikin sub-domain dengan nama seperti itu juga sehingga nanti kita punya alamat seperti http://mobile.nama-domain.com.
Kedua
Copy-paste kode PHP di bawah ini pada permulaan file index.php
Copy-paste kode PHP di bawah ini pada permulaan file index.php
<?php
$mobile_browser = '0';
if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i',
strtolower($_SERVER['HTTP_USER_AGENT']))){
$mobile_browser++;
}
if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),
'application/vnd.wap.xhtml+xml')>0) or
((isset($_SERVER['HTTP_X_WAP_PROFILE']) or
isset($_SERVER['HTTP_PROFILE'])))){
$mobile_browser++;
}
$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
$mobile_agents = array(
'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
'wapr','webc','winw','winw','xda','xda-');
if(in_array($mobile_ua,$mobile_agents)){
$mobile_browser++;
}
if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini')>0) {
$mobile_browser++;
}
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) {
$mobile_browser=0;
}
if($mobile_browser>0){
header('Location: http://mobile.nama-domain.com');
}
?>Ketiga
Anda perlu membuat desain tampilan untuk destination alamat mobile web, yaitu mobile.nama-domain.com. Ini adalah halaman yang akan dilihat oleh pengunjung yang menggunakan gadget / mobile browser. Secara singkat saya akan tunjukan sedikit HTML markup untuk mobile friendly site adalah sebagai berikut:
Anda perlu membuat desain tampilan untuk destination alamat mobile web, yaitu mobile.nama-domain.com. Ini adalah halaman yang akan dilihat oleh pengunjung yang menggunakan gadget / mobile browser. Secara singkat saya akan tunjukan sedikit HTML markup untuk mobile friendly site adalah sebagai berikut:
Ini adalah contoh halaman index.php untuk sub-domain mobile:
<?xml version="1.0" encoding="UTF-8""?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=UTF-8"/> <title>Judul Halaman </title> </head> <body> Konten halaman </body>
Anda bisa mendesain tampilan untuk elemen-elemen dengan menggunakan CSS. Hanya pastikan jangan pernah menggunakan table (<table>) untuk mendesain tampilan web. Untuk markup dan CSS bisa dipelajaridi sini.
Enjoy
0 komentar on "Cara membuat blog jadi mobile friendly"
Posting Komentar