Discuss: Responsive Web Design

by Ethan Marcotte

1

All this is inferring that the mobile browser supports media queries. Otherwise, we’re sunk.

posted at 10:07 am on May 25, 2010 by Ethan

Thank you Ethan, for a very well written article. I love your architectural references and completely agree with the direction you’re suggesting. With css transitions added to the mix we can give media queries some smoothness when they kick in, which makes for beautiful transitions when you switch a device from portrait to landscape.

Which brings me to another point: the mere fact that millions of people are now playing with devices that can be held in 2 ways (portrait/landscape) means that the statement “nobody resizes their browser window” is no longer valid. Now everybody resizes their browser window all the time.

Cheers.

posted at 10:33 am on May 25, 2010 by Thomas Maas

3

First of all, Ethan — your name is awesome. Just FYI.

But seriously, thanks for your note. I don’t think we’re sunk, though: media query support is fairly robust in the current generation of non-desktop devices, and will likely only improve from there. In devices (or browsers) that don’t natively understand media queries (or the JS patches for them), I believe that only strengthens the case for working with a flexible foundation.

Thomas, you’re exactly right about how viewport resolution is much more flexible than it used to be. And I do believe you just blew my mind on mixing in transitions. I have no idea how (or if) that would work, but I’d love to try it. Brilliant.

posted at 11:47 am on May 25, 2010 by Ethan Marcotte

4

It’s possible that I’m mistaken, but I’m fairly certain it’s quite unnecessary to specify percentage widths to 18 decimal places.

posted at 12:26 pm on May 25, 2010 by camerondaigle

5 Lack of IE support - does it matter?

I discovered the the style sheet itself is ignored in IE if you use media queries. Which means I can use IE conditional comments to includes the correct stylesheets for IE on the desktop.

Who uses internet explorer on a mobile device?? Well I don’t, and most people won’t. So does it matter that the media queries are not suppoprted?

You can still get a website to render correctly on IE, and still use the media queries for your mobile browser (which will be mozilla,webkit,opera based). It may not perfect – but it’s a good solution which I have used myself successfully…

posted at 12:43 pm on May 25, 2010 by deanoj

6 Peripherals

I think media queries are a step in the right direction but don’t quite get at the real information we’re trying to attain. Screen resolution works great for the basic Web experience when you are toggling between desktop and mobile device; but falls short when we reach tablets, netbooks and other devices with varying levels of interaction.

As your average netbook will have the same resolution as something like a modern tablet, the experience is night and day different between the touch device and using a mouse. You touched on this briefly with Fitt’s Law, and anyone who has tried to use Yahoo! Fantasy Sports on an iPad can contest to the vastly different UX a larger-than-phone touch device has. And that it is pretty independent of the screen size.

I totally agree that media queries probably are the answer we have for now, but I think the real thing we will want to target is general screen size for layout AND peripheral device being used (be it finger or mouse/stylus). Then we’ll really be able to create responsive sites and applications.

Very interesting and thought-provoking read, thanks for putting this together.

my2cents

posted at 12:57 pm on May 25, 2010 by Tim Wright

7 Really amazed here

Ethan, thank you so much. This article opened my mind for the possibilities. I also enjoyed the way you took attention to the example layout. It’s so beautifully designed and well planned. I always hated fluid layouts because of their common trend of having narrow columns and giant width main areas, making body text awful to read. Designing for bigger resolutions is something people forget to do, and you worked out this in such a intelligent way. Finally I can see the power of fluid, adaptable layouts.

posted at 01:04 pm on May 25, 2010 by victornogueira

8 Good stuff!

Great article, Ethan. I’ve enjoyed watching this topic of yours progress over time and this article is another nice improvement on the approach.

I’ve been wondering though: do you think the resolution-based media query is a forward-looking solution? How can it scale to support higher resolution phones like the Nexus One (or perhaps even the next iPhone)? When handheld resolutions start to blur with screen resolutions, will device-max-width be relevant for delivering finger-friendly layouts?

posted at 01:26 pm on May 25, 2010 by Scott Jehl

9 Small Content Error

Great article, Ethan.

I just wanted to point out what I think is a small error in the article. When you talk about adding a query for larger screen sizes, your code reads (min-width: 1300px;)… however, the caption for the example image reads, “By specifying a wider max-width…”

Don’t you mean to say “…wider min-width” in the caption?

posted at 01:57 pm on May 25, 2010 by Dave Warfel

10 Why no semicolon to end the declaration(s)?

Why do you think the semi-colon is omitted from the end of the declaration? This contradicts the way we have been writing CSS since the beginning of time. Any idea why the switch to using “and” instead of the commas & semicolons we are used to?

Why not this:
[code]
media screen, (min-width: 1300px) {
media screen, (min-width: 400px; max-width: 700px) {
[/code]</pre>

instead of this:
[code]
media screen and (min-width: 1300px) {
media screen and (min-width: 400px) and (max-width: 700px) {
[/code]</pre>

Any thoughts?

posted at 02:10 pm on May 25, 2010 by Dave Warfel