By Jennifer Marsh

Jennifer Marsh is a software developer, programmer and technology writer and occasionally blogs for Rackspace Hosting.

The small screen and slower connections on a smartphone make reading websites tough, not to mention expensive for people who pay by the megabyte for data use each month. Large images and sites intended for desktops aren’t easy for users to navigate, and older smartphones can crash with several images. Using JavaScript, the business can automatically port users to a mobile-friendly interface for smartphones and other devices with small screens and less bandwidth.

JavaScript Functions and Mobile Phone Redirects

Mobile phones and handheld devices use customized browsers written specifically for the smaller screen and wireless data transfers. For instance, the Apple iPhone uses a “Lite” version of the Safari browser. Each user that requests a page on the business website sends a request header that includes the information about the browser. Using this information, the cloud application can detect the browser settings, identify mobile devices and redirect the user to a friendlier version of the site.

The first part of the JavaScript code detects a setting called the “user agent.” The “useragent” function essentially detects if the requester is a bot, a browser or a mobile phone. The following code stores the user agent value into a variable named “browser”:

var browser = navigator.userAgent.toLowerCase();

The application must iterate through a list of mobile browsers. The cloud app can iterate through an array set up with a list of browsers. The following code creates an array with several browsers on the market for mobile devices:

var devices = [“iphone”,”android”,”palm”, “windows ce”, “blackberry”, “nokia”, “opera mini”];

This list is not the complete list of mobile devices, but it covers most of the common browsers for popular smartphones on the market.

Now that the devices are set up and the user agent is detected, the cloud app can iterate through each device name in the “devices” array. To iterate through an array, a coder uses a “for” loop. If the user agent value matches, the JavaScript redirects the user to the cloud application’s standard mobile phone home page. The mobile phone home page is typically a subdirectory or a subdomain of the current cloud web application. Some companies use a separate vanity URL to redirect users to a mobile phone website, but it is not necessary to support multiple domains just for a mobile phone cloud application.

The following code iterates through the list of devices and redirects the user to a subdirectory on the current website if the user agent matches the list of devices:

for (var i = 0; i < devices.length; i++) {

if (devices[i].indexOf(browser) > 0)

{

window.location.href = ‘http://domain.com/yourmobile_subdirectory’

}

}

The code above forwards the user to the “yourmobile_subdirectory” directory, which should contain the mobile-friendly HTML pages for the cloud application. This is all the code needed to redirect users based on a browser type. Save this code to the homepage or each of the pages in the cloud app that have a corresponding mobile phone page.