Best way to redirect mobile traffic to your mobile website version?

I’m looking to redirect my mobile traffic to my newly launched mobile version of my site. What are the best ways to do this?

what platform are you using? PHP, ASP??

php

You can give this a try:

Just doing a quick google for “mobile detection php” yields lots of results

Hey, I found this neat apache code, and it works very well:

RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_USER_AGENT} android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge\\ |maemo|midp|mmp|opera\\ m(ob|in)i|palm(\\ os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|symbian|treo|up\\.(browser|link)|vodafone|wap|windows\\ (ce|phone)|xda|xiino [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a\\ wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r\\ |s\\ )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1\\ u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp(\\ i|ip)|hs\\-c|ht(c(\\-|\\ |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac(\\ |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(\\ |\\/)|klon|kpt\\ |kwc\\-|kyo(c|k)|le(no|xi)|lg(\\ g|\\/(k|l|u)|50|54|e\\-|e\\/|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-|\\ |o|v)|zz)|mt(50|p1|v\\ )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v\\ )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-|\\ )|webc|whit|wi(g\\ |nc|nw)|wmlb|wonu|x700|xda(\\-|2|g)|yas\\-|your|zeto|zte\\-) [NC]
RewriteRule ^(.*)$ http://sub.domain.com/ [L,R=302]

Just one problem. Right now, with this apache code in my .htaccess, mobile users can’t see the desktop version, just the mobile version. I want to provide my mobile users a link to my desktop version, as the mobile version of my site is much slimmed-down and doesn’t have everything.

Google has the same thing, it automatically redirects mobile traffic to google’s mobile site, but it has a link to the desktop site. How can I create such a link?

With this method you’re using, you telling the server to redirect requests. If you do it in the code, you can put in conditions. Such as redirect them to your site with a query string, and if it exists, do not execute the sniffer code

Another way is to display content based on what device the user is using

Thanks guys, with your help I solved the problem. This is what I did if anyone has a similar issue:

I got rid of the apache redirect and went to php. I added this code on my index page:

if ($version != "desktop") {
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|symbian|treo|up\\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|50|54|e\\-|e\\/|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\\-|2|g)|yas\\-|your|zeto|zte\\-/i',substr($useragent,0,4)))
header('Location: http://sub.domain.com');
}

Then on my mobile page, I added this link to the desktop version:
http://domain.com/index.php?version=desktop

Works like a charm :slight_smile:

Why is it everyone seems to be making the same mistakes over and over?

The problem with user-agent strings in redirection is that this method has been shown by research studies to be both inefficient and obtrusive (as it always misses the devices which give inaccurate data or fake their string to appear as a desktop browser). Apart from the fact you’re doing the same thing that caused so many problems in the webs past (remember the “this site requires IE banners?” or JavaScript resolution redirects?), forcing your users to use a mobile version of a website if their device can happily use the “full experience” is insulting their intelligence. You should NEVER demand or redirect users based on your assumptions as to what their device can accept or use. Give your users the choice and option to decide whether THEY would prefer to use the normal design (which in many devices will work fine) or whether they would prefer a mobile friendly version - if their device is less willing to work with complex layouts. The script you’ve mentioned above will not account for the 250,000 mobile devices that exist, you’re just discriminating against the minority of users who you’ve forgotten to “dumb down” without their consent. :frowning:

Placing such demands on the end-user and FORCING them to use whatever you think is best for them is a violation of what is considered good usability. :nono:

I do not think that is what he is doing. Most the time I have found, that my users just do not realise there is a mobile version, and try to load the full designed site on their phones. In SA we have lots of older phones and 3G/GPRS costs are very high. So by trying to redirect the user to the mobile version of the site, could save them money.

But on the other hand your right, they might want to view the full version, thus giving them the link to the other version, if they want to

Well according to the code he provided, it is exactly what he’s doing (whether he attempted it or not).

Offering the full experience and having a highly visible link on your pages saying “Using a mobile device? Save some data today!” is much better than making the assumption that “their using a handheld device, they MUST be being charged and they MUST need a diet!” Making assumptions is one of the worst things we (as professionals) do in regards to our audience. It’s much better to give them the native experience they expect and simply make them aware of the slimmer and perhaps cheaper site than to push them into it and say “don’t like being where we forced you? navigate back where you should have been to begin with”. Any action which a visitor undertakes should be self-motivated and based on their end needs… redirecting based on what a developer thinks is in their best interests is the same as not giving them the choice in the first place. We should be empowering our users to make decisions for themselves, not forcing the experience we prefer upon them. :slight_smile:

