Over the course of the past few months, I’ve been working on a redesign of caniuse.com together with Alexis Deveria aka @Fyrd, author of the site. If you don’t know caniuse.com yet, it’s an essential resource with compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers. Its current design is in need of a refresh, and while we’re at it we’re improving the usability, clearing up some clutter and making it responsive. The goal was to make a really clear and simple design so you can get to the information you’re after as easy and fast as possible.

This is just a screenshot of a work-in-progress prototype I’ve built, you can see it in action at http://caniuse.lensco.be. Some notes:

- A lot of things don’t work yet – it is just a static prototype. You can already click the ‘settings’ and ‘index’ links however to get a feel how those will look like.
- I originally made the light theme first, but Alexis suggested a dark theme close to the colors of the current design, as to not alienate regular visitors too much. We’re thinking of keeping the light theme as a user preference, accessible from the footer.
- Most of it is already responsive, except the table itself and the tabs on the bottom. I’m not sure however if we really need to come up with a complex responsive table – I guess it works ok with a bit of horizontal scrolling?

It is our intention to gather feedback from this prototype and continue improving the design, out in the open, here on Dribbble. So, do you see something that needs improvement? Is the responsive design not working on your device? Does this design make sense for color-blind people? Let us know!

Posted on Jan 21, 2013

More by Lennart Schoors

View profile