Categorizr.js. Device-detection for Your Responsive Websites

Dustan Kasten

  • Reading Time  Min Read
  • Publish Date June 6, 2012

The responsive web is here to stay, yet there are still other multi-device implementation solutions, to mention a few:

  • Head-in-the-sand. Just build your standard, locked website and let your users and their devices do the best they can with it.

  • Responsive design. One code base intelligent enough to bend and change within the device and screen constraints available.

  • Adaptive design.

  • RESSResponsive web design with server-side components.

  • Device-specific web-powered apps. Creating html-based apps specific to the user’s device. Full web-stack (, or hybrid apps (linkedin).

  • Native apps. Website. iOS app. Android app. WinMo app. Blackberry app. Windows app. OSX App. Linux app.

What is categorizr.js?

Categorizr.js is a tiny (1.9 kB gzipped) javascript library for progressively enhancing your responsive projects with a more targeted experience (without forking the user off to a separate sub-domain).

I will admit that this began as an experiment for me to write tablet-specific UIs in my responsive workflow. After doing numerous responsive web sites and web apps, targeting desktop vs mobile is a pretty drastic and easy to do thing with media queries and feature detection. Targeting tablets for additional progressive enhancement was a much larger gray area. Brett Jankord had already done the hard work of creating the original categorizr as a php script. I simply ported it and began building on the foundation he laid.

We’ve all used our phones and clicked on an article link from a tweet or search result only to get abducted by the server and dropped at the homepage of said website, completely disconnected from the content we wanted to read (and with no clear path to get back to it).

Categorizr.js hopes to limit this and improve the user experience by making it easy to enhance the core experience of our websites with device-specific styles and behavior. It does this by adding a CSS class of ‘tablet, tv, desktop, or mobile’ to the HTML element for styling hooks, and it gives you javascript access to properties such as ‘categorizr.isTablet’. Usage with a library like yepnope and you could bootstrap your code to load in additional JavaScript or trigger other behaviors.


How does it work?

Categorizr.js enters the black magic community of web development: User-agent sniffing. Yet, before you scream blasphemy, call me a heretic, and burn me at the stake, let’s look a little deeper.

The first thing we need to be mindful of is mitigating the risk of being wrong. With a simple client-side solution, we make it easy to give the user a toggle to quickly switch between views. Furthermore, there is a relatively low and known quantity of desktop-based browsers. This number doesn’t change frantically and is relatively safe to detect. Meanwhile, mobile is blowing up like nobody’s business, so we follow Luke Wroblewski’s advice and go mobile first. If we’re not sure what browser we’re dealing with, we will assume it’s one of the billion mobile phones sprouting up on this planet.

Now the odd-man out is the tablet. The tablet is similar to a desktop in screen real-estate, but much more in line with a smartphone by usage. The haptic interface brings a whole new set of user expectations and possibilities. Herein lies most of the work to be done to keep categorizr.js on the right track. So many web properties already do this, and giving a tablet user a mobile-optimized site doesn’t qualify as one of the seven deadly sins.

Luckily, there are products like WURFL to guide us along the way.

Getting started

Right now the code is ready to go in your front-end stack. If you are using modernizr, I would recommend concatenating categorizr.js with it (if else, putting it in with the rest of your code would not be a bad idea either).

To see all of this in action, follow the repository

The future

The upcoming work involves:

  • Fleshing out the UA tests on github and ensuring that categorizr.js passes with flying colors

  • Support for node.js as an express or connect plugin

  • A test-extension API (to add your own UA detection points. This would facilitate things such as specific Microsoft-Metro style UI’s and WAP phones).

  • Emit events when a user requests to change deviceType

Let us know how you think you could use categorizr.js in the comments. Follow along on github. Let’s make a better web.

Send Us a Message

Let's Work Together

By filling in the form, you agree to our Privacy Policy, including our cookie use.