I agree. It is much better to do it that way, but not entirely incorrect to do it his way. I would also do what you suggested. Just make sure they know about the other option. But a lot of the time its a bad managment decision instead of the developer. And sometimes the developer just doesn’t have a choice. lol. I have experienced that the hard way. lol

id just like to point out if anyone else is interested in a way of doing without htaccess or php use this inside head tags


<script language=javascript>
<!--
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || ((navigator.userAgent.match(/iPad/i)))
{
location.replace("mobile.html");
}
-->
</script>

works well for me

puttyapp, shame it won’t work for the 8%+ group of people with JavaScript either disabled or unavailable. At least with htaccess and PHP you can guarantee everyone will get the desired effect (that you target), using JavaScript to redirect is about 1,000% worse of an idea than even trying to force the thing as-is. :slight_smile:

thank you, learn something new everyday. thats a pretty big statistic. ouch

@AlexDawson

I understand what you are saying, that is why I have the link to the full website. Another thing is that many features on my full website just don’t work on mobile… So I created a much more slimmed-down version of my website for my mobile users. The case is the same with many other websites.

Also, pretty much all the “big” websites use these scripts. Yahoo, google, msn, amazon, fifa, banks, etc, etc. As a result, most mobile internet users are accustomed to seeing a mobile website automatically. As such, the vast majority of people wouldn’t even look for the mobile version because they are used to having the mobile version appear by deafult on their phone.

I’m with you on this one, IamAdam.

If the visitor appears to be a mobile device, send them to the mobile site with a link at the top to visit the full site.

That way they get an experience consistent with other well-known sites they visit (being served mobile content), but can choose the full site if desired.

For the record, I do this:

(1) Crap mobile browsers (Blackberry (not 6), IE Mobile) = use PHP to redirect to the mobile site as these have no chance of viewing a full site.

(if this is accidently not picked up then no problem as there are further checks)

(2) Use screen.width<1000 AND PHP server-side code to detect a mobile.

(if this is accidently not picked up then no problem as there are further checks)

(3) If it detects a mobile I show a quick page with 2 large buttons saying “FULL SITE” or “MOBILE” = the user can then choose and a cookie remembers their selection (I know some people will not like this as it is one more page click). Once they have clicked they see their choice without any other distractions (and a link in the top left corner of every page/site allows them to return to the menu and choose again).

(4) If nothing detected then show full site. Also, if showing the full site and no JS available then I show a message at the top saying “No JS, turn it on or view the mobile site.” (<noscript>).

  • The only way that I can have a problem is if JS is ON and none of my checks pick it up - which is unlikely. Most devices are picked up (SkyFire is an **** and I need to use $_SERVER[“HTTP_X_SKYFIRE_PHONE”]) but if one isn’t picked up then my full site looks great on most mobiles anyway.

  • The mobile site looks great on an 800x600 monitor with no JS so it’s really a ‘basic’ site as well.

  • I test on more than 20 mobile browsers and all do as I expect them to.

  • The mobile site needs no JS, full site is mostly ok without JS but it does improve the experience.

While it is becoming a trend, I think it’s rather unfortunate that it’s occurring because of the way most of those sites implement such functionality. The general concept most professionals adhere to is progressive enhancement, the idea of assuming a browsers capabilities and pushing them toward a design orientated for that display is more of a case of the broken model of backward compatibility (patching). While I am all in favour of helping deal with the limitations mobile devices may face within the main site (using perhaps CSS3 media queries) - in a manner which doesn’t detract from the overall design, I am totally against such “hit and miss” redirections by default on the principle that it’s just leading down a dark path of a future where we’ll require automated scripts to deal with every possible device (after all, while a mobile friendly website may be fine for an iPhone, an iPad which is identical in all ways except viewport size will really be hindered by the optimized minimal experience). The future of devices aren’t going to be a one size fits all situation (like is current for phones), it’s going to be devices from 3inches to 300, from tiny pixel devices right up to huge televisions (which are becoming more web aware as we speak), and we can’t expect to rely on redirections to treat them individually. :slight_smile:

First Explain your question fully,then i can help you…