Thread: Responsive web design

There was a little debate over on Twitter yesteday over Responsive Web Design. It all started off with a little blog post and then kind of escalated.

The basic premise is, when I am on a desktop browser, I want to see the full website, even if I resize the browser. I don't want the site to change its state depending on viewport. I do however, want to have an optimised experience on my mobile.

I believe that you should only use media queries if you are using a non-desktop browser. This entails some user agent detection, which many see as bad practice.

You could also extend this technique to load feature attributes for different browsers. For instance, we know that the feature set for IE7 is not going to change, so therefore rather than having to run through a load of feature tests, we can skip this and simple serve up the required feature set. For newer browsers (the most recent version) you can run your regular feature tests.

What are your thoughts?

I'd have to say I fully agree! I'll even go a step further & say that RWD is pretty much useless. On a desktop browser serve a normal site, on non-desktop serve a mobile version...

You won't see any argument with me either. Mark Boulton compared the struggle of getting Responsive Web Design established to that of web standards... I would say he is entirely incorrect. RWD is a solution to supporting multiple platforms but not necessarily the best solution.

I probably sound like a sheep but I have to agree also

I'd have to say I fully agree! I'll even go a step further & say that RWD is pretty much useless. On a desktop browser serve a normal site, on non-desktop serve a mobile version...

Originally Posted by janvt

I guess it depends on the situation. I believe the premise behind RWD is that you have one web(site) and as such the main content should not change, just how it is displayed.

With a separate mobile site you have two code lines to manage and maintain, which may be difficult to manage.

Having said that, having separate sites does allow you to make changes quickly, easily & independently, without needing to worry / test that it works on the majority of other devices / situations.

I guess it is up to the client / business to decide what is best for them.

I believe that you should only use media queries if you are using a non-desktop browser.

Have you never thought, "I wish I had 200 pixels more width to play with?"

In the past, it's been difficult to adapt designs for different viewport sizes. You had basically three choices:

1. Make a fixed-width site for 1024*768
2. Use a fluid layout
3. Do something horrendously complicated to make the layout adapt

(1) works fine, but most people now have more screen space to play with. You could often provide a better experience to them by using more width in your designs.

(2) has design issues. On larger screens, you can end up with unreadably long lines of text, or large blank spaces between parts of the page.

(3) either involves javascript polling to simulate media queries, or ridiculously complex and fragile CSS. The former has a performance problem; the latter is too complicated and doesn't provide enough control.

Media queries allow you to tweak the design to make the best use of the available viewport. You have a fine level of control; it's the right tool for the job. I would start from a 1024*768 base, so that the website falls back to (1) for unsupporting browsers.

There are potential problems, however:

1. Fluid images, which use a high-resolution source, can massively increase the page weight. This is especially problematic if you're serving them to mobile devices.
2. You have to do more design work, and you have to test and maintain it.
3. For some sites, the mobile version should be fundamentally different in content, not just in display. A mobile-specific site would suit them better.

For me, (1) means that I don't want to use fluid images -- or at least, I don't want the range of sizes to be too great.

(2) I feel is acceptable, providing you don't get too fancy. Most of the design changes should be simple anyway, because you don't want to create excessively jarring changes when the user resizes the viewport or visits the site on a different device.

(3) is definitely something to think about, but I feel it's over-emphasized. Beware assuming too much about what your mobile audience wants. In most cases, they probably want access to the same content as everyone else. Watch out for mobile devices downloading large amounts of CSS or background images that they never see, however!

Media queries allow you to tweak the design to make the best use of the available viewport. You have a fine level of control; it's the right tool for the job. I would start from a 1024*768 base, so that the website falls back to (1) for unsupporting browsers.

Originally Posted by Mike Hopley

I think media queries are great, I just don’t think they are the panacea to RWD or that they should be used in isolation. RWD is still in its infancy, and even Mark Boulton has stated that he doesn’t know where this will end up. In the meantime, I believe that media queries are not needed for the desktop environment and should only be served to platforms that require them, i.e. mobiles to provide an optimised experience. One way to do this is via a user agent sniff.

Now, if you are going to use this UA detection method for mobiles, then it also makes sense to detect other platforms in which the feature set is fixed, such as historic versions of browsers, rather than doing unnecessary feature tests for all browsers. This allows you to skip past these feature tests and just serve out what feature set is needed, thereby reducing the number of operations performed. For unknown platforms, or the most recent browser release (where the feature set isn’t fixed) you can still perform your full feature tests.

In the meantime, I believe that media queries are not needed for the desktop environment and should only be served to platforms that require them, i.e. mobiles to provide an optimised experience.

What disadvantages do you see to using them?

I agree they are "not needed", but I can see them being useful.

One way to do this is via a user agent sniff.

Now, if you are going to use this UA detection method for mobiles, then it also makes sense to detect other platforms in which the feature set is fixed, such as historic versions of browsers, rather than doing unnecessary feature tests for all browsers.

Browser sniffing feels like a relic of the bad old days to me. Then again, what do I know? I believe big sites such as Yahoo are using it, probably for performance reasons.

Personally, I'd go with feature detection over browser detection any day, despite the small performance overhead.

Feature detection is reliable and universal. Browser sniffing requires arcane knowledge: which old browsers, on which operating systems, support which features?

What disadvantages do you see to using them?

Originally Posted by Mike Hopley

When resizing the browser viewport the layout changes whether the users wants it to or not. The user has no choice about how they want to consume the content. As per this quote:

Beware assuming too much about what your mobile audience wants. In most cases, they probably want access to the same content as everyone else.

Originally Posted by Mike Hopley

Browser sniffing feels like a relic of the bad old days to me. Then again, what do I know? I believe big sites such as Yahoo are using it, probably for performance reasons.

Personally, I'd go with feature detection over browser detection any day, despite the small performance overhead.

Feature detection is reliable and universal. Browser sniffing requires arcane knowledge: which old browsers, on which operating systems, support which features?

Originally Posted by Mike Hopley

I agree it is a little archaic if used on its own, but that is not what I am advocating. Browser detection should only be used as part of the overall solution, one tool in the box. It should be used alongside feature detection. At present I would say you would only use three groups in the UA detection: mobile, older browsers and modern browsers. From there I would then do feature detection.

I agree they are "not needed", but I can see them being useful.

Originally Posted by Mike Hopley

In which desktop platform situations do you see this as being useful?

When resizing the browser viewport the layout changes whether the users wants it to or not. The user has no choice about how they want to consume the content.

Originally Posted by WelshStew

Any design at all restricts how the user can "consume the content". Necessarily, design involves making choices on behalf of the user about the best way to present the content.

Adjusting presentation to cater for the available screen space is very different from preventing people from accessing your content.

In which desktop platform situations do you see this as being useful?

Potentially, for any website that is even moderately complex.

If the user has 1920 pixels to play with, a design width of 960 pixels may not be the best way to present your content to him.

Some designs won't benefit from wider screens, but others will.