Redirect to Mobile Website – SUPER Easy Tutorial

I spent literally hours searching for a good, easy-to-follow how-to on setting up a javascript redirect on your website so that mobile visitors get sent to your mobile page to no avail. It needed to be extremely clear and with great examples and I wanted a method that DIDN’T rely on screen-size because, well… That’s just stupid. You don’t want to redirect desktop visitors who have their browser small!

Okay then, let’s get to it. We are going to be using the JS-Redirection-Mobile-Site script found at Git Hub here. Now, before you click that link and get yourself all confused, I’m going to break down everything for you. Okay, first things first. Download redirection-mobile.js here. Just highlight the text, copy it, and then create a new text document in a folder in your site called “js” and name it redirection-mobile.js. Good, we are almost done. Now, in the <head> section of the page you are looking to redirect, paste this:

Easy stuff. Now replace “urltoredirectto.com” with, well… The URL you would like to redirect to. Now upload this to your server, and you are good to go!

What this will do is redirect most mobile visitors (but not tablets) to this URL. And it works great, because if they go to that mobile site, and then click a link to come BACK to the page they were just redirected from, it won’t redirect them again, allowing them to view the regular page.

I’ve had many requests for instructions on including a tablet redirect as well, so I’m going to show you how to do that. Setting tablet_redirection to “true” will redirect tablet users as well. If you would like to specify a separate location for tablet users, you can do that by entering a value for “tablet_host”. So the code will now look like:

For a full list of parameters you can use, view the github page I linked to earlier and find the readme there, it has a detailed explanation of everything. I hope this helps someone avoid all the trouble and work I had to go through to figure this out! Thanks for stopping by.

About Brian Johnson

Brian Johnson is a website developer and designer living in Minneapolis, Minnesota with a passion for code and WordPress. He spends his days building WordPress websites for small businesses, developing new code with the online community, and living life.

