Setting up your browser for responsive development.

While working on a responsive design today, it bugged me again that you can’t resize a chrome window under 400 pixels wide. Up until now, I just fired up Safari since it has OK developer tools and also gets live-reloaded by CodeKit. But today, I didn’t feel like using Safari. There’s always something bugging me about it and I don’t have my bookmarks and extensions.

The solution

After some research I discovered that there were people whose Chrome didn’t let them go smaller than 520 pixels because of the number of extensions they had installed. That’s what gave me the idea of removing everything. And what has fewer controls on it than a good old fashioned pop-up window? I never thought I would ever use the dreaded things to my advantage.


javascript:window.open('http://localhostwebsite.dev/', '','width=320,height=480');

You can just paste this handy snippet in the Chrome address bar. You will, however, have to retype the ‘javascript:’ part as Chrome will delete it upon pasting.

Taking it further

By turning this snippet into a bookmarklets and setting the position of the popup on the screen, we can set up a responsive workspace with just 2 clicks.

Screenshot of my browser

I have the following snippets set up as their own bookmarklets in my browser to quickly get a mobile phone and a tablet view of the project I’m working on.

The bookmarklets

320


javascript:window.open(document.URL,'','width=320,height=480');

640


javascript:window.open(document.URL,'','left=321,width=640,height=800');