Solved: Best way to re-direct mobiles/handhelds to a sub-d...

glenofcawley · ‎09-09-2011

Hi all,

I've set up a mobile optimized version of our website and want to automatically direct those using mobiles/handhelds to the subdomain containing this site e.g. m.website.com

Tried googling this but there seem to be no clear answers - so would be gratfeful on any advice on best way to achieve this,

Thanks!

Glen

Sogo7 · ‎14-09-2011

Funny, most of websites traffic logs I look after for various people tells me that very few users, mobile or regular have javascript disabled. As for smartphones.. If its got a web browser then it's running javascript by default, but please do a little independant research and ask family and friends "do you have javascript disabled?" odds are you will get a lot of blank stares.

However a small sub-set of users using T-mobile do have javascript disabled, but not through choice. A bug at the t-mobile proxy server that intermittently affects mobile device users and PC users using tethered connections is stripping out script tags breaking some websites.

Alternatives to javascript? Assuming what you read were balanced articles then you should know that there are two other ways of redirecting users to a mobile version of your website.

1. Put an 'Alert' button or regular button on screen and give the user a choice, mobile friendly or normal site.

2. Redirect users based upon the UserAgentString that their device is using, this can be done using server side scripting such as PHP or by modifying the htaccess file

.htaccess file example

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]

The PHP version is pretty much the same in that you have to specify the name of the device to be redirected so the codes need to be updated on a regular basis as new models appear.

Lovelogic.net UK Jobs Scanner

View solution in original post

Sogo7 · ‎12-09-2011

As a budding website designer you will encounter few problems that are unique and so a quick search of Google reveals the answer to your often asked question.

It's all done with javascript as you can only figure how big the screen is from having code inside the browser. This snippet would go ideally in the <head> section of the page

<scripttype="text/javascript">

<!--

if(screen.width <=699){

document.location ="mobile.html";

}

//-->

</script>

It's worth noting that not all mobile screens are the same resolution so what looks correct on an iPhone may be awful on an Andriod and this slighty more complicated javascript shows how to use the 'User Agent String' to control the redirect.

<script language=javascript>
<!--
if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPod/i))){
location.replace("http://url-to-send-them/iphone.html");
}
-->
</script>

TIP# Google for 'Nokia Mobile Template' it's a free template you can download and will probably save you hours of stress.

Lovelogic.net UK Jobs Scanner

glenofcawley · ‎12-09-2011

Thanks for your reply - however most of what I've read on Google says that javascript is NOT the best way to redirect users to a mobile site given how many handsets do not run javascript or have it turned off... any other ideas?

G

Sogo7 · ‎14-09-2011

Funny, most of websites traffic logs I look after for various people tells me that very few users, mobile or regular have javascript disabled. As for smartphones.. If its got a web browser then it's running javascript by default, but please do a little independant research and ask family and friends "do you have javascript disabled?" odds are you will get a lot of blank stares.

However a small sub-set of users using T-mobile do have javascript disabled, but not through choice. A bug at the t-mobile proxy server that intermittently affects mobile device users and PC users using tethered connections is stripping out script tags breaking some websites.

Alternatives to javascript? Assuming what you read were balanced articles then you should know that there are two other ways of redirecting users to a mobile version of your website.

1. Put an 'Alert' button or regular button on screen and give the user a choice, mobile friendly or normal site.

2. Redirect users based upon the UserAgentString that their device is using, this can be done using server side scripting such as PHP or by modifying the htaccess file

.htaccess file example

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]

The PHP version is pretty much the same in that you have to specify the name of the device to be redirected so the codes need to be updated on a regular basis as new models appear.

Lovelogic.net UK Jobs Scanner

glenofcawley · ‎14-09-2011

according to my google stats - 31% of our site visitors do not support javascript... which suprised me

thanks very much for your reply though - massivly helpful and I've solved it now, thanks for your time mate 🐵

Sogo7 · ‎14-09-2011

@glenofcawley wrote:
according to my google stats - 31% of our site visitors do not support javascript... which suprised me

thanks very much for your reply though - massivly helpful and I've solved it now, thanks for your time mate 🐵

Anytime 'Glen of Cawley'

glad to be of some help.

PS: are you sure that's not 31% don't support JAVA ? (it's totally different language to javascript):smileytongue:

Lovelogic.net UK Jobs Scanner

Best way to re-direct mobiles/handhelds to a sub-domain