AWD Using Device Detection

Searching for ‘Adaptive Web Design’ (AWD) on google.com yields a variety of results, not all of which imply the use of device detection. At the time of this writing, wikipedia’s page on the topic is a mere stub.

AWD Without Device Detection

In his book Adaptive Web Design, Aaron Gustafson discusses general principles of web design, but does not mention device detection — at least not in the first edition. (I have not yet read the second edition.)

Articles describing the difference between AWD and Responsive Web Design (RWD) at techrepublic.com and css-tricks.com assert that the difference relies on breakpoints, stating that AWD uses them but RWD does not. However the responsive themes I have seen rely on breakpoints in media queries to determine which CSS rules to use to layout the markup served to the browser.

These articles all imply that all web servers deliver the same content to all browsers, regardless of the device type.

AWD With Device Detection

My understanding and use of the term coincides with this sitepoint.com article, which answers the question, “What is Adaptive Web Design.” Their answer maintains that it involves serving content selectively, depending on the device.

In my mind, with AWD it is the server rather than the browser that adapts to the device.

This technique implies some sort of device detection. Software does this by processing the
user agent
(UA) string that your browser sends to the server in the request.

Your User Agent String

You can see the UA string that your browser sends to servers at useragentstring.com. The page includes a table that breaks it down and describes the information it contains.

Chrome.Com has a page written for developers describing the UA strings it sends to servers, based on the device being used (Android or Apple).

Note that the server has access to this information even when you are in a private or incognito window.

RESS and “Dynamic Serving”

Another term for this sort of technique is REsponsive Web Design with Server Side Components (RESS). (I am sorry, but this acronym does not appeal to me, for a number of reasons, so I prefer not to use it.)

Given the name, this of course implies some sort of responsive design. My three sites fall into this category, but my online interactive resume, which uses device detection but no media queries, does not.

Google calls this technique “Dynamic Serving,” and offers a page offering tips for doing it properly.

Media Queries

Interestingly, it is possible to use media queries to serve different css files to devices, based on their characteristics, for example, the screen width. I for one would prefer (but have not used) this technique to responsive techniques that send the same content to all devices and rely on the browser to decide how present this content.

Mobile users may be surprised to learn that sites using RWD actually send content, then use media queries to hide it.

Saving Bandwidth

For me, the bottom line is we should not be sending content to someone — especially if they are on a mobile device — only to hide it. If your phone has a tight data plan, or you live in an area where that sort of thing is expensive, then I am sure you will agree that doing so is downright irresponsible.

But based on the apparent popularity of RWD techniques, apparently that’s just me.