Best Practices in Mobile Detection

This article provides web developers with tips and best practices for detecting when a user is on a mobile device or desktop computer so they may be redirected to the version that will give them the optimal viewing experience.
The mobile revolution is here.
With the market share of web–enabled smartphones increasing daily, the demand for mobile versions of websites and web–based applications is also exponentially growing. This creates a unique opportunity to build a specialized experience and interface optimized for those users who browse via their phone or other mobile device.

By drastically altering the user experience for mobile devices, we create a need to identify exactly when a user is browsing on a phone vs. on a desktop since the interface is so closely tied to the device. Generally speaking, we want to push mobile users to the mobile version of the website/app and desktop users to the desktop version. This ensures that each user receives the intended experience without compromising performance.

In this article, I will be presenting a best-practice reference for detecting mobile devices on the web in an attempt to create and optimized experience for both mobile, and desktop visitors.

Download the demo
usc mobile on an iphone

mobile.usc.edu on a Google Nexus One
Why detect for mobile devices?

Over the short life of the web, we have tweaked and changed how sites and applications work in a browser to optimize the experience for our users. We focus on things like: design, responsiveness, performance, and ease of use. All these principles are constantly changing as we discover better and more efficient ways to cater to the needs of our user base.

While these practices apply very well to the desktop user, some of them get lost in the transition to the mobile web because the devices are so vastly different, yet we’re still trying to access the same information.

Notable differences between desktop and mobile

Screen size
Point of action (mouse cursor vs. a person’s finger)
Bandwidth

The screen size on a mobile device is significantly smaller than that of a normal desktop computer. For this reason, you must be very efficient in the way you organize the vital information on the screen. User interaction with the mobile device is very different when using a finger to navigate, so we need to accommodate for that. And optimizing the site for the restricted bandwidth of a mobile device can also be a challenge.

For these reasons, it is important to know that a user visiting your site/app is getting the best experience possible on their chosen device. Sending a mobile user to a desktop site can create a negative user experience akin to using an 18-wheeler as a taxi in downtown LA (wrong job for the device). Unhappy visitors are not generally return visitors.
Scenarios

We need to consider a few different scenarios when installing mobile detection script, and all of them have to do with accessing the mobile site, whether from a mobile device or from a desktop.
From mobile device to desktop version
mobile to desktop

mobile to desktop

This is probably the most common situation you will come across as you build out various projects. The mobile–to–desktop scenario represents a user browsing from a mobile device to the desktop version of your website/app. In this case, you will want to run some sort of detection and pass them along to the mobile version where they can have an enhanced experience.
From mobile device to mobile version
mobile to mobile

mobile to mobile

Ideally we would love for mobile users to navigate straight to the mobile version of the site they are seeking, probably from a bookmark; but that doesn’t usually happen. This is easier to achieve after the initial device detection has occurred as the user will have been redirected to the mobile site and could possibly bookmark that URL instead of returning to the desktop version.
From desktop to mobile version
desktop to mobile

desktop to mobile

Since the mobile version of a site/ app is usually free of advertisements and optimized for speed and efficiency, and offers a direct access to the information, many desktop users like to navigate directly to the mobile version. There are not really any negative repercussions in doing this, so generally we allow a desktop user to access the mobile version without any sort of intrusion.
Detection methods

A couple different methods of detection are popularly used to distinguish between mobile and desktop. They are generally used together to reduce server load and increase the speed at which detection happens. The two types are: device-driven and cookie-driven detection. Both types of detection occur on the server-side, rather than the client-side. We take the load on for this because the server is generally much faster than any device the user (client) may be browsing on, and this will increase performance for the user.

Client-side detection is also an option using javascript, but it is not recommended.
Device–driven
store closed mobile notification

Mobile notification

Every web–enabled device — be it an iPhone, Android, web browser, or mall kiosk — has data attached to it called a “User Agent String.” This string of text can tell us exactly what kind of device a user is browsing with so we can target it (the device) accordingly.

For example, if you’re visiting a website on an iPhone, your user agent string will look something like this:

Mozilla/5.0 (iPhone; U; CPU) iPhone OS 2_2_1 like Mac OS X; en-us) AppleWebkit/252.10.1
(KHTML, like Gecko) Version/3.1.1 Mobile/5H11 Safari/525.2

It may seem like a lot is going on there, but for our purposes, we just need to know that it says “iPhone” somewhere in the string. By knowing that, we can use any server-side technology to accurately redirect all iPhone users to a mobile version of our site or application.

To find out your user agent string, you can create a web page running this PHP code, and simply visit it:

If you need some help getting started on a mobile detection script, we recommend using the open source script freely available at Detect Mobile Browsers. You may also want to look into using a slimmed–down version to slightly improve performance.

After opening the detection script, you may notice that it’s not exactly a small file. Because of this, we don’t want to have to run it each time a user visits a page in a website; we want to run it once, and then not have to check again. This is where cookie-driven detections come in.
Cookie–driven
php logo

PHP logo

A cookie is a small file that gets installed on your computer when you visit a website. This file contains information that can be used for all sorts of benefits as you browse the web. In our case, we’re going to use a cookie to let us know if a user is on a mobile device or a desktop.

Allowing our detection script to set a PHP cookie will allow us to bypass the script the second time around since we can simply check for the existence of a cookie and send the user in the right direction rather than running the detection script over and over again.

Setting a cookie in PHP is very easy:

Above is the code we use to set the mobile cookie for USC on Twitter. You’ll want to customize it for your application or site but the general idea is to set a PHP cookie with the name “mobileCookie” for the app “usctwitter” and let it expire in 1 year. This lets us keep the cookie for a pretty long time, only having to run the detection once. And by setting the name usctwitter, we will always be able to tell where the cookie came from.
Cross–application compatibility
5 iphones with different sites displayed

Working across many mobile sites and applications

We can certainly do this type of detection for every application we have, and it would work perfectly fine, but in the idea of open source and the open web, we can make it a little easier on ourselves simply by using a cookie with the same name each time and for every site/app.

By using a cookie named mobileCookie or desktopCookie, we can create a seamless network of mobile sites and applications. This means that a user can navigate from site to site and the device detection only has to happen once (the first time); this lessens the load on servers and will ultimately result in better performance for the user as we just need to check for the presence of the cookie each time rather than firing a detection script over and over.
Giving the user options
Google mobile hightlighting the view full site option

The mobile version of google.com

It’s important to remember that we don’t know everything. All the research in the world is not going to tell you about each individual person who visits your site. You can gather general data about who they are, where they’re coming from, and how they’re viewing your site, but users still have individual preferences about how they like to browse the web.

Some users may not like the mobile version of your site or maybe they’re just used to the desktop version and don’t care to switch to the new interface. Either way, we need to give them an option to revert back to the original version.

Google, and many other sites, accomplish this by adding a link at the bottom of the screen to switch back to “classic” or “desktop” versions of the site. This small enhancement to your mobile site can mitigate user confusion. And of course, ultimately, we all just want happy users.
Conclusion

As developers and designers for the modern web, our main focus is the user. Our goal is a better experience through interface, performance, and personalization. We’re no longer asking the question “What do we think is best”; we’re asking the user “what do you want.” And this is creating a much better online experience.

Mobile detection is just one thing on the laundry list that is our quest for an improved user experience. Unfortunately, we probably won’t reach the bottom of that ever–changing list any time soon, but we can always tweak what we have, make enhancements and do our best to create a comfortable environment, while we constantly listen and adapt to the user’s wants and needs.

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