Redirect to a mobile site, unobtrusively

I just made a kick-ass mobile web site (if I do say so myself) for a client. The question arose whether to provide a link to it from the main site (which another developer controlled), or to detect mobile devices and automatically redirect them.

I was eager to show off my work, so obviously I was in favor of the redirect. But I also remember the bad old days of browser sniffing, where every new release of hardware or software required updates to to the regular expressions that detected browsers. Every mobile phone manufacturer has a different signature, and there are dozens of them on the market.

But really, my client and I just wanted to target the iPhone crowd. If you have a teeny phone with slow, expensive internet, you’re not going to be looking at our mobile web site anyway, so why fight it? We could do a quick test on Android and BlackBerry (both of which have good modern web browsers) for good measure, and we’d be satisfied with that portion of the mobile market. (Aside: after 4 years with a company whose clients all demanded IE6 support, it’s liberating not to have to support bad browsers.)

The Android and BlackBerry tests showed very good results, so we were on our way.

Because another developer was in charge of the main site, I didn’t want to write a browser-detecting script that had to be included on every page. I could tell he didn’t have the time or interest to integrate my changes.

But if I could use Apache rewrites, I’d only have to include one unobtrusive little file. A little search turned up OhRyan’s blog post about redirecting to mobile sites, using an Apache .htaccess file. Best of all, he had come to the same conclusion we had: that you can pretty much ignore anything except iPhone, Android, and BlackBerry these days.

We copied OhRyan’s example, but we removed “iPad” from the list. The main web site looks better on the iPad’s generous screen than our slimmed-down mobile site.

The final hurdle was that our mobile site contains a link to the full site. The full site has more and different data, so it’s important users can get to it if they want to. But if the full site detects your browser and sends you to the mobile site… you can never get there.

There are lots of ways around it … setting cookies, passing parameters… but at this point I wanted the simplest, fastest, lowest-tech path. And remember, I didn’t own the main site.

In the end I decided to add one line to the .htaccess file — in part because it only required one line of code in a file I had to write anyway. It’s this:

RewriteCond %{HTTP_REFERER} !^http://(.*).CLIENT_SITE.com/.*$ [NC]

The first time you visit the main site, your HTTP_REFERER will be blank (or google.com, or something else); the condition will be true, and you will be redirected to the mobile site. But if you tap “Full Site” from the mobile site, your HTTP_REFERER will be from m.CLIENT_SITE.com; the condition will be false, and you will not be redirected to the mobile site. As long as you stay on the site, you won’t be kicked back to the mobile site. When you visit the main site again tomorrow, you will be redirected back to the mobile site, which is the desired behavior.

A little testing showed that it was possible to accidentally be sent back to the mobile site, but you had to click a non-standard link and then use the back button. Whatever. The one-line solution gave us the results we wanted, and it was painless.