6 ms·

Responsive.is

190 points by parmgrewal 15y ago

ww520 15y ago
Pretty cool. I notice site with Bootstrap seems to work. Sites like Google or Yahoo doesn't work.
- parmgrewal 15y ago
  I think they use User-agent detection.
- conroy 15y ago
  Google and Facebook don't work because they utilize the X-Frame-Options[1] response header to prevent their content from being served in iframes. [1]: https://developer.mozilla.org/en/The_X-FRAME-OPTIONS_response_header https://developer.mozilla.org/en/The_X-FRAME-OPTIONS_respons...
ard0r 15y ago
When I use smartphone sizes, the black area that reduces the viewport covers the scrollbars. Chrome 17/Windows (wow 17!)
- parmgrewal 15y ago
  yes on mine too chrome 17/mac
jonah 15y ago
Elegant. What about random or next/previous buttons in the header in addition to the dropdown?
JoshTriplett 15y ago
This site seems to display two separate vertical scrollbars, one for the page and one for the iframe within the page. Attempting to scroll only affects the page scrollbar, making it difficult to scroll down in the iframe.
- cobychapple 15y ago
  Put your mouse inside the viewport and try again.
  - deleted 15y ago
    [deleted]
- radicalbyte 15y ago
  The PC view on a PC is ugly: there's a big vertical scrollbar that you can't use to scroll. Mousewheel and cursors work fine. I also see a horizontal scrollbar, scrolling right reveals the second vertical scrollbar. It's a nice idea, but the usability for PC users is terrible. Hopefully you can fix that in future iterations.
- mrgreenfur 15y ago
  I think the point is to show the part of the page that is visible to the current device and fade out the rest, but only when you've force picked a size.
kilian 15y ago
Very stylish, but I think this site: http://mattkersley.com/responsive/ http://mattkersley.com/responsive/ wins in terms of usefulness. We have that html as a development-only page in our framework, so when developing/designing a site we can go to /responsive and test it that way, very convenient.
- parmgrewal 15y ago
  I agree your's is much more productive.
- railsjedi 15y ago
  They're both useful. I prefer the single site at a time when doing development since I'd rather focus in one layout at a time to optimize it.
conroy 15y ago
I'm obviously biased because I have a similar site of my own (http://areyouresponsive.com http://areyouresponsive.com), but I love seeing new tools to facilitate building response websites.
- parmgrewal 15y ago
  Nice design. I always like people who contribute back to industry.
- pimentel 15y ago
  It's not really obvious you can edit the target URL. Only the page title suggested I could test some other URL. Also, the output for http://mattkersley.com/ http://mattkersley.com/ doesn't match in any way his responsiveness test at http://mattkersley.com/responsive/ http://mattkersley.com/responsive/
railsjedi 15y ago
Pretty awesome. It even works with port numbers, but only if you use it directly in the URL (entering :3000 into the top right address bar doesnt work). http://responsive.is/localhost:3000 http://responsive.is/localhost:3000 A bookmarklet would be great too
- railsjedi 15y ago
  I put together a quick and dirty bookmarklet: https://gist.github.com/2001302 https://gist.github.com/2001302 Click it to quickly wrap any site in responsive.is.
- webXL 15y ago
  There's also an error in the CSS that prevents the view icons from displaying in that case. "background: url(img/state-icons.png) no-repeat;" needs to be "background: url(/img/state-icons.png) no-repeat;" Actually, it's once you're looking at a page in a subdirectory of your own server's doc root, for any URL, not just localhost:PORT#.
