How to redirect website to mobile browser friendly version


mobile-theme2

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!

-Abhi


Related Posts

No related posts found



Abhiz photo collections! Hope you liked the post from ! It's his hobby to try new things and he loves sharing it with everyone (remember "Sharing is Caring" ;-) ). If you liked this post and want to show your appreciation, please use one of the affiliate banners of Webhosting HUB OR Namecheap.com to make a purchase as this will generate a small profit margin which will be used to support this website. Even small donations are welcome (use the donation button on the right sidebar). Please do note that the information provided on this website will always be FREE!! To be informed about latest posts you can Subscribe here!!
You can leave a response, or trackback from your own site.
  • Dasher X

    Hey Abhishek,

    Can you post a tutorial here on the second method? I am having trouble setting it up properly (have read post and earlier comment) on WordPress. Reason for opting method 1 – I don’t want to install a plugin if a solution is possible manually.

    Any help would be really appreciated.

    • http://www.amlabc.com Abhi

      Sure, I will post it in a couple of days. I will post a link here.

  • Rachel

    How do I redirect to a mobile theme in WordPress using the second option? 

    • http://www.amlabc.com Abhi

      Make a backup of the index.php file located in the root directory. Then edit this file and add the entry as provided in the file from line 0 (do provide the correct sitename) and then save it. 

      This should work. By the way for wordpress I would recommend using the first option.

      -Abhi

      • Rachel

        Thanks, Abhi! 

Powered by WordPress | Designed by: free Drupal themes | Thanks to hostgator coupon and cheap hosting