by Howard B. Richman
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
- It will work on ALL mobile phones unless that device is set to not respond to javascript (very rare.) We wanted to use just plain javascript because this will be honored by most mobile devices.
- NO COOKIES. We opted against this because many people have “cookies” turned off.
- NO USER AGENT SPECIFICATIONS. The problem with user agent specifications is that you will have the nightmare of updating this frequently, as hundreds of new devices are introduced each month.
- It allows for MANUAL OVERRIDE. This means that if someone is directed to the mobile version of the site but they actually PREFER to go to the main site, they can click on a link that you make on the mobile site (for example: “main site”) and they will NOT be redirected again back to the mobile site! This is very, very cool and the heart of why this code is so ingenious. If we didn’t provide this, then someone would click to the main site and then get into a terrible loop of being redirected to the mobile site because the main site has the redirect code! The way this works is that the code creates an exception by detecting the referring page. If the user comes from any page on the mobile site OR on any page of the main site, the script will NOT redirect. This way, it will be assumed that the user wants to stay on the main site.
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. If you are interested in a great way to build a responsive website, we do recommend the Dynamik child theme Based on Genesis using the WordPress platform.
Viewport size analysis
See below in “notes” for update to the screen width info.
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
This line:
Array("http://www.mymainsite.com","http://m.mymobilesite.com");
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!
You can try out each of the sample domains below THREE WAYS. This way you can evaluate if this script will be appropriate for you
- On your mobile device, SEARCH for the domain in Google and then CLICK on it from there. It should go to the mobile version of the site. (You will know this because the mobile version of the site will have a slightly different URL. Usually instead of “www.” it is “m.” or instead of ending with “.com” it might end with “.mobi” When you make your own mobile site, you can choose whatever you want to be your alternate URL, but there are a few conventions that might make sense for you to follow.
- On your mobile device, TYPE in the domain from your mobile device and you should see an alert come up, giving you the choice of main or mobile
- On your
computer,SEARCH for the domain in Google and then CLICK on it from there. (The script should NOT redirect.)
Here is the code: (Don’t forget to replace the colored text as explained above.)
<script type="text/javascript">
if (screen.width < 1081) {
var ref = document.referrer;
var urls = new Array("http://www.mymainsite.com","http://m.mymobilesite.com");
var n = ref.match(urls[0]);
var m = ref.match(urls[1]);
if ((m!==null) || (n!==null)) {
stop;
}
else if (ref=='') {
var r = confirm("Small Display is Detected.\nClick \"OK\" for MOBILE SITE.");
if (r==true) {
window.location = "http://m.mymobilesite.com";
}
else {
stop ;
}
}
else
{
window.location = "http://m.mymobilesite.com";
}
}
</script>
Notes:
- Update on screen width 6/20/2015. For the longest time, the screen width setting was < 574 and that worked great but now mobile phones are getting so big, that we changed it to 1081. If that seems to big for your needs, then try smaller numbers
- Sometimes people want to INTENTIONALLY go to the main site from their mobile phone. The problem is that if you create a manual link to the main site at the bottom of the page of your mobile site, people will get looped back to the mobile site due to the javascript code that you just added to the site! So in these cases, we recommend that you create a DUPLICATE home page with a dedicated URL THAT DOES NOT CONTAIN THE JAVASCRIPT REDIRECT CODE. If you want to offer a manual choice to go to the main site from the mobile site, hyperlink to the DUPLICATE home page, and then when someone chooses that from their mobile device, they will not be redirected!
Credit
The concept of this code was developed by Howard B. Richman. The brilliant execution of the code was done by Eiji Kasai.
