9

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?

Web Designer Promoter
  • 155
  • 6
Nic
  • 1,411
  • 8
  • 21

3 Answers3

9

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.

Peter Taylor
  • 4,012
  • 1
  • 24
  • 29
  • 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. – Berin Loritsch Sep 19 '17 at 17:00
  • It is worth noting that this question and answer are from 6 years ago, and may not reflect current adoption rates. – Peter Taylor Sep 20 '17 at 07:49
  • Ah, sorry. It was in the main feed yesterday for some reason. Didn't think to check the date. – Berin Loritsch Sep 20 '17 at 12:29
4

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.

Pelshoff
  • 456
  • 2
  • 7
  • 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
2

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.

SF.
  • 5,078
  • 2
  • 24
  • 36
  • 9
    There's a new feature in CSS3 that allows for dynamic rules for different screen sizes, that change automatically. – Steffan Donal 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 07: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. – Travis Northcutt Jul 29 '11 at 05: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 '11 at 05:42
  • 2
    @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