Skip to content

WordPress Plugin: Detector

Building a web site that works across a wide range of web-enabled devices is no easy task. Responsive web design is a great solution from a design perspective and building a site up, using Progressive Enhancement, from a Mobile First approach lets you layer on features that match the device browsing the site.

Working on the client-side (on the user's browser) will let us do great feature-detection, but doesn't necessarily let us optimise the site as much as we could: extra data in the form of unneeded style sheets, javascript, or overly large images might be downloaded. Working on the server-side (on the web server) isn't ideal either: we'll mostly be using the User Agent string to make a "best guess" about the users' browser and its features.

Enter Luke W's RESS: Responsive Design + Server Side Components, in which he cannily suggests the pragmatic approach of taking the best of both worlds.

In a nutshell, RESS combines adaptive layouts with server side component (not full page) optimization. So a single set of page templates define an entire Web site for all devices but key components within that site have device-class specific implementations that are rendered server side.

Then Dave Olsen's Detector came on to the scene as a smooth and easy way to start using these ideas: drop the Detector Library into your project and take advantage of its powerful feature-detection. Since I use WordPress for most of my work, I wanted a way to easily add Detector to my projects. I've taken the latest version of Detector and wrapped it up as a WordPress Plugin. Like Detector itself, the Plugin is in beta, so should be used with caution.

The Detector plugin can be downloaded via the Plugins menu of the WordPress dashboard, or from either of the links below.
Download Detector from WordPress.org.
Download or Fork Detector WordPress Plugin on GitHub.