icon/dark/fileicon/dark/foldericon/dark/folde-openicon/dark/hashtagicon/dark/line-graphicon/dark/listicon/dark/localicon/dark/lock

Have you ever tried typing the URL m.facebook.com on your desktop? Try it, and you will see that the site looks weird on the big screen.

Similarly, try opening a random local website on your mobile. You might come across some sites that are not optimized for mobile and hence it throws you off at first sight. Such sites have a tendency to lose their mobile audiences to their competitors.

So what do we do to avoid such a situation for your local or global business website?

There are two important things that need to be taken care of in order to ensure a great mobile browsing experience for your mobile users:

1.Create a mobile website
2.Redirect your site for mobile users

Of course if you have a mobile website created using tools for responsive web design, you would not have to worry about redirecting your mobile visitors. However, not all businesses can afford to create responsive websites. In such cases, a separate mobile website is the only option for businesses.

Now, if you do create a separate mobile website but do not configure it to redirect to your mobile users in the right manner, all the time and effort put into creating a mobile website would go futile.

Hence, today we are going to discuss the different ways in which you can redirect mobile users to your mobile site. Redirects are only applicable if you have a separate mobile website.

How Does The Redirect To Mobile Website Work?

Now that you are about to learn how to redirect your mobile users to your mobile website, you must also know how the redirect works.

There is the desktop browser for users of desktop, and mobile browsers for users of mobile. Both these browser types send data in the form of a ‘user-agent’ to the web server where your website resides. This ‘user-agent’ contains information that will tell the web server of the type of device the browser is being open in. This information includes the name of the browser, version and other information about your operating system.

For instance, try entering the following URL on your smartphone – detectmobilebrowser.com. The information you see there is somewhat similar to the information sent to your web server from all the mobile device that your website is being accessed from.

Other than the ‘user-agent’ method of detection, there is one more factor that helps detect mobile users. That factor is the screen resolution. However, with modern devices, screen resolutions are higher for even smaller smartphone screens. Hence the user-agent factor is the most common method used to identify mobile users.

Now, let’s come down to business and talk about the various methods by which you can apply a redirect to your site for your mobile users.

The Plugin Method

If you are using a Content Management System (CMS) platform such as WordPress or Joomla, you are in luck. They have ready-made plugins that help redirect mobile users to your mobile website.

Some of these CMS-specific mobile redirect plugins are as follows:

For WordPress –Simple Mobile URL Redirect, WordPress Mobile Pack
For Joomla – Simple Mobile Detection
For Magento – Theme Switcher
For Drupal – Simple Mobile Redirect,Mobile JS Redirect
If your website is created in any other CMS, try a Google search for a plugin that helps with mobile redirects for that particular CMS.

The JavaScript Method

Using a JavaScript code you can redirect your mobile visitors to your mobile site. This JS code can either detect screen size or the user-agent.

The JS code that uses the screen size is as follows:
<br /> &lt;script&gt;// &lt;![CDATA[<br /> if (screen.width &lt;= 800) {<br /> document.location = &quot;http://m.domain.com&quot;;<br /> }<br /> // ]]&gt;&lt;/script&gt;<br />

You will find this code in this article titled How to redirect your website to its mobile version.

The JS code that uses the user-agent is as follows:

You will find this code in this page titled Redirect mobile devices.

You can apply both these set of codes to your site. However, there are downsides to both these methods.

In the screen size method, you are defining the screen resolution but these days we do have smaller handheld device screens with higher resolution. This may end up in incorrect detection of mobile users.

In the user-agent method, it is tough to keep track of every new and upcoming user-agent and adding them to the JS code. There are many user-agents and this keeps constantly changing with developing technologies. For instance, take a look at this extensive list of user-agents.

And the biggest downside of all is for users that do not have JavaScript installed on their phones. Although, most phones are equipped with JavaScript some choose to disable it. Some old Blackberry models do not support JavaScript. In order to overcome these obstacles, you can use server side redirection for sites coded in PHP or ASP.

The PHP Method