84 Comments on “Redirect to Mobile Website – SUPER Easy Tutorial”

  1. Hello,

    I have tried your solution but it is not working. I am new to muse so I may be a bit slow.

    1) I copied and pasted the above code into a text document.

    2) I uploaded it to a new folder in the root directory named js.

    3) I added the code to the section of adobe muse.

    4) I added this ” sigmalambdaxi.com/phone/index.html

    Then I am not redirecting and Google is not able to recognize the mobile site.

    Please advise. I checked on Adobe’s site and they are not helping. I am very lost. I spent hours on this project and can’t get a solution.

    Thanks

    1. You seem to have set up the .js file properly in the js folder, but I don’t see the necessary code on your site to load it up and actually specify the redirect. It needs to be in the header of your page. I don’t know anything about Muse though, so I’m not sure what you need to do!

      Just make sure you add that small snippet to the header of your website.

  2. Hello Brian,
    I am trying your script on my site. To make things clear do I upload the new folder mobie-redirect.js to my server on the domain name I want to redirect it to as anew folder.

    I have entered the redirect script into my html code in the Here

    Getting problems with it to work .
    Hope you can advise
    Thanks Colin

    1. Hi Brian,
      The redirection works great for my site root. ex: bitsongdev.com takes you to bitsongdev.com/mobile/index.html on a mobile device.

      Is there any way to make it work for a sub page? ex: bitsongdev.com/about.html takes you to bitsongdev.com/about.html on a mobile device, not bitsongdev.com/mobile/about.html

      Thanks, Barbara

  3. Hi Brian,

    Your Tutorial and Script are definitely SUPER.

    Now I am consern about the position of my Site in Google.

    I have my Web Site (www.namebadgesplus.org/index.html).
    Now I created mobile-friendly page similar to my index.html.
    My site was on 1st page in searching Google
    by some keys.
    Now (after Google’s mobile issue) my
    Site is on the 2nd page that is not good.

    My question is:

    1) Should I name my mobile-friendly page, for example,
    “mob_index.html” and use my desktop page “index.html”
    (as before) with redirection to “mob_index.html” ?

    or

    2) Make subdomain like http://www.m_namebadgesplus.org and
    place my new page “mob_index.html” over there.
    Then use redirection to this subdomain ?

    Which case is better for position of my Site ?

    Thank you for your reply.

    Mark

    =========

  4. I just can’t get this redirecting working for couple of galaxy android tablets, Galaxy Tab Pro 10 and Galaxy Note 8 (I thins). Works fine with IPad.

    Tried with and without tablet_host, with and without http part in address.

    SA.redirection_mobile({
    tablet_redirection : “true”,
    mobile_url : “http://xxx.fi/m”,
    tablet_host : “http://xxx.fi/m/”
    });

  5. Awesome! I had looked and tried numerous other tutorials with no luck and this worked!!! Thanks so much!

    1. Ah! I think I found your problem. You redirect-mobile.js is not complete. You are missing the final “};” at the very end of the document. Try adding that and see if it works. Just to be safe, maybe download the newest version, and make sure you paste that entire thing in. Let me know if it works!

      1. Yes!! Success! Thanks so much! I was baffled and had sort of given up. Not sure how the }; got missing. Thanks again Brian!

  6. Hey Brian,

    Thanks so much for posting this tutorial. For some reason it is not working for me. My website is 5QM.us and I’m trying to redirect to 5QM.us/mobile. I’m at a loss now. any ideas?

    1. Try replacing “http://5qm.us/mobile/index.html” with just “5qm.us/mobile/index.html”

      I thought it worked either way, but perhaps not. Let me know if that does the trick!

  7. Great script – and thanks also to Steve Wheller – I took the liberty of using your website as an example to help me know it should be working đŸ™‚

    A curious thing – it works like a charm in Safari, once I made sure I’d completely exited from the website – but in standalone mode starting off as the mobile site, doing “back” then re-opens as the mobile site in Safari, and then second time around works as expected, ie. back to the full site. I suspect it may be because it’s opening effectively in a different “browser”?

  8. Hi Brian,

    Thanks for posting this, this is the most successful code I’ve used so far!

    The only problem I have now, is that the colon keeps disappearing, making the URL invalid when my mobile redirects to the mobile site.

    This is my site: shaggy-licious.com/ltz/index.html

    At the moment, I am redirecting it to Facebook mobile site. Ideally, I actually want to redirect it to shaggy-licious.com/mobile/index.html
    Is this possible? Can I write mobile_url : mobile/index.html” ? This doesn’t work either at the moment by the way.

    My second question is the tablet redirect. I put it above mobile_url as you suggested previously to another poster, but it is saying it has syntax error. I haven’t tried it on tablet yet, as I don’t own one at home, but please will you tell me how to fix the syntax error and how I can make it work on tablet?

    Sorry for asking so many questions but if you would help, that would be awesome! Thanks again for sharing.

    Many thanks and best,
    LTZ

  9. Hi Brian hope you can help me.
    I’m trying to find where my tag is located in cms made simple so I can paste a mobile redirect script. Been looking for days. Thanks in advance.

    1. I’m not at all familiar with CMS Made Simple, so I couldn’t tell you where that would be. If there is a section for adding extra code to the header, that would be where you would want to put it. If there is an analytics code section, that MAY work too, but it depends on how it functions.

    1. It appears to be working great. If you ever go back to the desktop site while visiting the mobile one, you will not be redirected again. Otherwise it would just keep bringing you back to the mobile version whether that’s what you wanted or not.

  10. Hi Brian,

    Thanks a lot for the article. I would be trying it tonight and I am pretty much convinced it WILL work. One thing I need to ask though – What code do I need to make the mobile user see the Full Site – like View Desktop Version – while still browsing through mobile phone.

  11. Hey Brian,
    Thanks for awesome script. Can you tell me in WordPress – where to put the redirection file and where to place the script? Is it in template directory or root domain? I tried different things and I’m a bit lost.

    Thanks for your help.
    Michael

    1. It’s all going to be in your template directory. The script goes in your theme’s header.php file. Then redirection-mobile.js would go wherever you want in your theme folder, but you are going to need to change the link to reflect that. For example, if you put that file in a folder in your theme directory called “js”, then you would most likely need to change src=”js/redirection-mobile.js” to src=”http://yourdomain.com/wp-content/themes/yourthemename/js/redirection-mobile.js”

  12. Hi! I’ve a built a parallax scrolling website, and now need to develop a non-parallax, mobile version in a separate html document. I looked all day and this seemed like the perfect solution. Only problem is, I think it’s redirecting, but I’m getting a 404 error. Any ideas what could be wrong? Thanks a bunch!

    1. If you are getting a 404 then you either entered the url wrong in the code or your page doesn’t exist. Check your address bar and see where it’s actually redirecting you, and how that URL differs from the intended one.

  13. After experimenting with fluid grids and media queries…which are okay…but imo creating a separate folder website with just mobile screen size code I figured would be easier. So I looked for days for a tutorial on how to do this & couldn’t find a non-complex or a free one. Then I found this!! THANK YOU SO MUCH. It worked & the way you explained it made it easy as pie! Thank you again Brian. You now have a new fan here!

  14. Hi Brian,

    Thanks for the great script. I now have this working on my site weddingphotographer-wales.co.uk and it redirects me to the mobile site when viewing on my mobile but when click on my link to go to the desktop site it doesn’t work it just keeps me on the mobile site.

    Any help appreciated.

    Cheers

    Steve

  15. Hi Brian,
    I have installed the js as per your instructions and it works perfectly.
    I have done a lot of work before with the same js but without results.
    Thanks a lot!!
    I have a problem though and I hope you can help me in solve it.
    I have created the following script

    // <![CDATA[
    SA.redirection_mobile ({
    redirection_param : "mobile_redirection",
    mobile_prefix : "www.m",
    keep_path : true,
    keep_query : true
    });

    because I wanted to have people using a link like whatever.com/page_1/page_2/page_3 to be redirected to m.whatever.com/page_1/page_2/page_3 and not to m.whatever.com
    Unfortunately this does not happens.
    What happens is as follows:

    Link is
    whatever.com/page_1
    redirect is
    whatever.com/page_1

    Link is
    whatever.com/page_1/page_2
    redirect is
    whatever.com/

    Links is
    whatever.com/page_1/page_2/page_3
    redirect is
    whatever.com

    So if the path is longer then one slash the redirect is always to Home.
    Can you tell me what I should do to have the redirect complete and not truncate?
    Thanks
    enzo

    1. Hmmm…. To be honest I’m not really sure! I’ve never seen that issue, and truth be told, I’ve really only dealt with redirecting the home page. Were you able to get this working? I would love to see how if you were!

  16. Hi,
    I got crazy trying to use the same js but no way.
    Then I got to your blog, followed your isntructions and voilĂ . It works.
    I still have a problem though.
    I want to to redirect also If the user C and you want to redirect him to “mobile.whatever.com/page1”:.
    I have this script in my html_header
    SA.redirection_mobile ({
    redirection_param : “mobile_redirection”,
    mobile_prefix : “www.m”,
    keep_path : true,
    keep_query : true
    });
    but If the user accesses to “whatever.com/page1” it is redirected to home page “whatever.com/
    Can you tell me what <i am doing wrong?
    Thanks

    1. Sorry about my typing. I am Italian and my english is not that good.
      Please read the same phrease as:
      I want to to redirect also If the user accesses to “whatever.com/page1” and you want to redirect him to “mobile.whatever.com/page1”
      There is no way ot correct a post
      Regards
      enzo

  17. Hi Brian

    Thank you for your good job ! I put the code in my webpage and it works..

    I just need your help because the redirection doesn’t open a new window, it means that when a smartphone is detected, the mobile internet site opens in the same window and it’s for me a problem.

    if you go directly on m.reparer.ch with a smartphone you will see that the presentation / layout is not the same as when we’re going first on http://www.reparer.ch and then goes automatically by m.reparer.ch

    Wich code do I habe to add on your javascript file or in the main html page to open the m.reparer.ch in a new window ?

    Thank you very much !!

    Best regards
    Nicolas

    1. When a mobile visitor arrive at the site, you don’t WANT them to open a new window. It’s much harder for mobile visitors to use tabs. I may be misunderstanding you there…

      1. Hi Brian

        Thank you for your reply. I don’t know to explain the problem. When I go directly from my smartphone on m.reparer.ch all is bigger than when i go with the smartphone (iPhone) before on http://www.reparer.ch with the redirection on m.reparer.ch

        Regards
        Nicolas

        1. The issue you are dealing with might be because you are using frames, which really aren’t the best practice ever. Instead of using frames, you should either set the domain to redirect with masking or recreate the site there. Redirect with masking is the best option. Frames are just bad news.

    1. It’s doing exactly what it’s supposed to do. I believe the script uses whether you’ve been to the mobile index page as an indicator of whether you need to be redirected. If you’ve been to the mobile index and you choose to go to the desktop site, it won’t stop you because it thinks you are choosing to view the desktop version instead.

      But if you get to the desktop index from some other page, when you arrive, it sees that you’ve never been to the mobile index and sends you there. I believe there are more parameters and documentation available at github to allow you to prevent redirection if they’ve been to ANY mobile pages. This tutorial only covers a home page redirect which is more basic.

    1. I guess I’m a little confused on what you are asking… But I think it’s possible that what you are asking is how you can prevent users who go BACK to the normal homepage after being redirected from being redirected once more. If that’s the case, then you shouldn’t have to worry about it, if users return again, it won’t redirect them again. It only redirects them the first time, in case they WANT to view the desktop version!

    1. You put the code in the desktop page, because all it does is check if they are mobile, and then forwards them to your mobile page if they are. It wouldn’t do much good on a the mobile page!

  18. THANK YOU! THANK YOU! THANK YOU!
    I too searched for HOURS ….was using the same exact script….but, for some reason, the way you explained it took me 2 minutes to accomplish.

  19. Hi Brian, excellent code thank you!
    One question though… It works perfectly on my iPhone5 but not on both my iPads.
    When I enter the full address of the page where I should be redirected to in my iPad’s browser, the mobile version of my webpage shows up as it’s supposed to.
    What could be the trick?

    Thanks,
    Sander (Netherlands)

    1. Adding the line:

      tablet_redirection : “true”,

      above the line mobile_url : “urltoredirectto.com”, should redirect tablet users as well. Let me know if it works!

  20. Nice!

    A client’s hosting didn’t support php which is what I have been using for redirection. This was an easy solution. Why can’t everything be so straight forward?

    Thanks so much,
    Al

  21. Brian, first off let me thank you for putting something like this together. Second, I really hope you still actively watch your blog otherwise I might pull my hair out trying to figure this out! đŸ˜›

    Either or, I’ve copied the js code and placed it in a file named redirection-mobile.js and placed it in a folder named js as described. I then modified the index file and put the code mentioned above, yet it still doesn’t redirect me. Just being stupid I put it in above (first test) the section, then below (second test) and still no redirect. I don’t currently have a mobile site setup so I put in something like m.facebook.com in order to verify the redirect worked.

    The website I’m making the change to is http://www.oakridgesuites.com and using index1.html (not the primary index file)

    Any help would be greatly appreciated.

    Thanks,
    Chad

    1. Hey Chad,

      Thanks for visiting!

      When I tried visiting http://www.oakridgesuites.com/, it was just blank. Do you currently have it uploaded? I can’t really help you without being able to see the code!

      That being said, the most common problem I find for people is improperly placing the js file. When you view your source code on the live site, click the link to the js file and see what comes up. If it’s the javascript exactly as it appeared where I told you to get it from, then it should be good. If it’s blank or there’s a bunch of html in there, something is wrong!

        1. No problem! Looking at your code, you need to move your script so that it is between and somewhere. Currently you have it before the head, where scripts can’t actually go!

          1. Hey Brian! I created a mobile site real quick last night and setup http://www.oakridgesuites.com/ with the redirect code in the index.html in the section. I still can’t get it to redirect. I copied the js folder with the script to the test2 folder as well (since that’s where it appears to be looking) and still nothing. Ideas?

            Thanks,
            Chad

  22. Thanks so much!! I spent hours trying to figure out how to get my Muse-created mobile site to become the destination page for mobile users visiting my regular (non-Muse-created) desktop site. Nothing worked at all, but now your advise works perfectly. Thanks so much for actually explaining what to do!!

  23. Brian your solution is just amazing. I was wondering how to redirect mobiles but not tablets, and how to let them see the desktop version if they want… and you give me everything in a 1 minute reading article. Thank you very much

  24. Hello, Brian!

    The solution seems great due to its simplicity. I have one question: can the mobile URL have the configuration (form): mysite.com/mobile?

    Thank you!

    1. You can enter whatever you want for the mobile URL, all this code does is send visitors to that URL if they are on mobile. It’s up to you to actually PUT something at that location.

  25. I must be very stupid, because I do not get your script to work. I’ve added this code in the heading of my page:

    SA.redirection_mobile ({
    mobile_url : “www.webbouw.nu/mobile/smartphone/index.html”,
    mobile_prefix : “http”
    });

    On the desktop and on my HTC One Android mobile, nothing happens. When I enter the URL on my HTC manually, the mobile site shows up. So the redirection does not work!!

    1. You’ve made two mistakes that are easily fixable, based on what I’m seeing on your site when I check out the code.

      1. You’ve placed the code in the body of your HTML document, not the head. Make sure you place the entire code before the tag.
      2. You either haven’t uploaded redirection.mobile.js or you don’t have it in the correct place. It should be in a folder called “js” in the ROOT of your hosting directory. In other words, when you go to this link you should see the code (dead link removed)

      If you fix those two problems your code should work!

      1. About the two mistakes:

        1. I use a CMS, generating the HTML-code for me. It does not allow to put the code outside the page body and I do not want to change the generated code, because it would create a maintenance issue. (The site you saw is just a test site) So I’m looking for a solution that will work from inside the body part.
        2. You were right. I had my reference correct, then tried another possible solution and later copied your sample code into my CMS again. So I’m not using the directory “js” to store the script, but “downloads”. I know this works because I’ve added some messages to the script and they are displayed.

        Can you explain why this code will only work from the head section and not from the body? Thanks!

  26. Hi Brian,

    thanks for the tutorial. I did as you wrote but I have a problem: a page says “I cant visualize the page”.

    The mobile website works great, so the problem must be inside my index page of the main web site. It is made by 2 frames… could it be that the problem?

    Thanks,
    Simone

    1. It sounds like you are probably running into an issue with the frames to me. Are you positive the problem wasn’t there before you added this code, and then IS there now that you’ve added it?

  27. Hi Brian, for complicated sites such as accountants and lawyers the user might well have found an inner page of the desktop site 1st and it is now considered best practice to not divert all mobile users to the mobile homepage… would this involve inserting the code on each of the relevant pages?? Thanks for your help. Andy

    1. Right, most likely you would create a redirect that merely redirects users to a subdomain of some kind which retains the full url and just adds “m” in front of it, such as “m.example.com/page”. This is beyond the scope of this article however, which simply addresses users of the home page being redirected.

Leave a Reply

Your email address will not be published. Required fields are marked *