As we work on more and more projects we tend to notice that there are many challenges that we repeatedly have to face, day after day. Because of this we have developed some handy little tools and time savers to help us to be as productive as possible. It occurred to us that many other designers & developers may be facing similar difficulties and may benefit from our solutions as well.
That is why we have decided to give something back to the community and release some of these tools to the public. Think of it as a late (or extremely early) Christmas/New Year present from us!
We are going to label them as ‘Experiments’ and create a showcase on our brand spanking new page called ‘Surge Laboratory’.
The first of these tools is called Dimensions. It is a small web app that allows designers & developers to test their responsive websites at different breakpoints. It includes breakpoints for mobile & tablet both portrait & landscape.
The other function we have found to be helpful, is using it as a presentation app. Dimensions can be used to present your responsive website to clients, providing them with the ability to change the size of the device they will be viewing the site on.
To use the app all you have to do is enter the url of your site (development or production) and press “Test”. From here you can start testing your site at mobile or tablet sizes.
The tool also works with CodeKit, a Mac app that among many other things, can enable auto-refresh. Bear in mind that in order for it to work you must untick “inject CSS changes without a full page reload” in CodeKit preferences.
If you are presenting a site you get an extra field to input the title of the project or client name. This is displayed to the client when you send them the link.
We hope you find this tool as useful as we do, be sure to share the link to it!
Dimensions App Link: http://www.dimensionsapp.com/