ronbeltran 15y ago
http://responsive.is/lessframework.com http://responsive.is/lessframework.com
scorcho 15y ago
This is my first attempt prototyping a responsive site - http://dl.dropbox.com/u/424079/NewAJLI/ajli.html http://dl.dropbox.com/u/424079/NewAJLI/ajli.html Used Skeleton's 12-column CSS framework, which was a bit buggy. Has 4 breakpoints - 960 width, ipad portrait, iphone landscape and iphone portrait. The gray border up top represents where the menu will reside and scale. I'm not thrilled with how we handled the transition to mobile - the varying blocks of text in 'who we are' and the subsequent example need to be more differentiated.
peq 15y ago
I am still not convinced that such layouts are good for mobile pages. For example the bostonglobe page wont let me zoom at all on my android phone. This is ok as long as the default font size is fine for me, but I often encounter websites where I want to increase the font size. Actually modern mobile browsers can handle unresponsive layouts quite well, often better than some "responsive" Layouts.
- marknutter 15y ago
  A problem easily solved by using larger fonts, right?
- MatthewPhillips 15y ago
  That has nothing to do with the site being responsive. This is what is responsible for not allowing you to zoom: <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
EastSmith 15y ago
Not looking well in Firefox 11.
jsavimbi 15y ago
Responsive design works wonders for text-based websites like newspapers and blogs. The new Boston Globe sets the bar with it. Doesn't work very well when you're developing dashboard or other data-driven applications. You're going to have to build the mobile app at some point so might as well start sooner than later. In the mean time, responsive design will bridge the gap.
eslachance 15y ago
This is absolutely horrendous in Firefox 7. About 60% of the bottom of the screen is completely black, leaving only about 300px high of contents, in any of the views. This isn't IE6, it's FF7, which is 5 months old! Screenie: https://picasaweb.google.com/lh/photo/wmSzaq9yag_BXWSeUCPeelq4LNUUr9uRaBxSpzWMvXQ?feat=directlink https://picasaweb.google.com/lh/photo/wmSzaq9yag_BXWSeUCPeel...
- masukomi 15y ago
  .... True, but it's also not the page that was linked to. Did the page that was linked to work for you?
  - eslachance 15y ago
    It is the page I was linked to. But responsive.is displays a random website, and this website in particular didn't work. I guess if I had realized it was just a random website perhaps my reaction would have been different. Edit: For some reason, http://responsive.is/trentwalton.com http://responsive.is/trentwalton.com now works fine. A Quirk, perhaps?
mjhoy 15y ago
This seems like a fantastic way to explain responsive design to clients.
Havoc 15y ago
Please use meaningful post titles. While surprises are sometimes fun, mystery links make for unnecessarily tedious browsing.
- parmgrewal 15y ago
  I am sorry, will keep in mind for future.
