How to redirect website to mobile browser friendly version

Mobile phones being smarter than ever before, ever wondered how some websites redirect you to the mobile version to make it easier to navigate. I use my Nokia E61i a lot for web browsing, while I am traveling. So it was obvious that I had to try this interesting feature 😉

Now back to the topic. I did a lot of Google search and found some very interesting websites which list down the process. Basically there are two methods.

1) If using WordPress, redirect to mobile friendly theme
2) Redirect to a mobile version of your website

1) If using WordPress, redirect to mobile friendly theme
This is one of the easiest method I found out yesterday.
There is a great plugin (WTap) which you need to install in your base website (e.g. here I did on www.abhiztips.com).
Then install a mobile theme as per your preference. You can find the themes here. I am using the Carrington theme.

After you have installed the plugin, you will get a “Mobile Detector” option in your WordPress Dashboard.

Click the link it will come up with a page something link this :

This plug-in is so awesome that it gives you the flexibility to define what you want to do for every device type. (a) You can select a theme which you want to present for a mobile OR (b) redirect the user to your mobile URL (e.g m.abhiztips.com).
As shown in the example above, I have redirected iPhone/iPad devices to the Carrington mobile theme and for “Palm” devices, I redirect them to my mobile website (m.abhiztips.com). Please note as soon as you put/select any entry for a device, you have to click the update button individually or else you will lose your changes you did until now 🙁
Once done, you are good to go!!!!

Another useful piece of information. I found out that my Nokia mobile browser was not redirecting properly, even if I had the settings for Nokia. Not to worry (did I tell you this plugin was awesome !). When you click the “Mobile Detector”, there is an option to add custom devices.

Here you can mention the device name (just a description) and the “Mobile Device Agent” (this is important). Look at the example below.

I have compiled a list of mobile device agents here
Now you need to configure what you want to do with this device (show a mobile theme or redirect to a mobile version URL). Thats it! When a user accesses your website from a Nokia browser, they will be redirected to the mobile theme instead. Isn’t that simple 😉

2) Redirect to a mobile version of your website
Another method is to redirect your base website to your mobile website URL by detecting which device is accessing your website. Download this file here . Update the variable $mobile="m.abhiztips.com"; to something like
$mobile="yourmobilesite.com";
If you are using wordpress, in your wordpress base directory, there is index.php. Edit the file and add the above entry (i.e from 0)

———–

{
header("location: $mobile");
exit;
}

}
?>

---------

 

Save the file and you are done!! You can call the php redirection script as well, it depends on you.

Now whenever someone accesses your website from a mobile device, they will be redirect to the mobile URL of your website!

For this method credit goes to Stepforth for providing the easy to use script.

I hope I was able to add some spice to your website 😉
Please post any doubts/questions/comments in the comment section below

If you liked my post, please provide some feedback, requests or suggestions about my blog here!

Update (31 Jan 2013):

It turns out that the second option was not described well. Let me elaborate. In the index.php of your wordpress directory, past the entire content of the file (located here) from the first line onwards. Make the required changes as necessary (for example update your site domain name, add any other mobile services etc.). The logic goes like this. As soon as anyone access your website, the index.php is the first file accessed. Having the above code in the first line determines the device type and automatically redirects the users to the mobile site if there is one or else continues. Hope this clarifies your doubts or else shoot a question in the comments below.

-Abhi