The insider’s guide to device detection: give your Website visitors the site they deserve.

With a vast array of screen sizes, operating systems and capabilities, it is essential for your Website to detect and react to the specific device each of your mobile visitors is using.

There are at least 6,500 different models of mobile device (feature phones, smartphones, tablets etc) that are capable of accessing your Website. If you identify the handset used by each mobile visitor to your Website, you can optimize their experience accordingly. This not only makes your customer’s visit as pleasant as possible, it also allows you to make assumptions about the visitor based on what handset they use and target services, promotions and advertising according to the handset type and its abilities.

Ronan Cremin, vice president of engineering at dotMobi, gives us the low-down on device detection.

Q1. Why should we care if a visitor to our Website is on a mobile device?

Website owners can no longer operate under the naive assumption that most traffic to their site comes from PCs. This was the case a few years ago, but the Web has moved on – these days more and more people use their mobile devices as their primary way to interact with the Web. Yes, site owners can opt to simply do nothing, and hope that their existing site works sufficiently well for this purpose, but this strategy has a number of shortcomings:
• Most mobile phones will struggle or fail to render (display) a desktop-oriented Website. The vast majority of people around the world today do not have a smartphone (only 1 in 5 mobile phones sold last year was a smartphone, according to IDC). If non-smartphone-owning customers are important to your business – as they should be – you also need a Website that works on these lower-end handsets.
• Even on smartphones, most sites will give a much better user experience if the content is adapted to the device. This doesn't just mean making things smaller, to fit the small screen or speed up the time it takes for the page to load, the content supplied should also be more relevant. While PC users are usually sitting in an office or at home, mobile users are often out-and-about – their context means they have different requirements.
• No matter how great a mobile device is, Web surfing can only ever be as good as the performance of the mobile network, right here, right now. The connection is rarely going to be as good as a PC on a fixed broadband connection. Reducing the page and picture sizes can really improve user experience even for smartphone users. And if the customer is has a limited or pay-as-you-go data package a streamlined site will save them money.
• Check out Alexa’s top 20 Websites on your mobile device – 18 out of 20 detect mobile devices and deliver a site that is appropriate. Why do they do this? It’s because they want to deliver a better experience for customers.

Q2. So how many mobile users access the Web compared to PC users? And how’s that changing?

In some countries mobile Web usage is outstripping desktop Web use – for example in Japan and South Africa this has been the case since 2005 and 2008 respectively; in some other countries we are near the tipping point. The International Telecommunication Union estimates in 2010 there were 940 million mobile broadband (3G) subscriptions worldwide and 555 million fixed broadband subscriptions. The overall trend is absolutely clear: mobile is displacing desktop as the primary means to access the Web, just as mobile phones displaced fixed line phones as the primary device to make a phone call.
In a presentation, in February 2011, Google announced that in most search categories – consumer electronics, beauty and personal, finance and insurance, automotive – over 15 percent of Google searches are via mobile devices (restaurant searches were 30 percent mobile). As Google’s Jason Spero pointed out, that’s one in seven searches, but how many companies put one seventh of their resources into mobile? Not engaging mobile customers is “like not doing business with your customers on Thursdays”.

Q3. What is device detection and how does it work?

Device detection is a technology that allows a Website to query the capabilities of each device accessing their Website. Device detection applications typically examine the identifying headers sent by all Web-enabled devices, then look up the device capabilities in a database. This all happens very quickly, your site should easily be able to identify 100,000 handsets per second, probably a lot more, and do it very accurately. This device information is provided by an API that allows the site to make decisions about how best to format the content before sending it to the user. How this happens exactly depends on the technology that is used to build the site and the rules set by the Web developer.

Q4. But smartphones are getting more common and they can access PC sites can’t they?

