Mobile redirection code

Joe Motion · 1st Sep 2011, 01:32 AM

Hey,

I'm trying to improve on my mobile redirection code..

This is what I have so far..

Code:

<script>
(function mobileRedirect(a,b){
		if(/android.+mobile|avantgo|bada\/|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.test(a)||/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.test(a.substr(0,4))){
			window.location=b;
		}
})(navigator.userAgent||navigator.vendor||window.opera,'http://m.yourmobilesitelink.com');
</script>

What is everyone else using?

It seems there isn't one definitive way to do this :rolleyes:

Magnus Koenig · 1st Sep 2011, 03:33 AM

This one is a very simple one:

Code:

<script type="text/javascript">
if (screen.width <  800)
window.location.replace('mobile.htm');
</script>

But it works fine

Hackbridge · 1st Sep 2011, 03:54 AM

I can test the redirection right now, as I have my phone by the PC.

What website link should I look at.

Brian

Joe Motion · 1st Sep 2011, 03:56 AM

Extremely simple!

This is another version of the first one I posted..

Code:

<script>
 	var visitorDevice = function() {
		//return /(iphone|ipod|ipad|android|blackberry|windows ce|palm|symbian)/i.test(navigator.userAgent); 
		//// use the above line of code instead of the one below if you wish to redirect ipad users to the mobile site
		return /(iphone|ipod|android|blackberry|windows ce|palm|symbian)/i.test(navigator.userAgent);
	};
	
	if(visitorDevice){
		window.location="http://m.yourmobilesitelink.com";
	}
</script>

As you can see it's forwarding iPad users to the main site.. iPad uses can navigate fully sized websites easily

I'm not 100% on this second one so stick with the first one for now.

Originally Posted by lamatic

Yes, very interesting approach with screen width but this is an improvisation.
For example, my kindle has a lower resolution but it should show the browser version, not the mobile one.

I suggest not to use javascript for redirection - not all mobile devices have js enabled.
Try to use server side redirections with header:location

JavaScript seems to be what everyone is using..

I'm currently testing a PHP version.. great for sites based on Wordpress as the PHP runs without any issues and you can simply insert it into header.php and it will forward every single page.

Hackbridge · 1st Sep 2011, 04:36 AM

The next piece of the puzzle would be mobile templates.

Brian

WillR · 1st Sep 2011, 07:33 AM

Originally Posted by lamatic

Yes, very interesting approach with screen width but this is an improvisation.

There are also quite a few Android phones that have a bug where they show larger screen width values than 800 so they won't be picked up by that script.

Originally Posted by lamatic

I suggest not to use javascript for redirection - not all mobile devices have js enabled.

Using javascript is fine so long as you also have a message for those people who are not using javascript.

Joe Motion · 2nd Sep 2011, 09:56 PM

Looks like I'll stick with my standard JavaScript code then..

Did some research and the amount of people that don't have JavaScript enabled is extremely small.. this is some data I found online from a site that gets 30,000 visitor per month..

JS 1.3 - 94.23%
JS 1.2 - 5.61%
JS 1.1 - < .00%
Other versions - .04
No JS - .12%

Mahara Adhe · 3rd Sep 2011, 01:41 AM

Nice! I was about to purchase a full mobile WSO just for that script *lazy*. Thanks for sharing. Do you guys know of any good resources for templates?

Brandon Tanner · 3rd Sep 2011, 10:06 AM

I would use a redirect script based simply on browser width, because if your script is based on user agent, then you're going to have to constantly tweak it whenever a new mobile phone or OS comes out.

But instead of using a width of < 800, I would use < 1024. Reason being is that there are more than a few smartphones out now that have screen widths greater than 800 (and no doubt many more to come). Yet virtually no one on a regular computer or laptop uses a screen resolution of less than 1024x720 anymore --> Browser Display Statistics

Heck, even my tiny netbook has a screen width of 1024 px.

WillR · 8th Oct 2011, 10:44 PM

Originally Posted by Brandon Tanner

I would use a redirect script based simply on browser width, because if your script is based on user agent, then you're going to have to constantly tweak it whenever a new mobile phone or OS comes out.

But instead of using a width of < 800, I would use < 1024. Reason being is that there are more than a few smartphones out now that have screen widths greater than 800 (and no doubt many more to come). Yet virtually no one on a regular computer or laptop uses a screen resolution of less than 1024x720 anymore --> Browser Display Statistics

Heck, even my tiny netbook has a screen width of 1024 px.

Correct, and in regards to iPads, they are still considered mobile and there are a lot of people who use them when out and about ie: NOT on wifi connections. For that reason it is still a good idea to serve up the mobile version for them so the site jumps straight up on to the screen. You should then have a link on the homepage that lets them view the standard site if they would prefer.

