
Responsive.is - parmgrewal
http://responsive.is/
======
JoshTriplett
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
Put your mouse inside the viewport and try again.

------
kilian
Very stylish, but I think this site: <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.

~~~
railsjedi
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.

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

~~~
parmgrewal
I am sorry, will keep in mind for future.

------
jastanton
Interesting results:

[http://responsive.is/responsive.is/responsive.is/responsive....](http://responsive.is/responsive.is/responsive.is/responsive.is/responsive.is/responsive.is/responsive.is/bostonglobe.com)

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

~~~
pimentel
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/> doesn't match in any way his
responsiveness test at <http://mattkersley.com/responsive/>

------
railsjedi
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>

A bookmarklet would be great too

~~~
webXL
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#.

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

------
eslachance
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_BXWSeUCPeel...](https://picasaweb.google.com/lh/photo/wmSzaq9yag_BXWSeUCPeelq4LNUUr9uRaBxSpzWMvXQ?feat=directlink)

~~~
masukomi
.... True, but it's also not the page that was linked to. Did the page that
was linked to work for you?

~~~
eslachance
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> now works fine.
A Quirk, perhaps?

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

~~~
conroy
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_respons...](https://developer.mozilla.org/en/The_X-FRAME-
OPTIONS_response_header)

------
EastSmith
Not looking well in Firefox 11.

------
scorcho
This is my first attempt prototyping a responsive site -
<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.

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

~~~
parmgrewal
yes on mine too chrome 17/mac

------
ronbeltran
<http://responsive.is/lessframework.com>

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

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

~~~
MatthewPhillips
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">

------
jonah
Elegant.

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

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

------
nakedgremlin
Very impressive.

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

