Join us with Tiziano Palozza, Neomobile’s Quality & Innovation Manager on the Corporate Application Development (CAD) Team as he tells us about the importance of device detection in a two part series. In this article you will discover more on the importance of device detection in the tech world, a historical overview and how it works.

The Importance of device detection

Working in the mobile industry for more than 10 years, I have learned that displaying the right content to a user’s device has always been a critical point. As browsers have evolved over time, so have the obstacles that come with it.

Being able to display the correct content to the correct mobile browser is just a part of a more generic topic:

 The technology behind displaying the correct content to browsers, while recognizing if users come from mobile or desktop devices.

Today, this task is even more complicated with the recent evolution of tablets, smartphones, smart TVs and game consoles.

Quick Historical Review of Device Detection

There was a time when it seemed easier to work on mobile sites because of the simple black and green screens and the WML standard of the so-called WAP scenario. Meanwhile, web developers had to face more challenging layout issues because of the several desktop browsers which were evolving with their multitude of proprietary features.

Of course it wasn’t long before mobile browser standards also started to change with the introduction of devices using colored screens (from WML to XHTML with WAP 2.0, passing through i-mode and c-html arriving to a newer browser fully supporting html).

The advent of smartphones revolutionized everything by introducing JavaScript, but this quick historical recap gives us an idea of what we deal with when we need to provide sites, while taking into account not only the most recent device features, but also legacy ones.

Last but not least, let’s consider what has probably been the landmark in the “device detection” history: the User-Agent.

To put it simply, when you visit a web page, your browser sends some text to the web server in order to introduce itself by indicating which browser it is; such text is usually called “user-agent string” and it’s one of the many HTTP headers (the User-Agent was not included in the very first HTTP Protocol specification in 1991, but about a year later).

Unfortunately, during the years the User-Agent has always been the battlefield between website owners who wanted to deny the access to some browsers, and browser vendors who wanted their users to get the best experience. Some browsers even started to add info to the User-Agent string pretending to be one another, generating chaos and a complete lack of standard [webaim.org].

 

Device Detection 101

The expansion of the Web from desktop computers to other devices such as mobile phones, tablets or TVs requires particular attention to the user experience and a new approach in the way website content is provided.

First generation mobile devices had several limitations, from their lack of compatibility with JavaScript to the page size (in terms of kilobytes) or the impossibility to adapt the content to the screen size.

Server-side device detection was the only way to serve the proper content to mobile devices, or to correctly address mobile or desktop traffic; this could be managed with two basic approaches:

  • user-agent sniffing (the user agent is a header coming with a browser request, indicating basic info regarding the browser itself)
  • user agent profile URL parsing (the UA profile URL is a header coming with the mobile device request, indicating every detail regarding the device features and capabilities, in addition to the user agent header. This was provided by mobile vendors to network operators.

With smartphones breaking through the market, things changed radically and vendors didn’t provide user agent profile URLs anymore. In fact, such devices started to support features which let developers use techniques for client-side content adaptation (such as Responsive Web Design), solving most of the problems with first generation devices.

In this scenario, device detection could seem useless because a web/mobile site could be a one-size-fits-all, by having the same content dynamically adapted by the client. By the way, some key aspects need special consideration if the approach is purely client-side:

  • In a mobile oriented business, where acquisition potentially comes from any device, you need control over the user experience and be able to portray the best of it on any device, even the obsolete ones.
  • If you want to reach the most devices you can, you need to consider the type of connection the user has. Don’t forget to offer a good user experience regardless of whether the user has a 3g or Wi-Fi network. The compatibility with certain markup/scripting languages, or at least the screen size, in order to provide content in the most efficient way; one-size-fits-all approach means that you provide an intermediate user experience for all. Otherwise you can just give the best to a portion and lose the other.

Stay tuned for the second part of the article that will give an insight on another aspect of Device Detection Technology: Client-Side vs Server-Side

 

author-post-tiziano-palozza