This ingenious and simple script will redirect the user from the main site to the mobile version of the site based on the viewport size of their device.
Benefits of this script
Why do you need a mobile redirect script?
Statistically, more than 1/3 of users now access the internet on their mobile device! The REASON it is a good idea to have a mobile version of your site is because it will be easier to view in these cases. When you view a regular website on a cell phone, the person usually cannot see the whole thing and they have to scroll right and left which is tiresome. Mobile sites are typically created using a narrow width, and in one column.
What about responsive websites?
Many methods of building website now offer a “responsive” structure, which means you only have to make one site and the code will AUTOMATICALLY convert it into a mobile site if a mobile device is detected. This is very cool, indeed, and will certainly save you time, but you don't have as much control over the look and content of the mobile version. THIS SCRIPT IS FOR CASES WHERE YOU DO NOT HAVE A RESPONSIVE SITE AND YOU LITERALLY HAVE TWO WEBSITES: MAIN AND MOBILE AND YOU NEED AN EFFECTIVE WAY TO GUIDE THE USER TO THE RIGHT ONE.
Viewport size analysis
We set the screen width as < 574 to allow for a little variance on the manufacturers’ screen sizes. This means that any device that is less than 574 pixels wide WILL be redirected to the mobile site. This concept used to be simple a few years ago when all mobile phones were 320px. Now with such a variety of devices it is a bit of a compromise. The new iphone 5 height is 1136 but it seems to function as “viewport 568” because of pixel doubling (when viewed in landscape mode) which is half the actual pixel size. Using this now as our primary benchmark, we like to set it just a little higher to allow for any strange variance and that is how we came up with < 574. Of course, you can change this number to your liking.
What about iPads?
Most people think of an ipad as a mobile device but we assume that on an ipad, the user wants to see the MAIN site and not the mobile site. The average ipad is 600px+ width so our < 574 viewport restriction would not have any effect on iPads. (This should be true of iPad Minis too because the viewport on those is similar even though the resolution is higher.)
What about typing in the address?
In the cases where the user TYPES IN the url, to our knowledge, the “document.referrer” portion of the code will not work (unless we incorporated cookie or session commands.) (which we didn't.) So to allow for these cases, we have added an alert that displays, indicating that the small display is detected and asking if the user wants to go to the mobile site or not.
Replace Referring domains
The urls in Red below should be modified to the specific domains that represent your main site AND your mobile site.
Replace Redirect domains
The urls in Green below should be modified to the specific page that you want the user to be redirected TO. (Note that you have to replace this text TWO TIMES!)
Use the full URL
needs to have the “http://” in the URLS or when clicking to the site from a google search the script will not trigger the mobile version when on a mobile device. This is because google and other sites include a redirect code in their location url and it can cause this issue.
Where to put the code
Place the code below as the THE FIRST THING between head tags on each page of the main site that you want to have redirected. You do not have to place the code on every page of the main site. The best thing to do is to use google analytics to see what are the most popular landing pages of the site and put it on THOSE pages. (And change the mobile redirects for each page unless you want the sub pages to all be redirected to the home page of the mobile site.)
Example sites to try out as a Demo
Let us know if you implement this script on your site and we would like to include it as one of the examples below!
Here is the code: (Don’t forget to replace the colored text as explained above)
The concept of this code was developed by Howard Richman. The brilliant execution of the code was done by Eiji Kasai.