Detecting and Redirecting Mobile Devices

Remember a few months ago, when I was inspired by Steve Butzel's presentation at NELA2010 and created a mobile version of my library's website? I bet you have that date marked on your calendar.

Anyway, one lingering problem I had was some mechanism to automatically detect mobile devices when they visited our website, and reroute them to the mobile version instead of the full web version. I finally had some time this week and was able to accomplish that - aided by the fact that it was easier than I expected.

The ultimate goal is to redesign our entire site along the lines Brett suggested, by creating a stylesheet specifically for mobile devices. Brad pointed out that the Canton Public Library employs this, awesomely: visit their site and slowly make your browser window smaller, and watch the website flip from "full web" mode to "mobile" mode.

That was more than I could handle this week, so I opted for the detect-and-redirect approach. I had found online instructions using both javascript and php, and I went with the php method because

• I think php is more reliable than javascript, because javascript depends on the browser whereas php runs on our server
• Php is more fun, and I know our server runs php

The website offering the php method is http://detectmobilebrowsers.mobi, and very happily they make it available free for non-profits. Here's what I did:

1. Read and reread their website
2. Downloaded the main bit of code, and uploaded it to our web server
3. Used their Function Generator to create the snippet of code to paste into the top of our homepage. I chose to treat all of their options as a mobile browser, and redirect them to http://www.chelmsfordlibrary.org/mobile - the resulting code looked like this:

   require_once('mobile_device_detect.php');
   mobile_device_detect(true,true,true,true,true,true,true,
   'http://www.chelmsfordlibrary.org/mobile',false);
   

   (this should be two lines of code, but it wraps because of the width of my blog - if you use this code, make sure the second and third lines above are actually one long line)

4. I copy/pasted that code into our index.html homepage. However, because this is php code, it had to go between php tags, (<?php and ?>), so the complete code I actually added to the top of our page was:

   <?php 
   require_once('mobile_device_detect.php');
   mobile_device_detect(true,true,true,true,true,true,true,
   'http://www.chelmsfordlibrary.org/mobile',false);
   ?>
   

   (again, see note above about line wrapping)

5. Note that the path in the "require_once" line must match where on your web server you actually saved the mobile_device_detect.php file (downloaded in Step 2)
6. Now, the last step was a little tricky, because it involves editing the .htaccess on the server. It's easy though, and one of their faq answers explains it.

   Basically, .html files don't normally run php code - .php files do that. So if our homepage was index.php instead of index.html, I could have skipped this step. Instead, in order to make .html pages execute php, I had to add a few lines to our server's .htaccess file - which was no trouble at all - and then everything worked splendidly

That is, at least, so far. I've done some testing with mobile devices and (as suggested) with the User Agent Switcher Firefox add-on, and all of that has worked. But please, if you have a mobile device, visit our homepage (http://www.chelmsfordlibrary.org) and let me know if you don't get redirected to our mobile site.

A couple other notes:

• I also added a link to the mobile site in the upper-left corner of the homepage, in case the redirect doesn't work
• I only added this auto-detect to the homepage. I thought about adding it to every page, but our full site has a lot of information our mobile site doesn't - especially descriptions of our events. If I added the redirect to every single page, people with mobile devices basically wouldn't have access to any of that. So, my thinking is to provide mobile users with the (robust) basics, but if they want more than that they'll have to endure our not-great coding until we're able to redesign the entire site to be mobile-friendly

This was easier than I was expecting, which makes me think I missed something.

Update: someone pointed out a gap in my logic. On the mobile site, there is a link to "Visit our main site" which linked back to our full homepage. However, since the homepage redirected people to the mobile site, anyone clicking that link from the mobile site just got looped right back to the mobile site. So, I changed that link to go to our About page. Again, this is a good reason to just have mobile-friendly stylesheets like Brett and Brad suggest above.

Posted under Uncategorized | 10 Comments »

Reference Question of the Week – 11/9/08

A patrons walks up to the desk, slides me this piece of paper, and says,

I was walking in the woods behind my house and found a plaque with this written on it. Can you tell me what it says?

He then elaborated saying the plaque was made of stone and the characters were painted onto it and it looked like an ancient language so he went online and found Omniglot.com and by looking at the alphabets there decided they must be Runic characters and in front of the plaque was a little container which he didn't open but he photographed the whole area and...

It took awhile before I could get a word in edgewise, but the longer he talked, the more it sounded to me like he had found either a letterbox or a geocache. When I did get a chance, I asked him a few more questions in this direction, and his answers made me feel I was on the right track.

He had never heard of letterboxing or geocaching, but after a quick explanation, he was interested. I told him that both were treasure-hunting activities, in which the participants follow either clues or GPS coordinates, and then have to solve puzzles, riddles or codes to find the "treasure."

I showed him the websites where many letterboxes and geocaches are registered, http://www.letterboxing.org, http://www.atlasquest.com, and http://www.geocaching.com. Since the "clue" he brought in was entirely encoded in Runic characters (a quick check on Wikipedia's Runic article and a couple books on Runes confirmed this), I guessed that this was a geocache, so we started there.

We first tried searching by zip code, but that brought back too many results. Geocaching.com's advanced search also allows searching by coordinates, so we went to Google Maps and I had him show me as closely as possible where he found the plaque. By right-clicking on the location he pointed to and choosing the "Center Map Here" option, we zeroed in on his location. Then by hovering over the "Link" link on the top right of the map (circled in red), we could see the coordinates in the URL. It took a bit of trial and error to translate that into what the Geocaching.com search wanted, but eventually we figured it out (it's Decimal Degrees).

When we searched on the those coordinates and click on the first result, the details and clues listed were also in Runic code, so we decided we were in the right place.

I didn't help the patron decode all the new clues, but we did work on the original sheet he brought it. It turned out to be the final clue for this cache, and was numbers spelled out (as in, N-I-N-E), which I think were the final coordinates a geocacher needed to plug into their GPS unit to find the cache.

The patron was both happy with this decoding, and interested in this new activity. I've done both geocaching and letterboxing, so it was fun to share some information from personal experience.

Posted under Uncategorized | 6 Comments »

Standing on the Keyboards of Giants

During Jessamyn's Pimp My Firefox talk at cil2007, something occurred to me. So much of the code used on websites today was written by someone else - themes, rss feeds, widgets, etc.

I think this is great, as freeware/open source/creative commons all allow people to share good ideas - repacking them, repurposing them, resuing them.. you know, recycling.

(not to mention that this has been my style of coding ever since I started coding in 1996. I am almost exclusively self-taught, which means I learned from seeing something I liked on the web, viewing the code, and figuring it out. Often, this meant I grabbed the code and tweaked and modified it to do what I wanted. You can learn a lot through trial and error)

So, it was during that session that I got the idea for this new movement, the "made with recycled code" movement. By "movement," of course all I mean is create a little icon and stick it on my webpage. And not being a graphic designer, it's not even a very good icon, but I think it's a catchy phrase.

If you like it, grab it from flickr or the psd file from my website (big [575x575px, 316kb]; small [130x130px, 119kb]).

cil2007, code, coding, freeware, jessamyn, jessamyn west, made with recycled code, open source, recycle, recycled, recycled code, rss, site made with recycled code, themes

Posted under Uncategorized | 1 Comment »