So what exactly the need of mobile app for your website? The wrong perception people are getting is that, mobile app helps their visitor go through their website easier – Yeah right. By downloading and installing an app to their mobile phone, then open up the mobile app just to see a duplicate content from your website? Instead of click to browser, type in address or better yet, scan the QR code on your business card and go to your website.

If you are running just a website, even an e-commerce, there is no need of a mobile app, but a mobile website. A mobile website works wonder if you take a look into it instead of taking time and cost to build a mobile app, that afterall, showing the same thing over again. It’s like installing a hydraulic pumps on your apartment, even the water is strong enough already.

As a web app enthusiastic, I believe that my “smart phone” can work wonder without much apps installed it in. You should too, consider a mobile website instead of mobile app. Because once you go to mobile app, you’ll need to create, iPhone app, Android app, BlackBerry app or maybe a Symbian app as well.

I am not keen with a list of plugins in my admin panel, so I found quite an useful snippet in a forum discussing how to automatic detect mobile browser and sent users to the mobile version . The snippet looks like this:

<?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://YourSite.mobi/mobile');
   } else {
   header('Location: http://YourSite.mobi/pc');
   }
   
?>

While it will automatic redirect users to the mobile version, it can however not direct users to another URL but another style sheet too.

if($mobile_browser>0){
   echo "<link rel=\"stylesheet\" href=\""; echo bloginfo('stylesheet_directory'); echo "/mobile.css\" type=\"text/css\" media=\"handheld\" />";
   } else {
   echo "<link rel=\"stylesheet\" href=\""; echo bloginfo('stylesheet_directory'); echo "/screen.css\" type=\"text/css\" media=\"handheld\" />";
   }

WordPress theme need style.css. All the information about the theme should be within style.css too. So I only place information on style.css and the rest of my CSS will bne in screen.css.

In functions.php, create the auto detect function:

function mobile_screen() {
$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['HTTP_USER_AGENT']),'OperaMini')>0) {$mobile_browser=0;}
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) {$mobile_browser=0;}

if($mobile_browser>0){
  echo "<link rel=\"stylesheet\" href=\""; echo bloginfo('stylesheet_directory'); echo "/mobile.css\" type=\"text/css\" media=\"handheld\" />";
  } else {
  echo "<link rel=\"stylesheet\" href=\""; echo bloginfo('stylesheet_directory'); echo "/screen.css\" type=\"text/css\" media=\"screen\" />";
  }
}

It is to be easy for front-end developing. For header.php, you’ll need to look for the function and display it:

<?php if (function_exists('mobile_screen') ) { mobile_screen(); } ?>

Do let me know if there is another easier way to do so, cause this is not a good way to implement as a mobile web yet. By the way, you can learn more about mobile web tips and technique here. Have fun!