Yes, this is undeniably true, but even on a smartphone a well-designed mobile site is typically a better experience than a desktop site because:
• An appropriately-sized site avoids the need to pan and zoom.
• On mobile sites the pages load quicker.
• Many PC sites use Adobe Flash technology (typically used for video and animation) – this doesn’t work well on many Smartphones, including iPhones, Windows 7, Bada, RIM, Symbian and some Android devices. Even if Flash does run it can be a drain on battery life and is not designed for touch-screens – only the most recent dual-core Android devices really run it well.
• A well-designed mobile site should cater to the context of the mobile user. The same customer will often require different information when they’re out and about than when they are sitting at their desk. Take an airline, for example. The desktop site to prioritize lists of destinations, promotions, booking forms, frequent flyer information etc on the homepage, but imagine the mobile user, perhaps rushing to the airport in a back of a taxi, in a foreign city. This user wants to check the departure time, if there is a delay, the terminal and gate the plane flies from, a contact number, or if he can check in over Web. The mobile site should be sympathetic to this context and make such data easily accessible from the front page.
• Smartphones (some feature phones also) – arguably – are more capable than desktop PCs in many respects with GPS, cameras, accelerometers and gyroscopes all built-in. Mobile provides huge opportunities, e.g. knowing a visitor’s location, to Websites take advantage of these capabilities – all the more reason to have a site that adapts to mobile.
• If surfing a PC site was acceptable for smartphone users, then why do Facebook, Google, Yahoo, eBay etc. present a mobile site even to smartphone users? Indeed why do brands create apps (see Q14) for iPhone users, if the desktop site is good enough for smartphones?

Q5. We’ve got a mobile site – isn’t that good enough for all mobile devices?

It's a good start, but probably not sufficient for companies that really want to serve customers well. Mobile devices differ vastly in capabilities, far more so than desktops. It's not just screen dimensions that change either – some really fundamental differences separate modern devices: cameras, GPS, accelerometers, landscape/portrait orientation, and touch-screen – all of these capabilities may or may not be present. You can serve a one-size-fits-all site, or you can embrace the capabilities of the device in question to make the user experience better – it depends on how far you want to go to ensure a good customer experience.

Q6. What is mobile device fragmentation? How many different models of mobile device are there, and why should we care?

Most experts agree that there are about 6,500 distinct Web-capable mobile devices models out there – that’s ignoring devices that only vary in color or phones that have be renamed/relabeled by operators etc. The specifications/features of these devices vary massively, screen sizes particularly. Of all the devices in dotMobi’s DeviceAtlas, the largest screen is fully 100 times that of the smallest.
All indications suggest that this diversity will continue to increase. The world of Web devices has evolved: first there was just the one Web device (the desktop), then two (the desktop and laptop), then three (the desktop, laptop and WAP phone)…et cetera… until today’s post-Cambrian explosion with different devices filling every available ecological niche: feature phone, smartphone, small tablet, big tablet, netbook, laptop and desktop. See mobiForge for more on the explosion in Web devices.

Q7. So does that mean that we have to have lots of mobile sites? If so, how many?

There are multiple approaches to handling this diversity. A common approach is to take a small number of basic templates grouping phones according to their specifications/capabilities, for example touch-screen phones, smartphones, feature phones and low-end phones and then further finesse the experience by resizing images to fit exactly into the resolution in question. Other sites use a more fine-grained approach that alters every element on the page dynamically according to the access device.

Q8. How can device detection be used to enhance or minimize a poor user experience?

Device detection allows the Web developer to ensure that the site works well and delivers a much richer experience on different devices. This typically takes three forms:
• Fine tuning the content i.e. resizing Web pages and images so they fit exactly within the screen of the device in question, and ensuring that page length is optimal.
• Removing page elements that don't work on this handset. As mentioned earlier, most handsets don’t like Flash video or animation. Low-end phones usually can’t fully display pages that use Javascript or AJAX (which are both used to provide interactivity on Websites).
• Adding elements to pages to take advantage of device capabilities e.g. sending a more touch-friendly CSS (this determines the look and feel of Websites) for touch-screen devices.

Q9. What does knowing a user’s handset tell us about them?

