Simple Responsive Design Test Page - bookmarklet

[cleverjake]

http://www.benjaminkeen.com/misc/bricss/

[ajhit406]

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...

[seancron]

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

[omgmog]

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

[v33ra]

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...

[ramdaffe]

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.

[trhaynes]

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

[drostie → trhaynes]

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

[cleverjake → drostie]

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

[drostie → cleverjake]

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.)

[sirclueless → drostie]

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

[drostie → sirclueless]

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.

[emehrkay]

I made the script open new windows

https://github.com/emehrkay/Responsamania

[badclient]

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

[cleverjake → badclient]

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/

[spung]

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

[ntkachov]

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

[_sfvd]

Amazing. Plan on using this often. Thank you

[loceng]

Wow. Perfect.

[drostie]

Very pretty.

[camwest]

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