Results 1 to 10 of 13
Thread: Responsive web design
Responsive web design 21 Jun 2011 @ 09.04
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?
21 Jun 2011 @ 09.08
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...
21 Jun 2011 @ 09.13
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.
- Join Date
- Jun 2011
- Blog Entries
21 Jun 2011 @ 09.15
I probably sound like a sheep but I have to agree also
21 Jun 2011 @ 09.17
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.
21 Jun 2011 @ 12.19I believe that you should only use media queries if you are using a non-desktop browser.
In the past, it's been difficult to adapt designs for different viewport sizes. You had basically three choices:
- Make a fixed-width site for 1024*768
- Use a fluid layout
- Do something horrendously complicated to make the layout adapt
(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.
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:
- 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.
- You have to do more design work, and you have to test and maintain it.
- For some sites, the mobile version should be fundamentally different in content, not just in display. A mobile-specific site would suit them better.
(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!
Last edited by Mike Hopley; 21 Jun 2011 at @ 12.40.
21 Jun 2011 @ 13.12
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.
21 Jun 2011 @ 14.09In 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.
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.
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?
21 Jun 2011 @ 15.28
21 Jun 2011 @ 15.41
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?
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.