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?

  • 2
    A lot of people are just ignorant and don't learn new methods.
    – Raynos
    Jul 26, 2011 at 22:24
  • @Raynos but learning is so fun!
    – Nic
    Jul 26, 2011 at 22:24
  • 1
    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!
    – WinW
    Aug 14, 2011 at 0:48
  • 1
    Migrate to webmasters.SE? Aug 17, 2011 at 14:03

3 Answers 3


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.

  • So both Zurb Foundation and Twitter Bootstrap handle this fairly well. It does require a little JavaScript to handle switching on demand. There's also DPI settings etc. Using those CSS frameworks kind of makes it really easy. Or at least parts of them. Sep 19, 2017 at 17:00
  • It is worth noting that this question and answer are from 6 years ago, and may not reflect current adoption rates. Sep 20, 2017 at 7:49
  • Ah, sorry. It was in the main feed yesterday for some reason. Didn't think to check the date. Sep 20, 2017 at 12:29

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.

  • 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, 2011 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, 2011 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.

  • 9
    There's a new feature in CSS3 that allows for dynamic rules for different screen sizes, that change automatically. Jul 26, 2011 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, 2011 at 7:02
  • 2
    The OP is talking about using media queries, which dynamically adjust things based on (among other things) screen size. No extra files loaded. Jul 29, 2011 at 5:02
  • 1
    @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, 2011 at 5:42
  • 2
    @SF: The original post was talking about media queries, not serving different CSS based on headers or w/e. Aug 15, 2011 at 16:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.