

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...](http://www.benbeckford.com/wordpress/2009/11/29/chrome-extension-
resolution-test/)

------
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...](https://addons.mozilla.org/en-US/firefox/addon/web-
developer/?src=search)

------
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
Happy Cog for me is nonfunctional -- it seems that the site has some code to
break out of iframes, or some such.

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

~~~
drostie
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
Try adding void(0) to the end of the bookmarklet.

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

------
justindocanto
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/>

