Demonstrating responsive design to clients.

Does not really work. Because it just renders stuff in an iframe. But actual devices behave quite differently. For example an ipad fools the website about its pixel size. So it renders very different from how its displayed here.<p>For example meteor.com fits nicely into my ipad and even into my android phone. But this page makes it look like it does not fit at all.<p>Also tried other sites and had the same effect. Sites that have no magic css/js to cope with different screen sizes or devices. They work on the devices and not on this website.

Just couldn't help myself.<p><a href="http://dl.dropbox.com/u/216352/drdception.png" rel="nofollow">http://dl.dropbox.com/u/216352/drdception.png</a>

Nice.<p>I also like <a href="http://mattkersley.com/responsive/" rel="nofollow">http://mattkersley.com/responsive/</a> which shows different resolutions side by side, I find it easier to compare.

Some time ago there was <a href="http://responsive.is/" rel="nofollow">http://responsive.is/</a> posted on hn, which is awesome!<p>this looks quite cool too, but changing between "devices" makes the iframe jump. anyway, cool stuff! martin

Scroll bars are frustrating given the amount of effort put into this, plus the sites I tested aren't rendered the way they actually appear on an iPhone meaning I wouldn't be confident showing this to clients.

Similar: <a href="http://www.responsinator.com/" rel="nofollow">http://www.responsinator.com/</a>

This doesn't work with sites that return 'X-Frame-Options: SAMEORIGIN' or 'DENY', which is probably the simplest and best click-jacking countermeasure. It's used by some big sites (e.g. Google), and increasingly used by modern frameworks (e.g. in Django 1.4 it is not yet on by default, but extremely easy to enable - just uncomment one line in the default settings file).<p>Something to be aware of!

Nice idea, would be even better executed if the "embedded webpage" would be clipped to the device frames during resize.<p>Clicking on the landscape iphone while in portrait iphone mode shows the full landscape embedded webpage on top of the frame while the frame resizes, which is kinda jarring.

Nice idea, well executed. Would be nice if the URL can be exposed as a GET parameter so it can be linked to.

As has already been noted, this doesn't take into account media queries and viewport scaling.<p>But i tell you what does? Testing on actual devices with an amazing tool called adobe shadow.<p>VIDEO: <a href="http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow" rel="nofollow">http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe...</a><p>download: <a href="http://labs.adobe.com/technologies/shadow/" rel="nofollow">http://labs.adobe.com/technologies/shadow/</a>

Wow. Thanks for the all responses people. There are some really good suggestions here. I have added the project to GitHub for anyone interested in improving the tool.<p><a href="https://github.com/jamus/rwd-demonstration" rel="nofollow">https://github.com/jamus/rwd-demonstration</a>

Great idea. One improvement might be to make the mobile view look more like a mobile device; now it looks very much like the tablet. Perhaps the borders (sides in portrait, top and bottom in landscape) could be thinner.

If they don't like it when you're at this stage, you're in trouble! How are people presenting/explaining responsive designs at the concept stage? Designing in browser? Multiple mockups? Mood boards and style guides?

One of the common "mistakes" I see with these tools is to base the iframe size on exactly 320 or 480, etc. The scroll bar should be outside of the width of the "device".

It assumes I keep my browser window maximised. Bad assumption.

It shows 4 layouts for <a href="https://trello.com" rel="nofollow">https://trello.com</a> Nothing you couldn't get by resizing your browser though.

Already been done a few times...<p><a href="http://responsive.is/" rel="nofollow">http://responsive.is/</a> for example.

i like it, great idea. I almost missed the fact that you can check out any website - maybe emphasize the input box for the url more?