Dimensions is a Google Chrome Extension for web designers to use to aid in debugging media queries and capturing responsive screenshots.
In my time creating responsive websites I found that there were many responsive testing tools available but none I was truly happy with. Most notably, none of the existing tools at the time remembered their states when refreshing the page, making you input all your parameters again. I found this totally impractical so started work on my own tool.
I started by building a basic prototype as a single HTML webpage. It consisted of a text field to input the URL you wanted to test, a frame to display the URL and a couple of buttons that once clicked, would change the size of the frame. The button you had clicked and the URL you had entered would be saved and applied if the browser was refreshed.
Once I had everything working, I started to craft a User Interface, keeping it as simple and user-friendly as possible. During this time was when I added the ability to drag the frame to any width they wanted. This was followed by a ruler that included common media queries (breakpoints) for aid when dragging.
Next I started to integrate what I had with Google Chrome’s App API. It was a very interesting learning experience, one in which I am glad to have tackled. As the prototype was being converted, more and more features were added to the tool. One of which was the ability to change the common breakpoints to fit the site you were currently working on.
After I was happy, I published Dimensions in the Chrome Web Store. It was live for several months without change and at it’s peak managed to have 40,000+ Chrome users. I was shocked!
I gained valuable feedback from the user-base that I used to start developing a new version with some requested features. This was when I hit a roadblock. It came to my attention that a couple of the main additions I wanted to include would not be possible as a Chrome App. Dimensions would need to be a Chrome Extension in order to achieve the functionally. Unfortunately, I couldn’t convert the existing App and instead had to publish a separate item in the Web Store. It was a mistake that I learned from.
I decided to rebuild the app from the ground up including a new optimised User Interface. I also wanted to experiment with paid Chrome Extensions. The rebuild included features such as opening the current tab in Dimensions, PNG screen capture, User-agent changer and more.
Although the extension didn’t achieve the same success that the original app did (mainly due to my decision to make it paid) it was an interesting experience.
Dimensions was however picked up by some big-names in the industry and currently has 2000 paid customers.