Codiqa is the fastest mobile prototyping tool around. Learn more
45 Flares 45 Flares ×

redirectron

Redirectron is a service from Drifty, which makes it easy to redirect mobile users to your separate mobile website. Its ultimate goal is to take the headache out of detecting mobile devices and redirecting them to the correct location.

Simply put:
• No worries about installing and paying for large server-side solutions.
• No worries about maintenance and keeping your detection data updated.
• No worries about loading large external JavaScript files.
• No worries about slowing down your website.
• No worries about any additional load on your servers.

How Does It Work?

how it works

Let’s say you operate a website at http://www.example.com/ and have also developed a mobile website at http://m.example.com/. Ideally, visitors on mobile devices with small displays (such as an iPhone) should view your content from your mobile website. Once an iPhone user visits http://www.example.com/, the detection script would determine that it is better for the device to view the http://m.example.com site. However, the trouble lies in correctly detecting if the person is viewing your website from a small display or a large display.

A common workaround is to use “user-agent sniffing”, but the problem lies in its accuracy. Usually, home-grown scripts will simply check if “iphone,” “android,” or “blackberry” in the user-agent string. While this method “works” on the phone you tested it on, the reality is, there are thousands of different types of user-agents, and they’re forever changing. What makes matters worse is that it is getting harder to tell the difference from a phone or a tablet, especially for Android devices.

The great news is that Redirectron does all of this work for you, and makes it extremely easy to setup- all at no cost to Codiqa users.

Desktop Site vs. Mobile Site

desktopvsmobile

The term “Desktop Site” is commonly used to describe websites with a wider format easily viewed by larger displays, like a desktop or laptop computer. A “Mobile Site” is a website that was built so it can fit within smaller displays, such as a mobile phone. Codiqa is great at building mobile sites.

Tablet devices, such as an iPad, Kindle Fire or Samsung Galaxy Tab, live in that gray area between a small display and a large display. In most cases we prefer tablets to view the desktop sites rather than mobile sites. While tablets are “mobile” in nature, as in they can be picked up easily and used on a subway, they still usually have a wide enough display that merits the desktop site.

Adding Redirectron To A Codiqa Project

To use Redirectron you must first be a Codiqa user and have created a project (if you haven’t created one yet you can sign-up for free and test it out, you’ll have a blast).

With your Codiqa account and project created you can now add Redirectron to any project using the Add-on’s page, which can be found in the header on Codiqa’s dashboard. Next find the Redirectron section (the one with the awesome robot) and click “Add to Project”. In the dialog simply click the project you would like to add Redirectron to. Each of your projects can have one Redirection account.

Redirectron Configuration

adding redirectron
In the “Desktop Site URL” input, simply enter the website address to your desktop version. In actuality we’re only looking for the hostname of your desktop site, such as www.mysite.com.

In “Mobile Site URL to Redirect To”, Redirectron needs to know what website to “redirect” mobile users to. This address needs to be more specific and include the scheme, hostname and path. For example, http://m.example.com/ is a complete URL (http:// is the scheme, m.example.com is the hostname, and / is the path).

Maintaining Website Paths

But wait, simply redirecting all mobile users to http://m.example.com/, no matter what desktop webpage they came from, can be frustrating for the visitor. For example, if a mobile user visited a specific page, such as http://www.example.com/article.html, even though they wanted to view the content at the path /article.html, they would always be redirected to http://m.example.com/. This can be upsetting for the visitor because they were expecting to read a specific article, but instead got bounced to the mobile homepage which didn’t contain the article.

Great news is that you can maintain the desktop path which they were initially loading, and dynamically send them to the mobile site’s version using the {path} parameter. For example, in the mobile site URL you could enter http://m.example.com/{path} and the desktop site path which the user came from would be maintained in the mobile site URL. In the previous example, if a mobile user viewed http://www.example.com/article.html they would then be redirected to http://m.example.com/article.html.

The {path} parameter could even be used as a querystring, such as http://m.example.com/?from={path}. Placing the path in the querystring could be used as a method for the mobile site to locate and load the correct content. The {path} parameter is optional, but is a useful tool for seamless mobile website integration.

Desktop Site Code Installation

After configuring Redirectron from the Add-ons page of Codiqa, your next step is to install the necessary script on your desktop website. It’s important to note that only your desktop site should have the Redirectron code installed. Again: Redirectron code should only be installed on your desktop site, the mobile site does not require the Redirectron code.

desktop redirectron code

The Redirectron code is non-blocking, meaning it will not hold up your visitor’s browser as the page loads. Because it is non-blocking we recommend the Redirection code should be placed in the <head> of your webpages, this way it’ll be faster at detecting if a visitor is on a mobile device or not. When a mobile device is detected they’ll quickly be redirected to the mobile site, otherwise nothing will happen for desktop users. If there are desktop web pages which should not have mobile detection, simply do not include the code on that web page. More information can be found at Redirection’s documentation.

Desktop Site Code

Place the following code into the <head> of each web page which should perform mobile redirection (Reminder: only your desktop site will need this code):

Could not embed GitHub Gist 6177223: Not Found

That’s it! Give it a shot and let us know how it goes. As always, we want to hear your feedback on how we can improve it.

Adam Bradley

Maker of Internet things focusing on web applications, mobile, responsive images, responsive web design and content delivery. Proud dad, husband, veteran and dogs' best friend. Swing by and say hello on twitter.

More Posts

45 Flares Buffer 6 Twitter 12 Facebook 19 Google+ 6 LinkedIn 2 45 Flares ×
Share →
Buffer