5 ms·

Show HN: Responsivator - View/Share Responsive Sites

61 points by johnpolacek 14y ago

johnpolacek 14y ago
I built Responsivator to easily share responsive web pages with people. To send a link to somebody with the header and controls hidden, you just do this: http://dfcb.github.com/Responsivator/?site=http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html&header=hide http://dfcb.github.com/Responsivator/?site=http://www.alista... You can customize what sizes and labels you want (click the customize button) Credit to great work done by others like: Matt Kersley - http://mattkersley.com/responsive/ http://mattkersley.com/responsive/ Benjamin Keen - http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/ http://www.benjaminkeen.com/open-source-projects/smaller-pro... lensco - https://gist.github.com/1685127 https://gist.github.com/1685127
- Alan01252 14y ago
  I really like this and have bookmarked it. I'll mostly be using it to demonstrate quickly to my customers how sites will look for a variety of devices in a simple way they'll understand. Any thoughts on monetization? Or are you planning on keeping this free?
  - johnpolacek 14y ago
    Free! Especially since this builds upon work done by others. I'm pushing open source hard at the company I work for (Draftfcb). It has been an easy sell, actually. This is one of a few projects our dev group has released, with more on the way... http://dfcb.github.com/ http://dfcb.github.com/
- olalonde 14y ago
  Awesome project. Just submitted a pull request to allow URLs which start with https:// https:// (right now it appends http so https://domain/ https://domain/ becomes http://https://domain/ http://https://domain/).
  - 0ca0 14y ago
    s/append/prepend
eykanal 14y ago
Try tumblr.com and stackoverflow.com after logging in; it doesn't deal with redirects for logged-in users well.
- mjschultz 14y ago
  I don't know about tumblr.com, but stackoverflow doesn't allow their site to be viewed within an iframe (security reasons). Nor does facebook.com or google.com. I also hope most banking sites wouldn't allow this. That said, it seems like a useful tool when you are the developer and want to see how it renders for different viewscreens.
ClifReeder 14y ago
This is really useful, especially since I've been working on various responsive projects lately. Thanks!
MattBearman 14y ago
This is really cool, great work! The only problem I can see is that it doesn't work with sites that use user agent sniffing serve up mobile sites (see bbc.co.uk - http://dfcb.github.com/Responsivator/?site=bbc.co.uk http://dfcb.github.com/Responsivator/?site=bbc.co.uk) I realise that's not technically 'responsive', but it would be cool if responsivator could handle that as well. Having said all that, I don't think it's even possible to spoof different user agents in iframes(?), maybe could be done using a headless browser to take screenshots?
- olalonde 14y ago
  > maybe could be done using a headless browser to take screenshots? Or more simply, pass the request through a proxy which sets the right user agent.
- ghurlman 14y ago
  That BBC site isn't responsive at all... it's just a redirect to a mobile site.
timmclean 14y ago
Nice. It's like a shareable version of Firefox's Responsive Design View!
xmpir 14y ago
very nice and usefull tool!
chris_wot 14y ago
For some reason, it's not updating the website link when you click on the random button. Cool site though :-)
- johnpolacek 14y ago
  Fixed!
username3 14y ago
Scroll bars take away from widths.
mikecane 14y ago
Does not work with my wordpress.com blog. Blank. I know it's not responsive, so maybe instead of blank it should throw up a dialog box instead of just blank?
emilioolivares 14y ago
Great work, this is awesome. I just used it to check out my site: http://dfcb.github.com/Responsivator/?site=http://flipmeme.com http://dfcb.github.com/Responsivator/?site=http://flipmeme.c...

61 points by johnpolacek 14y ago

I built Responsivator to easily share responsive web pages with people. To send a link to somebody with the header and controls hidden, you just do this: http://dfcb.github.com/Responsivator/?site=http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html&header=hide http://dfcb.github.com/Responsivator/?site=http://www.alista... You can customize what sizes and labels you want (click the customize button) Credit to great work done by others like: Matt Kersley - http://mattkersley.com/responsive/ http://mattkersley.com/responsive/ Benjamin Keen - http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/ http://www.benjaminkeen.com/open-source-projects/smaller-pro... lensco - https://gist.github.com/1685127 https://gist.github.com/1685127

Alan01252 14y ago
I really like this and have bookmarked it. I'll mostly be using it to demonstrate quickly to my customers how sites will look for a variety of devices in a simple way they'll understand. Any thoughts on monetization? Or are you planning on keeping this free?
- johnpolacek 14y ago
  Free! Especially since this builds upon work done by others. I'm pushing open source hard at the company I work for (Draftfcb). It has been an easy sell, actually. This is one of a few projects our dev group has released, with more on the way... http://dfcb.github.com/ http://dfcb.github.com/
olalonde 14y ago
Awesome project. Just submitted a pull request to allow URLs which start with https:// https:// (right now it appends http so https://domain/ https://domain/ becomes http://https://domain/ http://https://domain/).
- 0ca0 14y ago
  s/append/prepend

eykanal 14y ago

Try tumblr.com and stackoverflow.com after logging in; it doesn't deal with redirects for logged-in users well.

mjschultz 14y ago
I don't know about tumblr.com, but stackoverflow doesn't allow their site to be viewed within an iframe (security reasons). Nor does facebook.com or google.com. I also hope most banking sites wouldn't allow this. That said, it seems like a useful tool when you are the developer and want to see how it renders for different viewscreens.

ClifReeder 14y ago

This is really useful, especially since I've been working on various responsive projects lately. Thanks!

MattBearman 14y ago

This is really cool, great work! The only problem I can see is that it doesn't work with sites that use user agent sniffing serve up mobile sites (see bbc.co.uk - http://dfcb.github.com/Responsivator/?site=bbc.co.uk http://dfcb.github.com/Responsivator/?site=bbc.co.uk) I realise that's not technically 'responsive', but it would be cool if responsivator could handle that as well. Having said all that, I don't think it's even possible to spoof different user agents in iframes(?), maybe could be done using a headless browser to take screenshots?

olalonde 14y ago
> maybe could be done using a headless browser to take screenshots? Or more simply, pass the request through a proxy which sets the right user agent.
ghurlman 14y ago
That BBC site isn't responsive at all... it's just a redirect to a mobile site.

timmclean 14y ago

Nice. It's like a shareable version of Firefox's Responsive Design View!

xmpir 14y ago

very nice and usefull tool!

chris_wot 14y ago

For some reason, it's not updating the website link when you click on the random button. Cool site though :-)

johnpolacek 14y ago
Fixed!

username3 14y ago

Scroll bars take away from widths.

mikecane 14y ago

Does not work with my wordpress.com blog. Blank. I know it's not responsive, so maybe instead of blank it should throw up a dialog box instead of just blank?

emilioolivares 14y ago

Great work, this is awesome. I just used it to check out my site: http://dfcb.github.com/Responsivator/?site=http://flipmeme.com http://dfcb.github.com/Responsivator/?site=http://flipmeme.c...