responsive-web-design

Responsive Website Testing Bookmarklet

After a bit of playing and trying to find a reliable chrome extension for testing my responsive websites in my desktop browser. I found a website app called Screenfly. Although this couldn’t be used as an extention I then made up a little ‘bookmarklet’ to add my current url to the Screenfly query string, thus taking my currently viewed website, and popping it into Screenfly.

To use, simply drag the following link below into your bookmarks tab.

Responsive Tester

Alternatively. Create a new bookmark.
Name: Responsive Tester
URL: javascript: (function () {var url = window.location + ”;url=url.replace(‘:’, ‘%3a’).replace(‘/’, ‘%2f’);window.location = ‘http://quirktools.com/screenfly/#u=’ + url + ‘&w=1440&h=900&a=1&s=1′;}());

Then simply browse to the url you want to test in your browser & click the bookmark to get testing. Which will have the following effect.

View Demo