With the adoption of smartphones, most growth in mobile websites adoption will come in the coming years, just now milions users are  accessing internet by smartphones. Let be your website ready to meet such people. In this article we will explain how we have resolved this issue on our website http://www.localstreamer.com .Localstreamer is a software able to search news and events in any city of the earth. The information are retrieved from socialnetwork (facebook, twitter, foursquare,...) and from the engine News "Microsoft Bing" and finally displayed to the user.

The system also offers to all developers the ability to use the free Location API,  for languages: PHP, Object-C, Java (Adnroid too), Python, Ruby , read the tutorial [here]

The mobile version of our website is built on jquerymobile and can be accessed by typing the url http://m.localstreamer.com 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 this is, take it:*

 <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

Do you want a complete browser list? try this: http://www.zytrax.com/tech/web/mobile_ids.html

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.

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. http://blog.mobileesp.com/?page_id=2

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

After several hours following the publication of the article, we have received several reports of people unhappy, because they 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: 

• People hate when they get redirected to some "mobile version"and there's no easy way to visit "normal" version.
• 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. 

---------------------------------------------------------------------------------------------------------------------------------------------------

Thanks for reading and for all the positive comments you have given in recent weeks. If you want to say thanks to me, please visit my latest creation :

http://www.localstreamer.com/friendadder.html 

and retweet it. Search by location: facebook profiles and twitter users to follow.

---------------------------------------------------------------------------------------------------------------------------------------------------