Knowledge of the user's handset can also be used to infer other information – device detection databases typically provide vendor and model name information also, which allows the site owner to make assumptions about the visitor, based on what the handset tells us about their demographic.

Q10. What can we do when we know the functions and characteristics of a handset?

The most important thing to do with knowledge of the functions of a handset is to use this knowledge to improve the user experience. Some specific examples:
• If the device supports tel: or wtai: hyperlinks, you should ensure that all phone numbers are hyperlinked so that the user can click-to-call phone numbers on a page.
• If the device has GPS, you should ensure that the user's location is picked up from GPS rather than forcing them to enter location data in a form.
• If the device has a touch-screen, you should adapt your CSS to ensure that items are big enough to be easily tapped with a finger tip.

Q11. How can we use device detection to target services, marketing or third-party advertising?

Device detection is very often used for this purpose. Once you know the vendor and model of a phone you can make smarter choices about what to offer to the user. For example, if the visitor is using an Android handset don’t waste your time and their’s advertising iPhone apps, only offer Android apps with a link to the Android Market; similarly if the handset doesn't support MP3 ringtones you shouldn't offer them. Each of these decisions made on behalf of the user helps to ensure a seamless experience with fewer disappointments.

Q12. What are the benefits of collecting data about the types of devices that access my site?

Device data can also be used for site analytics. This data can then be used to make more informed decisions about how best to target a site to the needs of the user. As an example, if more than 15 percent of site traffic comes from mobile devices, start thinking about how you optimize the site to support mobile users e.g. by making it more relevant to the mobile context – as in the airline example. As Google prescribes, not taking advantage of mobile traffic is like having a store that's closed for one day each week. Analysis of the mobile traffic can also be revealing – for example, if 50 percent of the mobile traffic to your site is coming from low-end phones, then start thinking about a leaner version of the site that supports these handsets.

Q13. What sites use device detection and how do they use it?

Almost every major Internet brand uses at least one level of device detection to fine-tune the user experience. In some cases the difference can be hard to detect at first – the Google home page looks very similar whether you view it on a PC, a tablet, a smart- or feature phone, but in fact multiple aspects have changed depending on the access device. At Facebook, devices are categorized into touch and non-touch handset and the experience is optimized around the capabilities of these classes of devices.
On some sites such as Tripadvisor and Booking.com the PC and mobile experience is radically different – they have made it a competitive advantage to gear their mobile sites to better serve customers on the move.

Q14. Should we just concentrate on an iPhone or Android app and forget about everyone else?

No. A mobile app is not a mobile strategy, regardless of how many different types of handset you target. Sure, if you know for certain that all your customers use either Android or iPhones, fine – go ahead and make an app for them and they'll be happy. But bear in mind that the vast majority of phones are not iPhones or Android phones (of 1,596 million mobile devices sold in 2010 only 114 million (7 percent) were iOS or Android, according to Gartner… and the installed base will be less).
A true mobile strategy embraces all of the mobile devices out there, not just the ones of the well-heeled audiences. Remember too, that each mobile ecosystem has its own submission procedures, rules and idiosyncrasies. Each time you update your app, you will run up against these issues. Right now the mobile Web is the only way to reach the whole audience in one fell swoop. The customer benefits, too: no need to repeat the download each time the app is updated, lower bandwidth requirements and transparent updates.

Q15. What difference does HTML5 make?

HTML5 is the new version of the Website programming language HTML. It allows the mobile Web to come much closer to native apps in their functionality. HTML5 allows Web pages to store data, work offline, look fantastic and use rich interactions. A well-written HTML5 mobile Web app is almost indistinguishable from a native app and almost every smartphone platform already supports it.

Q16. In the future, will device fragmentation and device detection become more or less important?

All indicators suggest that fragmentation is on the rise. Ten years ago there was mobile or desktop – now there are countless devices bridging the gap, each with its own features and limitations. It's a very complex landscape for Web developers to navigate, which suggests that device detection is going to become ever more important, regardless of how sophisticated browsers become.