

Demonstrating responsive design to clients.   - jnye131
http://jamus.co.uk/demos/rwd-demonstrations/

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

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.

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.

~~~
Trufa
Maybe I understood it wrong, but, wasn't the point of this showcase to show
how it should look rather than how to make it look like that in all of the
devices?

I think it wasn't meant to be the kind of thing you open in your different
devices and look how it looks rather, this is how content should adapt, does
it make any sense?

~~~
sophiedennis
exactly :)

------
TeMPOraL
Just couldn't help myself.

<http://dl.dropbox.com/u/216352/drdception.png>

------
aqrashik
Nice.

I also like <http://mattkersley.com/responsive/> which shows different
resolutions side by side, I find it easier to compare.

------
sirwitti
Some time ago there was <http://responsive.is/> posted on hn, which is
awesome!

this looks quite cool too, but changing between "devices" makes the iframe
jump. anyway, cool stuff! martin

~~~
projectedoptics
I think the jump is more realistic, it means the resize event will only be
fired once. Which is what the orientation change on a mobile device would do.

<http://responsive.is/> animates the iframe resize meaning the event will be
repeatedly fired.

~~~
sxtxixtxcxh
yeah, but resizing a browser window fires the resize event multiple times.
responsive design isn't mobile specific, practically by definition.

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

------
ceejayoz
Similar: <http://www.responsinator.com/>

~~~
darien
I think this is the best one I've seen so far.

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

Something to be aware of!

------
0x0
Nice idea, would be even better executed if the "embedded webpage" would be
clipped to the device frames during resize.

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.

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

~~~
kristianc
Yeah - that was exactly what I was hoping for.

I'd love to be able to send an email to some potential clients along the lines
of 'Have you thought about responsive design? Here's why it matters in the
context of your current site.'

------
lukeholder
As has already been noted, this doesn't take into account media queries and
viewport scaling.

But i tell you what does? Testing on actual devices with an amazing tool
called adobe shadow.

VIDEO: [http://tv.adobe.com/watch/adobe-technology-
sneaks-2012/adobe...](http://tv.adobe.com/watch/adobe-technology-
sneaks-2012/adobe-shadow)

download: <http://labs.adobe.com/technologies/shadow/>

~~~
WickyNilliams
I'd just like to say, thank you very much for the heads up here. This looks
SERIOUSLY cool and seems like it would solve all the niggling issues we've
been having with mobile web development. Can't believe nobody else here has
jumped on this

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

<https://github.com/jamus/rwd-demonstration>

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

~~~
abeh
Also, if this page itself was responsive would be nice: resizing the browser
would select the appropriate view.

------
irishstu
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?

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

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

~~~
jnye131
It's actually a great tool for demonstrating to clients what you mean by
responsive website design

------
Flenser
It shows 4 layouts for <https://trello.com> Nothing you couldn't get by
resizing your browser though.

~~~
dermatthias
Yes. But clients will understand this one better, with different known devices
right in front of their eyes. Some of our clients can't map a resized browser
window to a smartphone <-> tablet switch.

~~~
Flenser
I agree. Just pointing out that it's not doing anything to emulate any of the
behaviour of any device. It's still rendering as whatever your browser will
show for those sizes, same user-agent/css/javascript behaviour. Still, as a
demonstration tool it will be very useful.

------
overshard
Already been done a few times...

<http://responsive.is/> for example.

------
janlukacs
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?

