Optimal user experiences on multiple devices are becoming increasingly important to ensure brand integrity. Creating mobile websites with a solely client-side approach, using techniques such as responsive web design, do not provide companies with full control over the user experience. Using a combined approach that incorporates server-side device identification, means the brand experience can exactly match the requirements of the user and the device they are using. Device identification enables companies to deliver a small, contained experience to feature phones, a rich JavaScript-enhanced solution to smartphones and a lean-back experience to TVs, from the same URL.
About 88% of the Alexa 100 top sites use some form of server-side device detection to serve content on their main website entry point. As you descend from the top 10 to the top 25 and top 100 sites the percentage of sites using server-side detection falls from 100% to 96% to 82%. This is an interesting fact given all of the recent discussion in the blogosphere of responsive design using client-side techniques such as media queries. You can read more about these techniques in our article describing current mobile adaptation techniques.
Server-Side Mobile Web Adaptation
| Top 10 Sites | Top 25 Sites | Top 100 Sites | |
|---|---|---|---|
| No server-side adaptation | 0% | 4% | 18% |
| Some server-side adaptation | 20% | 8% | 8% |
| Extensive (greater than 3 versions) | 80% | 88% | 74% |
| Any adaptation at all | 100% | 96% | 82% |
How exactly did I measure this? I took five devices and visited the main entry points for the latest Alexa Top Global Sites list. I compared the size of the returned HTML document for each of the devices in question to see if server-side redirection and/or adaptation was being used. To avoid having to actually view the resulting page from each device I used the page byte size as a proxy measurement: if different user-agent strings resulted in significantly different returned HTML byte size for the same URL, I count this as server-side device detection at work. Where known, I used the full set of HTTP headers for each device in addition to the correct user-agent string. Google is the star performer, fine-tuning all of its properties in all territories. The most notable non-adapting sites in the top 25 are Apple and Craigslist (to be fair to Craigslist their site is quite efficient thanks to its spare use of images).
In conclusion, while the blogosphere is full of lively debate about new methods of achieving mobile adaptation using JavaScript, progressive enhancement and media queries, the data show that the giants in the web arena are using server-side device detection techniques to achieve this goal. The techniques are not mutually exclusive of course, but pragmatism suggests that the method used by the big brands is at least worth a look. I compared the size of the returned HTML document for each of the devices in question to see if server-side redirection and/or adaptation was being used. To avoid having to actually view the resulting page from each device I used the page byte size as a proxy measurement: if different user-agent strings resulted in significantly different returned HTML byte size for the same URL, I count this as server-side device detection at work. Where known, I used the full set of HTTP headers for each device in addition to the correct user-agent string.
Google is the star performer, fine-tuning all of its properties in all territories. The most notable non-adapting sites in the top 25 are Apple and Craigslist (to be fair to Craigslist their site is quite efficient thanks to its spare use of images).
In conclusion, while the blogosphere is full of lively debate about new methods of achieving mobile adaptation using JavaScript, progressive enhancement and media queries, the data show that the giants in the web arena are using server-side device detection techniques to achieve this goal. The techniques are not mutually exclusive of course, but pragmatism suggests that the method used by the big brands is at least worth a look.
Testing Notes
- A few of the Alexa top 100 sites are not sites designed to be browsed as such e.g. googleusercontent.com and t.co (Twitter’s URL shortener).
- The main entry point for the Wikipedia does not use device detection but all of the language-specific entry points do e.g en.wikipedia.org and es.wikipedia.org etc. For this reason I counted this as a site that uses adaptation since search results usually send you to the language-specific entry point.
- A bug in the library that I was using to crawl the sites caused failures for a handful of them so I checked these by hand.
- This method of counting server-side device detection probably under-counts if anything since some sites may use server-side image resizing as a means of adaptation without changing the containing HTML document.
- Sites can use device detection simply to redirect browsers to a more mobile-friendly site and/or adapt the HTML to the particular device in question.
Mobile Devices Used
- Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:8.0.1) Gecko/20100101 Firefox/8.0.1
- Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3
- Nokia6300/2.0 (05.00) Profile/MIDP-2.0 Configuration/CLDC-1.1
- SAMSUNG-SGH-E250/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 UP.Browser/6.2.3.3.c.1.101 (GUI) MMP/2.0
- DoCoMo/2.0 N905i(c100;TB;W24H16)
Sign up for a free trial now to learn more about the DeviceAtlas solution and find out how we can help your organization achieve your goals.
By Ronan Cremin, CTO, DeviceAtlas