Take the 2-minute tour ×

This might seem like more of a graphic design question than a programming question, but I think it has much more technical/programming merit than actual graphic design.

The concept of "responsive" web design revolves around using media queries in CSS3 to detect the size of the viewing device and adjust the CSS rules accordingly - essentially, dynamic CSS. This fills the void on a lot of deployment cases - mobile, in particular.

I think use of media queries is surfacing slowly (I've found that many people don't really know about it), but I'm wondering if there is a reason for slow adoption. Is it impractical for web applications? Is there something I'm missing that might be a fundamental pitfall?

share|improve this question
A lot of people are just ignorant and don't learn new methods. –  Raynos Jul 26 '11 at 22:24
@Raynos but learning is so fun! –  Nic Jul 26 '11 at 22:24
s it because internet speeds are increasing as time goes on and the responsive is no more a real issue, and the effort is not justified anymore?May be I am wrong, because this idea looks cool! –  Kiran Ravindranathan Aug 14 '11 at 0:48
Migrate to webmasters.SE? –  Peter Taylor Aug 17 '11 at 14:03

3 Answers 3

up vote 5 down vote accepted

You have to jump through hoops to get it to actually work. For a site I'm developing I used @media (max-width:800px) to define a stylesheet for phones and other smaller screens. But it wasn't being used by e.g. iPhone.

Turns out that phone browser developers assume that people won't take small screens into account so they lie to the rendering engine (iPhone claims to be more than 900px wide, for example) unless you put in an extra meta-tag to tell it not to lie. When it gets to the point that you're fighting the browser implementers you start to wonder whether it's worth the effort.

share|improve this answer

I can't speak for everyone, but from my own experience time and money has been the deciding factor. My colleagues and I are always looking at the latest stuff, but designing and implementing different layouts for differently sized devices is a big deal. Especially considering that on my 3 year old nokia 5800 all our websites look fine - bar that I have to scroll to get the sidebar content. We design and implement websites for small companies and self-employed folk.

Another reason that may be valid is that serving a completely separate website for mobile versions, with its own separate sitemap ( http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=34648 ), is an easy and entry-level way to maintain the site.

share|improve this answer
Well, I think it's definitely difficult to introduce a responsive design to a site that is deployed or mid-cycle, but I think it would be much easier to implement something like this instead of having a whole other mobile subdomain. Luckily though, Rails is abstracting this task a little bit with inherited templates. –  Nic Aug 15 '11 at 15:51
Well, I should add that in our case the client actually outsourced the mobile version to a competitor :( I would personally go with templates rather than a different site as well. –  Pelshoff Aug 15 '11 at 15:54

If you can guarantee to reliably recover the data, it's all fine.

But imagine, someone loads a webpage in a windowed browser of a desktop computer. Do you force them to open fullscreen to read everything, or do you accomodate the size to the reduced window and present lots of blank space as they maximize it? You serve the CSS once, at page load!

What about a phone browser that switches landscape/portrait modes as you rotate the phone? What about a browser that simply has too small resolution and people normally use zoom-in, but you have already adapted to the reported, way too small resolution and the page becomes unreadable?

Just follow the standard guidelines of making a decent universal, scalable CSS and let the browser handle scaling the page to the right resolution.

share|improve this answer
There's a new feature in CSS3 that allows for dynamic rules for different screen sizes, that change automatically. –  Ruirize Jul 26 '11 at 21:34
@Ruirize Exactly- use static CSS that has rules that adapt the content dynamically - okay. Request dynamically generated CSS that has rules statically setting the content for your screen size - no. –  SF. Jul 27 '11 at 7:02
The OP is talking about using media queries, which dynamically adjust things based on (among other things) screen size. No extra files loaded. –  tnorthcutt Jul 29 '11 at 5:02
@SF.: try to resize a Google Calendar window (the new red theme, not the older blue one), it's creepy cool how they handle it. –  Lie Ryan Aug 13 '11 at 5:42
@SF: The original post was talking about media queries, not serving different CSS based on headers or w/e. –  Pewpewarrows Aug 15 '11 at 16:22

Your Answer


