My website will revert visitors to a seperate mobile site, this seems fairly simple after reading a few guides online.

However, I would like people to be able to click a link on the mobile site which will then take them to the desktop site.

The problem I see is that if I link back to the desktop site it will just redirect them back if they are on mobile?

How can I get around this?

My website will revert visitors to a seperate mobile site, this seems fairly simple after reading a few guides online.

However, I would like people to be able to click a link on the mobile site which will then take them to the desktop site.

The problem I see is that if I link back to the desktop site it will just redirect them back if they are on mobile?

How can I get around this?

• javascript
• html
• mobile

• 3 you maybe could show us how you are currently redirecting from desktop to mobile site. – Nelson Benítez León Commented Oct 1, 2012 at 10:06
• Why do you even need to build separate mobile and desktop sites? You should probably take a look at media queries: google.pl/search?q=media+queries – Michał Miszczyszyn Commented Oct 1, 2012 at 10:19
• @RuFFCut - Problem already solved. Follow my flow diagram (see my answer below) in your server side programming language, and achieve mobile redirection enlightenment. – Chris Bell Commented Nov 5, 2012 at 18:31

7 Answers 7

Really you want to be doing this sort of thing server-side, not client-side. The issue is you're forcing a mobile user (on a potentially bad connection) to download your whole desktop site first (which might be over 1MB), just for the javascript redirect to take effect.

By that point, your mobile visitor may have lost patience and left already.

I blogged about the process here: http://www.9xb.com/blog-2012-08-6-common-pitfalls-when-deploying-a-mobile-site-and-how-they-can-be-avoided/ - if you jump to the bottom of the article, you'll see a flow diagram that maps out the whole process. This particular method uses cookies, but it could be adapted. The beauty of this flow diagram is that it is language independent - you can develop it in any server side programming flavour.

For your convenience, I've included the flow diagram below (although I strongly recommend you give the article a read):

http://www.9xb.com/wordpress/wp-content/uploads/2012/08/mobile-deployment-small.png

The alternative to all of that work, would be to develop a mobile-first responsive site. Not knowing your circumstances, I'll leave it at that - it's not always appropriate in every single scenario.

Make the redirect-to-mobile optional (i.e. a link at the top of the desktop page), or put the mobile redirect only on the initial entry point, i.e. mydomain.com. If they go to mydomain.com/index.html, then don't redirect. That way your 'back to desktop' link can be simply a normal link to index.html, from index_mobile.html or wherever you send them for their mobile experience.

Personally, I would much rather the layout was fluid enough to fit whichever browser anyway, then there is no problem to begin with. Remember, there are now tablets of various sizes to muddy the mobile browsing waters.

Unfortunately you cannot check for the referrer after window.location change. But you can add a hashtag and then check for it.

if(window.location.hash == "#stayHereDude"){
    // do nothing, or whatever
} else {
    window.location = "mobile/index.html";
}

Then, you'ld make a link to /index.html#stayHereDude on the mobile page.

On your home page that makes the mobile redirect, you'll want to check for something in the href that marks them as having coming from the mobile site. In my case I've used a link to the home page from the mobile site with a ?m=0 at the end of it. For example: http://www.yoursite.com/?m=0

Then you check before the redirect on the home page for that m=0 in the href. if it's there, don't redirect, if it isn't, redirect to mobile.

if (window.location.href.match("m=0")) { 
} else {
    window.location = "http://www.yoursite.com/mobilesite";
}

This works if you're only redirecting from a single page to your mobile site.

You can use Cookies, Session or Local Storage such that when a user clicks on "go to desktop site", it sets a value.

Let's say you set the name to be "mobileOff" and the value set to "1" or "true" when a user on a mobile phone clicks on "Go to Desktop Site". Then, wherever you're doing your mobile check, add a conditional to check for the mobileOff in the user's cookie/session/localStorage, if it's set to true, bypass the automatic mobile redirect, otherwise, load the main desktop site.

you should combine user agent method to detect device clubbed with query string to this sort of functionality. so lets assume your link is

site/default.aspx

if some one hits this page check the user agent and give in the response the appropriate site or event better if the device detected if a mobile device simply redirect to m.yourdomain.com/site/default.aspx
but if some one hits the page site/default.aspx?type=desktop then override the behaviour of checking the useragent and render the desktop site.

never ever you should first load the desktop site and then via javascript reditect to a mobile site. do this using user agents server side.

Static

/site/index.html
/site/mobile/index.html

Then you can use a range of things.

1. Cookies
2. Session States
3. User Logged in and Preference Settings (even database saved)

If you're using a static site - becomes more difficult as it gets messy with JavaScript redirects and two many duplicate pages. Post your code and tell us your how you are currently doing your setup and I will update my solution.