Simple Responsive Design Test Page - bookmarklet | Hacker News Reader

Simple Responsive Design Test Page - bookmarklet

benjaminkeen.com

92 pointscleverjake20 comments

Open articleView on HN

There's a good chrome extension I use called "Resolution Test" that does something similar:

http://www.benbeckford.com/wordpress/2009/11/29/chrome-exten...

It seems the website is having trouble loading, so here's the bookmarklet for those who can't load the page:

https://gist.github.com/1701741

Seems like a useful tool, but it looks like JavaScript on the site being tested is disabled?

Means it's not useful for testing sites that depend on mobile js frameworks such as jquerymobile

Apart from tons of other features, Web developer toolbar[1] has this functionality built-in. It allows us to save our own dimensions too.

Of course, if one wants just the 're-sizing' capability, then this bookmarklet will sure help.

[1] - https://addons.mozilla.org/en-US/firefox/addon/web-developer...

What a coincidence, just drafting my first design with Skeleton. Definitely saves a lot of hassle.

It's a pity that currently most broken thing on mobile browsers are touch-based frameworks and custom font rendering.

Some responsive sites to test it with: http://hicksdesign.co.uk, http://happycog.com

Happy Cog for me is nonfunctional -- it seems that the site has some code to break out of iframes, or some such.

both work fine for me. what browser are you using?

Firefox 9.0.1.

(Just to clarify, the site works perfectly fine for me; and the bookmarklet does appear on upon the site; but when the iframes start loading HappyCog, they refresh the page, which sends it back to its original state.)

Try adding void(0) to the end of the bookmarklet.

Doesn't help.

I'm surprised that I'm the only one who seems to have this problem, but I have found at least one possible cause: there is a linked script file /j/functions.js?2011030 which contains, among other things:

    if (top != self) {
        top.location.replace(self.location.href);
    }

So it really does seem to have a break-out-of-iframes script, unless I am misreading what this code is meant to do.

I made the script open new windows

https://github.com/emehrkay/Responsamania

How accurate is it though? I ask because it shows HN on iPhone render differently than how it actually renders.

this isn't a way to render sites on various platforms, its a way to quickly test media queries based on device width, ala http://mediaqueri.es/

Very cool, we'll definitely be using this when we work on making our site responsive.

My god this is amazing. I try to make all my sites responsive so this is fantastic.

Amazing. Plan on using this often. Thank you

Wow. Perfect.

Very pretty.

Our new website hasn't launched yet but you can check the responsiveness out using the bookmarklet: http://bigbangtechnology.herokuapp.com/

Reply on news.ycombinator.com