Joe Motion · 9th Oct 2011, 12:05 AM

That's like saying you should forward laptop users that are using 3G users to a mobile site. I'm using a 3G connection on a laptop now actually - and if I was forwarded to a mobile site I'd be annoyed.

The main problem is the mobile web is comparatively new and making these decisions is always going to annoy some users.

Perhaps someone needs to do a big survey.. but for now I'm forwarding iPad users to the fully functional site.

Originally Posted by LegacyLewis

Nice! I was about to purchase a full mobile WSO just for that script *lazy*. Thanks for sharing. Do you guys know of any good resources for templates?

Thanks!

Neil B · 9th Oct 2011, 03:17 AM

Originally Posted by Joe Motion

Looks like I'll stick with my standard JavaScript code then..

Did some research and the amount of people that don't have JavaScript enabled is extremely small.. this is some data I found online from a site that gets 30,000 visitor per month..

JS 1.3 - 94.23%
JS 1.2 - 5.61%
JS 1.1 - < .00%
Other versions - .04
No JS - .12%

Yep JavaScript based redirection is the way to go, more and more Smartphones will be JS enabled so it makes total sense rather than trying to keep on top of the user agnets...there is also an Adroid fix which I'll be using in my new script.

Neil B

Jay Moreno · 9th Oct 2011, 03:47 AM

Originally Posted by Brandon Tanner

I would use a redirect script based simply on browser width, because if your script is based on user agent, then you're going to have to constantly tweak it whenever a new mobile phone or OS comes out.

Everyone to their own but using user agent detection gives you far more control over your designs and you can fine tune a much better end user experience.

We don't use user agent detection just for redirection purposes like most other people do - we take user agent detection to the next level and use it to deploy and format the correct content to the end users device, as already pointed out just on this thread alone there isn't a one solution fits all, but using php user agent detection like we do gets you very close and certainly gives you the most flexibility if deployed correctly.

Unlike everyone else we use a unique approach that filters the user agent data - where possible we look at the device manufacturer, os, phone model and browser type and filter the devices categorizing them into smartphones, non smartphones, non mobile devices and tablets which allows us to deploy the most compatible content for the device accessing our sites - our approach was developed specifically to be super light weight and work at lightening speed so there is no problem with performance. We did use a simplified version of this approach in one of our recent wordpress mobile redirect plugins and are currently testing our approach with a full on mobile wordpress theme.

You might ask why go to to all this trouble... Let's just say mobile web development isn't something i just started doing in the past 6 months, I have been working with mobile content passionately for more than 8yrs now - I love mobile! Lol Just like "I got it" and understood the potential of mobile back then it's just taken time for technology to catch up and every day people "to get it" more importantly corporate is now starting "to get it" too, this mobile platform is just going to get bigger and we are embracing it now just like some warriors are improving their own scripts or mobile platforms/services for better functionality and service its because like them we see the bigger picture...

tgdawson · 9th Oct 2011, 09:57 AM

Thanks for that post, Do you do any teaching or have a small course. With 8 years I'm sure you have some good tricks.
Tom

Jay Moreno · 9th Oct 2011, 12:52 PM

Originally Posted by tgdawson

Thanks for that post, Do you do any teaching or have a small course. With 8 years I'm sure you have some good tricks.
Tom

Hi Tom,

Doing training is something i have considered, unfortunately time is really the restricting factor.

I am currently rolling out products that will enable people to hit the ground running with mobile. All of the products we launch are based around my own experience and vision towards deploying mobile which will hopefully help people avoid many of the pitfalls i have had to already work around.

I always encourage people to think out of the box and perhaps my solutions are not for everyone but at least it can perhaps give people a much wider insight to mobile and avoid some of the pitfalls i have come across in the past. Also with better understanding of where i am coming from with my approach it may stop people thinking i am crazy but instead give them a better understanding why i feel so passionate about what i do and perhaps give them reason to be inspired enough to get involved and share in the experience!

Nick Surran · 9th Oct 2011, 01:03 PM

I've gone to sites on my iPhone that have given me a pop-up/pop-out message saying "It appears you're on a mobile device, would you like to go to our mobile site?"

How do I do this?

Jay Moreno · 9th Oct 2011, 01:09 PM

Originally Posted by Iolaus

I've gone to sites on my iPhone that have given me a pop-up/pop-out message saying "It appears you're on a mobile device, would you like to go to our mobile site?"

How do I do this?

i was previously doing that using javascript user agent detection and firing up an alert... on clicking ok it simply invokes the redirect...

i have stopped deploying that on new sites for the interim period as i have a much better approach that uses cookies to stop it continually popping up if you cancel

