A few weeks ago my brother approached me and asked me if I could help him setup a mobile site for his company. He’s a professional photographer and beyond his landing page, the site is entirely flash and therefore not mobile friendly.
Working for an internet technology firm has it’s advantages. I was able to quickly ask around and find out exactly what is needed, and it’s actually rather simple.
Though it seems backwards, we’ll start from the end and work back. If we’re going to send users to a mobile site, we have to have a mobile site in place. With a simple text editor and some relative paths to logos (optimized for mobile phone screens), one can build a simple mobile site in a matter of minutes. By “simple”, I just mean that the site isn’t going to have a whole lot of functionality. It will have a landing page, contact info, hours, location/map, and for his business, perhaps a few thumbnails to showcase work. Putting all this together takes about 20 minutes.
Now that we have the “mobile site” built, we need a way to intercepting traffic. The easiest way is a simple “View Mobile Edition” link on his landing page, so that if a user arrives by way of a mobile device, he or she simple clicks the link to see the phone friendly version. To add another level of sophistication–and professionalism–one really needs to employ a “sniffer.”
A browser sniffer, typically a simple javascript file, can quickly determine which type of browser is being used to display the page. If you know which browser is being used, you can deduce (in most cases) which mobile device is being used. In the file itself, we’ll need to define two variables: (1) the URL path of the mobile site, and (2) which browsers to ‘sniff’ for. Defining variable 1 is simple, it probably looks something like http://www.yourdomain.com/mobile/index.html. Defining variable 2 is a bit harder. In order to ‘sniff’ all mobile devices, you have to define all of the browser types, or “user agent strings” as they are officially called. These strings look something like mozilla/5.0 (macintosh; u; intel mac os x 10.6; en-us; rv:1.9.1.2) gecko/20090729 firefox/3.5.2.
Defining a list of all of these user agent strings can take awhile, but luckily, you can download some ready made js files that have all the main strings packaged nicely for you–including strings for iPhones, Blackberries, Droids, iPads, Windows based devices, and other smart- and mediocre- phones. Also, Wikipedia has a nice, up-to-date list to make life easier for you.
So, once you have built your mobile site and defined which mobile devices you wish to sniff for, all that’s left to do is call the js file in the
section of your website. This may be in your index.html file or in an include such as header.php if you’re using a dynamically driven framework like WordPress. Either way, the include would look something like:
<script type="text/javascript" src="js/sniffer.js"></script>
So, there you have it. You now know how to automatically direct mobile users to a mobile-optimized site. If you have any thoughts on the matter, an easier implementation, or resources that might be helpful, please share them!
Update: Note that user agents are case sensitive. For example, “Blackberry” is not the same as “BlackBerry” (and the latter is correct.)