If your site is coded in PHP you can use this method to redirect your mobile users. The advantage of using this method is that you are not limited to browsers that run on JavaScript. However, you will have to list multiple user-agents.

For this script to work your page extensions must be .php and your hosting account must support PHP. Add the following code to your website’s section.

 <br />
 &lt;!--?php &lt;br ?--&gt;   $iphone =      strpos($_SERVER['HTTP_USER_AGENT'],&quot;iPhone&quot;);<br />
    $android = strpos($_SERVER['HTTP_USER_AGENT'],&quot;Android&quot;);<br />
    $berry =      strpos($_SERVER['HTTP_USER_AGENT'],&quot;BlackBerry&quot;);<br />
    $ipod = strpos($_SERVER['HTTP_USER_AGENT'],&quot;iPod&quot;);<br />
    if ($iphone || $android || $palmpre || $ipod || $berry == true)<br />
    {<br />
       echo &quot;&lt;script&gt;// &lt;![CDATA[<br />
 window.location='http://m.site.com'<br />
 // ]]&gt;&lt;/script&gt;&quot;;<br />
  }<br />
 ?&gt;<br />

You will find this code in this post titled Simple PHP Mobile Website Redirect Code.

Replace ‘http://m.site.com’ with your mobile site’s URL.

The .htaccess Method

Another alternative method of redirecting the mobile user on to your mobile website, based on the MIME type the browser supports, is the .htaccess method. So for instance, if the browser type supports the MIME type that includes WML (Wireless Markup Language), the browser is from a mobile device.

You can place the code recommended in this article titled Redirect to a Mobile Site with .htaccess.

But before you do paste this code, make sure you backup your existing .htaccess file. Installing the .htaccess code incorrectly can cause problems in your site. If you are not sure how to do it yourself ask the help of a web developer.

Replace the http://m.example.com with your mobile website URL.

The New CSS @media Method

CSS has a built-in method to detect mobile browsers. It then displays CSS styles based on the browser window size. For this you do not require a separate mobile site. You need two style sheets within one webpage, the first for the “screen” media type (for desktop monitors) and the other for the “handheld” media type (for smartphones).

To implement this method you must paste the following set of codes in the tag of your HTML document.

  <br />
 /* Smartphones (portrait and landscape) ----------- */<br />
 @media only screen<br />
 and (min-device-width : 320px)<br />
 and (max-device-width : 480px)<br />
 /* Styles */<br />

You will find this code and many other variations in this page titled Media Queries for Standard Devices.

The downside to using this method are many. This method requires adding huge set of CSS code to the site. There are still some devices that do not support ‘handheld’ media type and render the pages with the ‘screen’ display settings instead.

Thus there are many ways to redirect mobile users to your mobile site, as listed above. You can place multiple scripts on your website’s head section, say for example the script that detects the screen size as well as the user agents.

But your job is not done until you have your mobile redirects working well for search engine bots as well. Especially, in the case of Google, there are some configurations that you need to do so that they differentiate between the desktop URL and mobile URL.

For more information read Google webmastercentral blog on Changes in rankings of smartphone search results and information on Google-supported redirection techniques.

You need to add a canonical URL to your mobile website, so that Google understands the relationship between your mobile URL and desktop URL.

You must add the following rel=”canonical” tag to your mobile URL (m.mydomain.com):

<br />

So if your mobile URL is m.mydomain.com, you must add the above code on your mobile URL.

Similarly, you must add a rel=”alternate” tag to your desktop URL (www.mydomain.com), as shown below:

<br />

This is recommended by Google, in order to allow their crawlers understand the relationship between the two URLs – desktop and mobile.

Once you have placed proper redirects on your site for your mobile users, it is time to test whether the redirects work well for different devices. Testing it manually on any available smartphone device is one way of going about it. But you can also use these mobile emulators to test the correct rendering of your mobile site on different mobile devices.

Remember, the correct use of mobile redirects is a critical step in ensuring your mobile website is search engine friendly. If your website is not redirected well for your mobile users you may also be losing a lot of valuable businesses. Hence, for both SEO as well as positive changes in conversion rates you must take immediate actions to get your website redirected for your mobile users using one of the above methods.