WebHQ

The mobile version of our website is built on jquerymobile and can be accessed by typing the url http://webhq.blogspot.com/?m=1 on your mobile device. What we wanted to do is redirect our visitors from www website to mobile version by using Javascript. First of all we present you the result code, maybe you want it rather to understand how it work, So here this is:

HTML Code:

<script type="text/javascript">
// <![CDATA[ 
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));

if (mobile) {
	document.location = "http://www.yoursite.com/mobile.html";
}
// ]]></script>

How it work? Let analyze and explain this simple javascript code in few steps:

1. Detect the browser: the Javascript property navigator.userAgent that return a string object and enables you to detect the name and version of any web browser. An Example result for HTC Droid Incredible with Safari browser, Android 2.2 based can be:

Mozilla/5.0 (Linux; U; Android 2.1-update1; en-us; ADR6300 Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

2. We put the string in lower case by apply toLowerCase() function
3. We search in the navigator.userAgent string the name of some mobile devices iphone|ipad|ipod|android by using the test method.The test() method tests if the string matches a given regular expression. It returns true if it finds a match, otherwise it returns false.
4. If the mobile variable contains true, we redirect the browser to mobile version by using the document.location instruction. It Indicates the URL of the current document in the browser.
5. If you need to implement mobile browser detection in other languages than Javascript,you can use the MobileESP open source project for PHP, Java, APS.NET (C#), and Ruby. The MobileESP project seeks to provide web site developers an easy-to-use and lightweight API for detecting whether visitors are using a mobile device.

* !Please read this before apply this code to your website!

People wanted access to the website complete even using their cell phone and the mobile version, so we were forced to disable this code on our website.

What have we learned? Two important lessons:

1. People hate when they get redirected to some "mobile version"and there's no easy way to visit "normal" version.
2. If we really want to reduce the bandwidth and complexity of the website, the redirect operation needs to be done on the server-side and not javascript.

Apply the proposed code EXCLUSIVELY if you are obliged and have the right reasons.