When I wrote about responsible responsive images a few months back, I outlined my two golden rules when evaluating the various techniques out there:
- The small image should be default.
- Don’t load images twice (in other words, don’t load the small images and the larger images).
I also described why that led to my dissatisfaction with most server-side device libraries for user-agent sniffing:
When you consider the way that I’m approaching responsive images, those libraries are over-engineered. They contain a massive list of mobile user-agent strings that I’ll never need. Remember, I’m taking a mobile-first approach and assuming a mobile browser by default. So if I’m going to overturn that assumption, all I need is a list of desktop user-agent strings.
I finished by asking:
Anybody fancy putting it together?
Well, it turns out that Brett Jankord is doing just that with a device-detection script called Categorizr:
Instead of assuming the device is a desktop, and detecting mobile and tablet device user agents, Categorizr is a mobile first based device detection. It assumes the device is mobile and sets up checks to see if it’s a desktop or tablet. Desktops are fairly easy to detect, the user agents are known, and are not changing anytime soon.
It isn’t ready for public consumption yet and there are plenty of known issues to iron out first, but I think the fundamental approach is spot-on:
By assuming devices are mobile from the beginning, Categorizr aims to be more future friendly. When new phones come out, you don’t need to worry if their new user agent is in your device detection script since devices are assumed mobile from the start.