File Under: HTML, Mobile

How to Handle Mobile Site Redirects

Building a mobile-optimized website is an increasingly common task being asked of web developers. Mobile-optimized designs take into account small screen size and often compress content for delivery over slower networks.

Mobile sub-sites are often the first strategy developers turn to. But at the same time, full-fledged mobile browsers like Safari, the Android browser and Opera Mobile mean that many users don’t necessarily need a mobile site; their browsers are capable of rendering any page, albeit with some pretty tiny text.

This creates something of a problem for web designers — how to you handle mobile visitors? Should you redirect them to your mobile site? Just serve the full size version? Offer links from one to the other?

Those are the questions Django developer Eric Holscher recently raised on his blog asking the community how to handle mobile browsers. Holscher breaks down the possible use cases for a mobile site as follows (note that all of these scenarios involve some sort of user-agent detection):

  • No Redirects — In other words, the mobile site lives at a distinct URL, but by default the main site is served to everyone, regardless of browser. The advantage is that those who don’t want a mobile site don’t get one, but at the same time some of your visitors might want a mobile site and in this case they can’t get to one without some effort on their part.
  • Redirect once (opt in) — As Holscher defines it, this “allows the mobile user to get a glimpse of your mobile site the first time they visit, and can then choose to visit in the future.” The problem here is that mobile browsers don’t always do well with cookies.
  • Always redirect (opt out) — In this scenario, users are always sent to the mobile site, but offered a link to the full site. If you do use this scenario, for the love of angle brackets, make sure you direct to the full URL of the page your visitor is currently reading. Redirecting from a blog permalink to the mobile homepage is about as useful as giving away free buckets of hamster vomit.
  • Interstitial page — Holscher doesn’t mention this one, but it does come up in the comments on his post, where several developers suggest offering a link before the page loads. Something along the lines of, “would you like to view our mobile site or the full size version?”

So what’s the best solution? Well, there is no one-size-fits-all answer. Which option will work best for your visitors depends on several factors.

Is your mobile site functionally identical to your full-sized site? If so, then there’s no real harm in redirecting to the mobile version. Just make sure you offer a link to the same page on the normal site for those who don’t want the mobile version.

This seems to be one of the more common workflows for mobile sites — Google’s mobile apps, Wikipedia’s mobile site and even Facebook.com take this approach.

If your mobile site lacks certain features found on your main site, we suggest avoiding redirects. The thing to keep in mind with a functionality-limited site is that, while your mobile site might not be a full-class web citizen, there’s a good chance your mobile visitor’s browser is a full class browser, which means they might not want to deal with your mobile limitations.

Regardless of which solution you chose, pay attention to your logs and watch your user’s behavior. If you see a lot of redirect traffic immediately clicking the link back to your main site it’s time to rethink your strategy.