How To Redirect Mobile Users On Your Website
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.
Responsive Web Design
These days, all good CMS platforms allow you to build websites using responsive design, which adapts depending on the screen size.
It's important to review how your website appears on different devices - this can mean the difference between keeping your visitors engaged on your website and losing them, never to return.
It's important to also mention that since Google moved to mobile first indexing, the mobile version of your website is what counts to Google, meaning that it is unlikely to perform well in search if it causes visitors to have a bad user experience.
Mobile Websites
While it's becoming more and more uncommon, some businesses still prefer to have a separate website for mobile users. This comes with lots of potential problems that can easily be avoided.
Check to make sure your website is mobile friendly
You can check your website has been correctly setup for mobile by running a Free WooRank Review.
When going down the separate mobile website route, tThere are two important things that need to be taken care of in order to ensure a great mobile browsing experience for your mobile users:
- Create a mobile website that provides a great user experience
- 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.
Redirecting your Mobile Website
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 to waste.
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 Do I Redirect to a Mobile Site?
Now that you are about to learn how to redirect your mobile users to your mobile website, let's explain 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 the type of device the browser is being opened 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
- The Javascript Method
- The PHP Method
- The .htaccess Method
- The New CSS @media Method
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 "“ URL Redirects
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 can be found in the following article: How to redirect your website to its mobile version.
The JS code that uses the user-agent - this code in the following artice: 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.
<?php $iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone"); $android = strpos($_SERVER['HTTP_USER_AGENT'],"Android"); $palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS"); $berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry"); $ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod"); if ($iphone || $android || $palmpre || $ipod || $berry == true) { echo "](https://s3.amazonaws.com/woocms.woorank.com/2020/05/poor-mobile-optimization.png"; } ?>
You can find this code in the following article: 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.
There are many downsides of using this method. It requires adding a huge set of CSS code to the site. There are still some devices that do not support 'handheld' media types 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.
In order to help Googlebot discover the location of your site's mobile pages, Google recommends websites must should:
Add a rel="alternate" tag on the desktop page which points to the corresponding mobile URL.
Add a rel="canonical" tag on the mobile page that points to the corresponding desktop URL.
This allows Google's crawlers to 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.
This blog post was updated on 15 January 2020
