or, The Hitchhiker’s Guide to Fear and Loathing at a Public Library Reference Desk

Detecting and Redirecting Mobile Devices

   December 16th, 2010

Mobile website mockup in testiphone.comRemember 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:

    (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:

    (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.

Tags: , , , , , , , , , , , , , , , , , , , , , ,

10 Responses to “Detecting and Redirecting Mobile Devices”

  1. Twitter Trackbacks for Swiss Army Librarian » Detecting and Redirecting Mobile Devices :: Brian Herzog [swissarmylibrarian.net] on Topsy.com Says:

    […] Swiss Army Librarian » Detecting and Redirecting Mobile Devices :: Brian Herzog swissarmylibrarian.net/2010/12/16/detecting-and-redirecting-mobile-devices – view page – cached Swiss Army Librarian is a blog by Brian Herzog mostly about library and technology issues relating to public libraries […]

  2. Chris Says:

    Redirects for me on my Droid. I do find it hilarious that you are writing web code for cell phones as you don’t own one. Looks good.

  3. Brian Herzog Says:

    @Chris: I didn’t know you had a Droid. And yeah, I am a Rubik’s Cube wrapped in a crossword puzzle inside an Encyclopedia Brown mystery.

  4. Margaret Says:

    About always getting redirected to mobile interface if on a mobile device… What I did was to create a version of the home page without the script and linked to that from the mobile version. If the home page is constantly being majorly revised this wouldn’t work.

  5. Brian Herzog Says:

    @Margaret: that is a good idea, although you’re right, updating a second homepage is more work. That’s why I chose to redirect to our About page – not extra work, and it still provides useful information for mobile patrons.

  6. Dan Says:

    Hi Brian. I really like the idea of being able to automatically redirect our users to our mobile site. I followed your directions very closely, then tried them again, but I got lost somewhere. When I try to access our library’s website on a “smart” phone I get an error message saying this “warning: cannot modify header info – headers already sent by (output started at /hermes/bosweb/web121/b1215/d5.eisenhowerpldcom/public_html/index.html:3) in /hermes/bosweb/web121/b1215/d5.eisenhowerpldcom/public_html/mobile_device_detect.php on line 165”. Any ideas on why this might be happening? I’d sincerely appreciate any input

  7. Brian Herzog Says:

    @Dan: This wordpress forum posting lists the same problem, and their solution is to make sure the code is at the very top of the page.

    Another site offered the fix of checking for extra blank spaces in your code

    Try those out and see if one of them fixes it. I found these just by searching for “warning: cannot modify header info”, and hopefully we’ll be able to figure this out.

  8. Automatic Mobile Detect and Redirect | Dan McPhillips Says:

    […] library’s website for a short while when a colleague sent me a link to Brian Herzog’s excellent post on automatic mobile browser detection. He gives a step-by-step guide to using a little PHP and a […]

  9. sis программы и приложения jar Says:

    We are a group of volunteers and starting a new scheme in our community. Your site provided us with useful info to paintings on. You have done a formidable task and our whole community will be grateful to you.

  10. Mold Removal Company Says:

    Wonderful beat ! I would like to apprentice even as you amend your site, how
    could i subscribe for a blog website? The account helped me a appropriate deal.
    I have been a little bit acquainted of this your broadcast offered brilliant clear idea