1st Sep 2011, 01:32 AM	#1
Joe Motion Location Independent War Room Member Join Date: 2011 Location: Bangkok, Thailand Posts: 411 Thanks: 99 Thanked 83 Times in 55 Posts	Mobile redirection code Share on: Hey, I'm trying to improve on my mobile redirection code.. This is what I have so far.. Code: <script> (function mobileRedirect(a,b){ if(/android.+mobile\|avantgo\|bada\/\|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.test(a)\|\|/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.test(a.substr(0,4))){ window.location=b; } })(navigator.userAgent\|\|navigator.vendor\|\|window.opera,'http://m.yourmobilesitelink.com'); </script> What is everyone else using? It seems there isn't one definitive way to do this :rolleyes:
	Living in SE Asia.. BKK.. PM me for a beer!

1st Sep 2011, 03:33 AM	#2
Magnus Koenig HyperActive Warrior War Room Member Join Date: 2010 Posts: 145 Thanks: 3 Thanked 24 Times in 17 Posts	Re: Mobile redirection code Share on: This one is a very simple one: Code: <script type="text/javascript"> if (screen.width < 800) window.location.replace('mobile.htm'); </script> But it works fine

1st Sep 2011, 03:54 AM	#3
Hackbridge I think I'm getting there War Room Member Join Date: 2005 Location: West Midlands, United Kingdom. Posts: 1,959 Thanks: 1,244 Thanked 378 Times in 326 Posts Blog Entries: 6	Re: Mobile redirection code Share on: I can test the redirection right now, as I have my phone by the PC. What website link should I look at. Brian
	Looking For Top Amazon Keywords? Look no further NO CHARGE ;-)

1st Sep 2011, 04:36 AM	#5
Hackbridge I think I'm getting there War Room Member Join Date: 2005 Location: West Midlands, United Kingdom. Posts: 1,959 Thanks: 1,244 Thanked 378 Times in 326 Posts Blog Entries: 6	Re: Mobile redirection code Share on: The next piece of the puzzle would be mobile templates. Brian
	Looking For Top Amazon Keywords? Look no further NO CHARGE ;-)

2nd Sep 2011, 09:56 PM	#7
Joe Motion Location Independent War Room Member Join Date: 2011 Location: Bangkok, Thailand Posts: 411 Thanks: 99 Thanked 83 Times in 55 Posts	Re: Mobile redirection code Share on: Looks like I'll stick with my standard JavaScript code then.. Did some research and the amount of people that don't have JavaScript enabled is extremely small.. this is some data I found online from a site that gets 30,000 visitor per month.. JS 1.3 - 94.23% JS 1.2 - 5.61% JS 1.1 - < .00% Other versions - .04 No JS - .12%
	Living in SE Asia.. BKK.. PM me for a beer!

3rd Sep 2011, 01:41 AM	#8
Mahara Adhe Lurking Warrior War Room Member Join Date: 2010 Location: Austin, TX Posts: 264 Thanks: 121 Thanked 92 Times in 78 Posts Blog Entries: 1	Re: Mobile redirection code Share on: Nice! I was about to purchase a full mobile WSO just for that script lazy. Thanks for sharing. Do you guys know of any good resources for templates?
	Build A List..3x Larger..3x Faster..On Autopilot! Click Here For More Info

3rd Sep 2011, 10:06 AM	#9
Brandon Tanner Advanced Warrior War Room Member Join Date: 2006 Location: USA Posts: 1,907 Thanks: 237 Thanked 1,377 Times in 676 Posts	Re: Mobile redirection code Share on: I would use a redirect script based simply on browser width, because if your script is based on user agent, then you're going to have to constantly tweak it whenever a new mobile phone or OS comes out. But instead of using a width of < 800, I would use < 1024. Reason being is that there are more than a few smartphones out now that have screen widths greater than 800 (and no doubt many more to come). Yet virtually no one on a regular computer or laptop uses a screen resolution of less than 1024x720 anymore --> Browser Display Statistics Heck, even my tiny netbook has a screen width of 1024 px.

9th Oct 2011, 09:57 AM	#14
tgdawson Warrior Member War Room Member Join Date: 2010 Location: Here and there Posts: 3 Thanks: 1 Thanked 1 Time in 1 Post	Re: Mobile redirection code Share on: Thanks for that post, Do you do any teaching or have a small course. With 8 years I'm sure you have some good tricks. Tom

9th Oct 2011, 01:03 PM	#16
Nick Surran HyperActive Warrior War Room Member Join Date: 2003 Posts: 126 Thanks: 55 Thanked 66 Times in 35 Posts	Re: Mobile redirection code Share on: I've gone to sites on my iPhone that have given me a pop-up/pop-out message saying "It appears you're on a mobile device, would you like to go to our mobile site?" How do I do this?
	I think Lime Cellular is the best white label SMS marketing platform.