jastanton 15y ago
Interesting results: http://responsive.is/responsive.is/responsive.is/responsive.is/responsive.is/responsive.is/responsive.is/bostonglobe.com http://responsive.is/responsive.is/responsive.is/responsive....
porterhaney 15y ago
I was disappointed to check out the salt surf site, and attempt to checkout and it'd didn't keep my page responsive...
alabut 15y ago
Argh, this would've been so useful just 48 hours ago at a big client meeting where I presented a dozen wireframe layouts with a responsive design. As a designer, I tried something new by skipping Fireworks and going straight from sketches to laying it out in Bootstrap. Pros: saved an insane amount of time - a dozen templates instantly became 48 templates because each page had 4 resolutions. Cons: * it was awkward to resize the browser window 4 times per page, so this Responsive.is tool would've helped immensely, especially with how it highlights the active window port and allows the rest of the content to be masked but still faintly visible, so the layout doesn't feel cramped because you can see a quick preview of the rest of the content "below the fold". * the default Bootstrap styling is so plain that it felt like half of the critiques were about the boxiness of the visual design, not the visual hierarchy of the information itself. Themes wouldn't help for this particular client because they're a big giant company that have their own branding anyway. So prototyping with Bootstrap gave me way more templates in a short of amount of time but it's ugly enough that stakeholder critiques were distracted by it (which is why I usually stick to high fidelity mockups and use wireframes only for internal team collaboration, if at all). More production-ready in some ways (the frontend dev on the team finally got engaged with feedback and is ready for handoff) and less in others (stakeholders won't give real feedback until they see it styled with polish).
nakedgremlin 15y ago
Very impressive.

Responsive.is

190 points by parmgrewal 15y ago

ww520 15y ago

Pretty cool. I notice site with Bootstrap seems to work. Sites like Google or Yahoo doesn't work.

parmgrewal 15y ago
I think they use User-agent detection.
conroy 15y ago
Google and Facebook don't work because they utilize the X-Frame-Options[1] response header to prevent their content from being served in iframes. [1]: https://developer.mozilla.org/en/The_X-FRAME-OPTIONS_response_header https://developer.mozilla.org/en/The_X-FRAME-OPTIONS_respons...

ard0r 15y ago

When I use smartphone sizes, the black area that reduces the viewport covers the scrollbars. Chrome 17/Windows (wow 17!)

parmgrewal 15y ago
yes on mine too chrome 17/mac

jonah 15y ago

Elegant. What about random or next/previous buttons in the header in addition to the dropdown?

JoshTriplett 15y ago

This site seems to display two separate vertical scrollbars, one for the page and one for the iframe within the page. Attempting to scroll only affects the page scrollbar, making it difficult to scroll down in the iframe.

cobychapple 15y ago
Put your mouse inside the viewport and try again.
- deleted 15y ago
  [deleted]
radicalbyte 15y ago
The PC view on a PC is ugly: there's a big vertical scrollbar that you can't use to scroll. Mousewheel and cursors work fine. I also see a horizontal scrollbar, scrolling right reveals the second vertical scrollbar. It's a nice idea, but the usability for PC users is terrible. Hopefully you can fix that in future iterations.
mrgreenfur 15y ago
I think the point is to show the part of the page that is visible to the current device and fade out the rest, but only when you've force picked a size.

kilian 15y ago

Very stylish, but I think this site: http://mattkersley.com/responsive/ http://mattkersley.com/responsive/ wins in terms of usefulness. We have that html as a development-only page in our framework, so when developing/designing a site we can go to /responsive and test it that way, very convenient.

parmgrewal 15y ago
I agree your's is much more productive.
railsjedi 15y ago
They're both useful. I prefer the single site at a time when doing development since I'd rather focus in one layout at a time to optimize it.

conroy 15y ago

I'm obviously biased because I have a similar site of my own (http://areyouresponsive.com http://areyouresponsive.com), but I love seeing new tools to facilitate building response websites.

parmgrewal 15y ago
Nice design. I always like people who contribute back to industry.
pimentel 15y ago
It's not really obvious you can edit the target URL. Only the page title suggested I could test some other URL. Also, the output for http://mattkersley.com/ http://mattkersley.com/ doesn't match in any way his responsiveness test at http://mattkersley.com/responsive/ http://mattkersley.com/responsive/

railsjedi 15y ago

Pretty awesome. It even works with port numbers, but only if you use it directly in the URL (entering :3000 into the top right address bar doesnt work). http://responsive.is/localhost:3000 http://responsive.is/localhost:3000 A bookmarklet would be great too

railsjedi 15y ago
I put together a quick and dirty bookmarklet: https://gist.github.com/2001302 https://gist.github.com/2001302 Click it to quickly wrap any site in responsive.is.
webXL 15y ago
There's also an error in the CSS that prevents the view icons from displaying in that case. "background: url(img/state-icons.png) no-repeat;" needs to be "background: url(/img/state-icons.png) no-repeat;" Actually, it's once you're looking at a page in a subdirectory of your own server's doc root, for any URL, not just localhost:PORT#.

ronbeltran 15y ago

http://responsive.is/lessframework.com http://responsive.is/lessframework.com

scorcho 15y ago

This is my first attempt prototyping a responsive site - http://dl.dropbox.com/u/424079/NewAJLI/ajli.html http://dl.dropbox.com/u/424079/NewAJLI/ajli.html Used Skeleton's 12-column CSS framework, which was a bit buggy. Has 4 breakpoints - 960 width, ipad portrait, iphone landscape and iphone portrait. The gray border up top represents where the menu will reside and scale. I'm not thrilled with how we handled the transition to mobile - the varying blocks of text in 'who we are' and the subsequent example need to be more differentiated.

peq 15y ago

I am still not convinced that such layouts are good for mobile pages. For example the bostonglobe page wont let me zoom at all on my android phone. This is ok as long as the default font size is fine for me, but I often encounter websites where I want to increase the font size. Actually modern mobile browsers can handle unresponsive layouts quite well, often better than some "responsive" Layouts.

marknutter 15y ago
A problem easily solved by using larger fonts, right?
MatthewPhillips 15y ago
That has nothing to do with the site being responsive. This is what is responsible for not allowing you to zoom: <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

EastSmith 15y ago

Not looking well in Firefox 11.

jsavimbi 15y ago

Responsive design works wonders for text-based websites like newspapers and blogs. The new Boston Globe sets the bar with it. Doesn't work very well when you're developing dashboard or other data-driven applications. You're going to have to build the mobile app at some point so might as well start sooner than later. In the mean time, responsive design will bridge the gap.

eslachance 15y ago

This is absolutely horrendous in Firefox 7. About 60% of the bottom of the screen is completely black, leaving only about 300px high of contents, in any of the views. This isn't IE6, it's FF7, which is 5 months old! Screenie: https://picasaweb.google.com/lh/photo/wmSzaq9yag_BXWSeUCPeelq4LNUUr9uRaBxSpzWMvXQ?feat=directlink https://picasaweb.google.com/lh/photo/wmSzaq9yag_BXWSeUCPeel...

masukomi 15y ago
.... True, but it's also not the page that was linked to. Did the page that was linked to work for you?
- eslachance 15y ago
  It is the page I was linked to. But responsive.is displays a random website, and this website in particular didn't work. I guess if I had realized it was just a random website perhaps my reaction would have been different. Edit: For some reason, http://responsive.is/trentwalton.com http://responsive.is/trentwalton.com now works fine. A Quirk, perhaps?

mjhoy 15y ago

This seems like a fantastic way to explain responsive design to clients.

Havoc 15y ago

Please use meaningful post titles. While surprises are sometimes fun, mystery links make for unnecessarily tedious browsing.

parmgrewal 15y ago
I am sorry, will keep in mind for future.

jastanton 15y ago

Interesting results: http://responsive.is/responsive.is/responsive.is/responsive.is/responsive.is/responsive.is/responsive.is/bostonglobe.com http://responsive.is/responsive.is/responsive.is/responsive....

porterhaney 15y ago

I was disappointed to check out the salt surf site, and attempt to checkout and it'd didn't keep my page responsive...

alabut 15y ago

Argh, this would've been so useful just 48 hours ago at a big client meeting where I presented a dozen wireframe layouts with a responsive design. As a designer, I tried something new by skipping Fireworks and going straight from sketches to laying it out in Bootstrap. Pros: saved an insane amount of time - a dozen templates instantly became 48 templates because each page had 4 resolutions. Cons: * it was awkward to resize the browser window 4 times per page, so this Responsive.is tool would've helped immensely, especially with how it highlights the active window port and allows the rest of the content to be masked but still faintly visible, so the layout doesn't feel cramped because you can see a quick preview of the rest of the content "below the fold". * the default Bootstrap styling is so plain that it felt like half of the critiques were about the boxiness of the visual design, not the visual hierarchy of the information itself. Themes wouldn't help for this particular client because they're a big giant company that have their own branding anyway. So prototyping with Bootstrap gave me way more templates in a short of amount of time but it's ugly enough that stakeholder critiques were distracted by it (which is why I usually stick to high fidelity mockups and use wireframes only for internal team collaboration, if at all). More production-ready in some ways (the frontend dev on the team finally got engaged with feedback and is ready for handoff) and less in others (stakeholders won't give real feedback until they see it styled with polish).

nakedgremlin 15y ago

Very impressive.