6 ms·

Demonstrating responsive design to clients.

188 points by jnye131 15y ago

0x0 15y ago
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 15y ago
Nice idea, well executed. Would be nice if the URL can be exposed as a GET parameter so it can be linked to.
- kristianc 15y ago
  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.'
- jnye131 15y ago
  I'll pass that on, see if it can be done.
Peroni 15y ago
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.
aqrashik 15y ago
Nice. I also like http://mattkersley.com/responsive/ http://mattkersley.com/responsive/ which shows different resolutions side by side, I find it easier to compare.
abeh 15y ago
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 15y ago
  Also, if this page itself was responsive would be nice: resizing the browser would select the appropriate view.
sirwitti 15y ago
Some time ago there was http://responsive.is/ 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 15y ago
  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/ http://responsive.is/ animates the iframe resize meaning the event will be repeatedly fired.
  - sxtxixtxcxh 15y ago
    yeah, but resizing a browser window fires the resize event multiple times. responsive design isn't mobile specific, practically by definition.
spookylukey 15y ago
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!
janlukacs 15y ago
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?
TeMPOraL 15y ago
Just couldn't help myself. http://dl.dropbox.com/u/216352/drdception.png http://dl.dropbox.com/u/216352/drdception.png
icode 15y ago
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.
- rplnt 15y ago
  Does it really fool the website? Because iPad has much higher pixel density than average monitor I think.
- JCB_K 15y ago
  That's why you set the initial scale to 1.0 when you're designing a responsive website. This disables the default iOS behaviour to scale a website to fit within the screen. <meta name="viewport" content="width=device-width; initial-scale=1.0">
  - ceejayoz 15y ago
    You can also set minimum/maximum scales, or disable user-initiated scaling entirely. Very handy in some cases.
    - jodrellblank 15y ago
      One thing in favour of the idea of professional-body approved programming qualifications is that we could take them away from people who do this. Anyone who implements "no-scaling" and anyone who worked on a browser that pays attention to it. It's awful for usability, and behaviourally as obnoxious as letting the caller decide what ringtone a callee's phone should play and how loudly, or breaking the 'back' button, or having a 'you can't close your browser or power off your device while looking at this website' option.
deleted 15y ago
[deleted]
lucian1900 15y ago
It assumes I keep my browser window maximised. Bad assumption.
- jnye131 15y ago
  It's actually a great tool for demonstrating to clients what you mean by responsive website design
ceejayoz 15y ago
Similar: http://www.responsinator.com/ http://www.responsinator.com/
- darien 15y ago
  I think this is the best one I've seen so far.
irishstu 15y ago
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?
Flenser 15y ago
It shows 4 layouts for https://trello.com https://trello.com Nothing you couldn't get by resizing your browser though.
- dermatthias 15y ago
  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 14y ago
    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.
lukeholder 15y ago
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-shadow http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe... download: http://labs.adobe.com/technologies/shadow/ http://labs.adobe.com/technologies/shadow/
- WickyNilliams 14y ago
  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
overshard 15y ago
Already been done a few times... http://responsive.is/ http://responsive.is/ for example.
LocalPCGuy 15y ago
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".
jamus 14y ago
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 https://github.com/jamus/rwd-demonstration

188 points by jnye131 15y ago

0x0 15y ago

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 15y ago

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

kristianc 15y ago
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.'
jnye131 15y ago
I'll pass that on, see if it can be done.

Peroni 15y ago

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.

aqrashik 15y ago

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

abeh 15y ago

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 15y ago
Also, if this page itself was responsive would be nice: resizing the browser would select the appropriate view.

sirwitti 15y ago

Some time ago there was http://responsive.is/ 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 15y ago
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/ http://responsive.is/ animates the iframe resize meaning the event will be repeatedly fired.
- sxtxixtxcxh 15y ago
  yeah, but resizing a browser window fires the resize event multiple times. responsive design isn't mobile specific, practically by definition.

spookylukey 15y ago

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!

janlukacs 15y ago

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?

TeMPOraL 15y ago

Just couldn't help myself. http://dl.dropbox.com/u/216352/drdception.png http://dl.dropbox.com/u/216352/drdception.png

icode 15y ago

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.

rplnt 15y ago
Does it really fool the website? Because iPad has much higher pixel density than average monitor I think.
JCB_K 15y ago
That's why you set the initial scale to 1.0 when you're designing a responsive website. This disables the default iOS behaviour to scale a website to fit within the screen. <meta name="viewport" content="width=device-width; initial-scale=1.0">
- ceejayoz 15y ago
  You can also set minimum/maximum scales, or disable user-initiated scaling entirely. Very handy in some cases.
  - jodrellblank 15y ago
    One thing in favour of the idea of professional-body approved programming qualifications is that we could take them away from people who do this. Anyone who implements "no-scaling" and anyone who worked on a browser that pays attention to it. It's awful for usability, and behaviourally as obnoxious as letting the caller decide what ringtone a callee's phone should play and how loudly, or breaking the 'back' button, or having a 'you can't close your browser or power off your device while looking at this website' option.

deleted 15y ago

[deleted]

lucian1900 15y ago

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

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

ceejayoz 15y ago

Similar: http://www.responsinator.com/ http://www.responsinator.com/

darien 15y ago
I think this is the best one I've seen so far.

irishstu 15y ago

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?

Flenser 15y ago

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

dermatthias 15y ago
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 14y ago
  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.

lukeholder 15y ago

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-shadow http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe... download: http://labs.adobe.com/technologies/shadow/ http://labs.adobe.com/technologies/shadow/

WickyNilliams 14y ago
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

overshard 15y ago

Already been done a few times... http://responsive.is/ http://responsive.is/ for example.

LocalPCGuy 15y ago

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

jamus 14y ago

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 https://github.com/jamus/rwd-demonstration