Saturday, December 1, 2012

Detect Mobile and Perform Site redirection (modding detectmobilebrowsers scripts)

Background:
I was working on some freelance project on setting up mobile sites for local businesses and stumbled upon the problem of how best to redirect "clients" to the respective mobile site. After some careful consideration and research on Google this is what i came out with.

Goal:
  1. Accurate detection of mobile devices with little future maintenance 
  2. Warn clients of redirection and giving them the option to reject our goodwill
  3. If client choose to view the full site, allow them to do so
====================================================================
 Sample modded JS can be found here. 

Summarized Solution:
  1. Download modded JS.
  2. Add js to your site.
    ..script src="js/detectmobilebrowser.js"..
    ..$(document).ready(function(){
            runDetect();
        });..
  3. Add runSet() function at link to full site
    ...a href="http://thewanderingtech.blogspot.com" title="thewanderingtech.blogspot.com" target="_self" onClick="runSet()".........................
  4. Done. Test. Enjoy
====================================================================

Long winded Solution + Thinking process:
Accurate detection of mobile devices with little future maintenance 
http://detectmobilebrowsers.com/ offers free script to detect mobile devices.
I chose to use the Javascript version of detectmobile as i want minimal disruption to how search engine crawl the Main Site. Think SEO.
Sample:
(function(a,b){if()window.location=b})..........................................(navigator.userAgent||navigator.vendor||window.opera,'http://www.google.com/');
The script works great, but i am not able to fulfill Goal 2 & 3. With such a compact script it could be daunting to Web developers who are not comfortable with coding. 


Warn clients of redirection and giving them the option to reject our goodwill
Simple solution using Confirm
Open detectmobilebrowser.js with a text editor of your choice.
Find
window.location=b
and Replace this string with
if(confirm('For best viewing experience we recommend redirecting to our mobile site')){window.location=b}
Save the js file and you are done. Feel free to change the message you want to display.

If client choose to view the full site, allow them to do so
Nothing is more frustrating than being forced to view a mobile site when all i want to do is view its full site on a mobile device. 
Simple solution using Cookie to track user's intention.

Create a cookie called view to track user's intention.
If from a mobile site, a user clicks on the link view full site, we know that this mobile user wants to visit the full page and does not want to be redirected to the mobile site.
We set the cookie to last 1 day.
Therefore the user would only get redirected to the mobile site the following day or if he/she clears the browser cookies.

From http://www.w3schools.com/js/js_cookies.asp i added these function to detectmobilebrowser.js.
function setCookie(c_name,value,exdays){ .. }
function getCookie(c_name) { ... }
runSet() function informs us that user wants to view our full site.
@JS
function runSet()
{
      var view = getCookie("view");
      setCookie("view","full",1);
}
@ html View Full Sit
a href="http://thewanderingtech.blogspot.com" title="thewanderingtech.blogspot.com" target="_self" onClick="runSet()">View Full Site
runDetect() function will trigger the mobile detection and redirection script as long as cookie "view" is not set to a value "full"
function runDetect(){
var view = getCookie("view");
if(view != "full"){
(function(a,b){if()w ...........  .........     ..........www.google.com/');
}
 Sample modded JS can be found here. 


sss