Wednesday, October 2, 2013

How to configure your website to detect mobile devices

 [nerd scale: 2 out of 5 pocket protectors] 
 
Is your website mobile friendly?  People are using their cell phones and other mobile devices to browse the web much more than in the past.  It is important to make sure that your website is easy to navigate from a mobile browser, otherwise the short moment of time that you have to make a good impression and capture a visitor's interest could be lost.
 
 
There are many ways of making your website mobile friendly.   If you are truly geeky, you might decide to let CSS be in charge of handling all our mobile reconfigurations.   Or you can create new web pages to which you can redirect mobile traffic.   Regardless of the way you decide to handle your mobile traffic, one thing has to happen:  your website needs to detect that a mobile device is accessing the web site.
 
 
Here is a great little javascript I use to detect a mobile device and forward the traffic to my mobile web pages:


<script type="text/javascript">
(function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|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|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(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|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'mobilebink.html');

</script>
 
 
To most of us, this looks like a bunch of gobbily-gook. Basically, this script is just a Regular Expression that is interrogating the User Agent information that is provided by the web browser making the request to the web server.   What is most important is what you tell it to do if a match is found.   In this case, one of the very last lines of code contains 'mobilebink.html'.  This tells the script to navigate to the webpage mobilebink.html if a match is found, or in other words if a mobile device is detected.
 
If you want to use this, all you need to do is copy the script and place it after the <head> tags and before the <body> tags of your web page.  It will look something like this:
 
 
With this script in place, a mobile device will navigate from this page:
 
 
to this page automatically and instantly before the original page is rendered:
 
 
 
 
If you are looking for someone to help make your website more mobile friendly, contact us at Binkley IT Consulting.   We can help.
 
 


7 comments:

  1. It is a really nice idea amazing that your website too can track your mobile phone.

    Thanks
    Charlie Electra

    Buy Electronic Products

    ReplyDelete
  2. I was very pleased to find this site. I wanted to thank you for this great read!! I definitely enjoyed every little bit of it and I have you bookmarked to check out the new stuff you post. cell phone detector

    ReplyDelete
  3. Great post,Thanks for providing us this great knowledge,Keep it up.
    A good blog.
    Jugar juegos de frozen en línea gratis, los nuevos de princesa de Disney frozen juegos - la princesa encantadora y linda. Divertirse frozen!

    ReplyDelete
  4. I would like to thank you for the efforts you have made in writing this article.
    Signature:
    download descargar facebook gratis para Android celular and download free descargar facebook apk en español, descargar facebook plus , descarga facebook

    ReplyDelete
  5. Thank you for sharing valuable information. Nice post. I enjoyed reading this post.
    Signature:
    download free descargar whatsapp and download baixar whatsapp online and descargar whatsapp gratis , baixar whatsapp gratis

    ReplyDelete
  6. Thanks for sharing. I hope it will be helpful for too many people that are searching for this topic.
    Signature:
    download baixar facebook movel, Facebook movel, baixar facebook movel. Facebook chat, baixar whatsapp gratis, fazer o download baixar whatsapp para Android, iPhone. Últimas Facebook

    ReplyDelete
  7. A BIG THANK YOU EDWARD JONES LOANS {Jonesloanfinance@yahoo.com}

    Hi my names are Nathan MacDonald, i was really in financial difficulty which affected my life negatively and my company savings was seriously depleted and we needed help but no one could help us out even the company direct main bank could not even risk to help us because we were at bottom low. My life was a mess and my wife needed a devious, I almost went mad, then decided to look for one way or the other to revive my company but no one was willing to help until i got to know about a prestigious loan company Edward Jones Loan Finance, whom have helped a lot of aliening company in the past and assisted a lot of individual financial. So i decided to request for help and to my greatest surprise they were just as everybody were talking about. they helped me with my loan with a very low interest rate of 2% and now my life is back to normal and i still got back my wife and kids. Am very thankful with the help of Edward Jones Loan Finance and if you are looking for a way to get a loan for one means or an other , your best choice is Edward Jones Loan Finance and you can contact them via email : {Jonesloanfinance@yahoo.com} or go to there page on http://jonesloanfinance.bravesites.com or Text +1(307) 241-3712

    ReplyDelete