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.

Advertisements
This entry was posted in Mobile, Web programming, Webmastering. Bookmark the permalink.

15 Responses to Redirect to a mobile site, unobtrusively

  1. jerrycurl says:

    Hi,

    I just came across this post as I am having trouble getting my mobile site to redirect to the main site as you described. Unfortunately, your solution isn’t working for me, at least on the iPhone. It still loops back to the mobile version. Any thoughts, or do you have more specific code?

    • Martin Mapes says:

      First, make sure you visited the link to OhRyan’s blog — he has much more detailed code. My one line is just an addition. Here’s another sample in use on one of my sites:

      # If you’re not already on m.YOUR_DOMAIN_NAME.com,
      # and if you’re on a mobile device,
      # and if you just got here (didn’t get here by clicking links on YOUR_DOMAIN_NAME.com),
      # and if you’re not just looking for pictures
      # then go to the mobile site instead
      RewriteCond %{HTTP_HOST} !^m\.YOUR_DOMAIN_NAME\.com [NC]
      RewriteCond %{HTTP_USER_AGENT} “android|blackberry|iphone|ipod|iemobile|webos|googlebot-mobile” [NC]
      RewriteCond %{REQUEST_URI} !\.(jpg|png|gif)$ [NC]
      RewriteCond %{HTTP_REFERER} !^http://(.*).YOUR_DOMAIN_NAME.com/.*$ [NC]
      RewriteRule ^(.*)$ http://m.YOUR_DOMAIN_NAME.com/ [L,R=302]

      • Regis.D says:

        Thanks a lot for this solution, that’s exactly what i was looking for. I’m also using OhRyan’s technique to enable redirection to a custom mobile site folder. But I had some troubles with yours when going back to the mainsite (built with WordPress wich add his own redirecting rules to .htaccess), média, script and css were not loading.

        I had to add this line to OhRyan’s code to make it work ( this prevent url rewriting of files path ): RewriteCond %{REQUEST_FILENAME} !-f

        so my final code (for redirecting to a folder ) is :

        RewriteCond %{REQUEST_URI} !^/mobile/.*$
        RewriteCond %{HTTP_USER_AGENT} “android|blackberry|iphone|ipod|ipad|iemobile|opera mobile|palmos|symbian|webos|googlebot-mobile” [NC]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteRule ^(.*)$ /mobile/ [L,R=302]
        RewriteCond %{HTTP_REFERER} !^http://(.*).siteName.com/.*$ [NC]

        I give two others “tweaks” i’ve found usefull :
        – in my “/mobile” folder i’ve added an .htaccess with : RewriteEngine Off
        it seems to prevent somes redirecting loops issues (by the way my mobile site is not dynamic so i dont use redirection here)

        – in my main site i added a javascript to detect mobiles, so i can add a link for mobile users to let them go back to the mobile site (for others user agent this link is used to display a qrcode).

        hope these tips will be usefull and thanks again 😉

  2. Bob Gladstein says:

    This is almost exactly what I’ve been looking for. Has it continued to work well for you?
    Now I just have to figure out an IIS equivalent for that .htaccess code.

  3. I have been looking for a solution like this for 13 hours now. Finally came across this post. Thank you for having the solution.

  4. JIm Johnson says:

    This seems like it should work. When I test it on my WIndows box using Firefox and the User Agent add-on, it works; but if I try it from a smart phone I get an error (data connectivity problem – too many server redirects). Any thoughts on that?

  5. Anshul Gagneja says:

    Thank You ! This is exactly what I was looking for. Awesome !

  6. Idel says:

    Try to use with Apache Mobile Filter (http://www.apachemobilefilter.org), is easyand fast to install.
    It’s also easy to install with mod_rewrite (http://wiki.apachemobilefilter.org/index.php/Mod_rewrite_integration)

  7. Regis.D says:

    Thanks a lot for this solution, that’s exactly what i was looking for. I’m also using OhRyan’s technique to enable redirection to a custom mobile site folder. But I had some troubles with yours when going back to the mainsite (built with WordPress wich add his own redirecting rules to .htaccess), média, script and css were not loading.

    I had to add this line to OhRyan’s code to make it work ( this prevent url rewriting of files path ): RewriteCond %{REQUEST_FILENAME} !-f

    so my final code (for redirecting to a folder ) is :

    RewriteCond %{REQUEST_URI} !^/mobile/.*$
    RewriteCond %{HTTP_USER_AGENT} “android|blackberry|iphone|ipod|ipad|iemobile|opera mobile|palmos|symbian|webos|googlebot-mobile” [NC]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)$ /mobile/ [L,R=302]
    RewriteCond %{HTTP_REFERER} !^http://(.*).siteName.com/.*$ [NC]

    I give two others “tweaks” i’ve found usefull :
    – in my “/mobile” folder i’ve added an .htaccess with : RewriteEngine Off
    it seems to prevent somes redirecting loops issues (by the way my mobile site is not dynamic so i dont use redirection here)

    – in my main site i added a javascript to detect mobiles, so i can add a link for mobile users to let them go back to the mobile site (for others user agent this link is used to display a qrcode).

    hope these tips will be usefull and thanks again

  8. Jacky says:

    Oh thank you! I was looking for a quick and easy way to get this done 🙂 I had used OhRyan’s redirect, but was looking for a way for users to get back to the main site. Thanks!

  9. I am wondering if there is any way to redirect mobile to another DNS such as ns1.mydomain.com.

  10. Tyrone says:

    Many are saying with the high definition displays of phones these days redirects are an unwanted diversion for phone users – the sites are all the same, mainly menus with ads, to simplistic. Phone users want the whole site.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s