Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Responsive web design

  1. #1
    Trusted Guru WelshStew's Avatar
    Join Date
    Dec 2008
    Posts
    2,555
    Blog Entries
    3

    Default 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?
      Reply With Quote

  2. #2
    Member janvt's Avatar
    Join Date
    Jan 2011
    Posts
    182

    Default 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...
      Reply With Quote

  3. #3
    Senior Member Jason's Avatar
    Join Date
    Dec 2008
    Posts
    911

    Default 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.
      Reply With Quote

  4. #4
    Trusted Guru saltedm8's Avatar
    Join Date
    Jun 2011
    Posts
    1,969
    Blog Entries
    3

    Default 21 Jun 2011 @ 09.15

    I probably sound like a sheep but I have to agree also
      Reply With Quote

  5. #5
    Trusted Guru WelshStew's Avatar
    Join Date
    Dec 2008
    Posts
    2,555
    Blog Entries
    3

    Default 21 Jun 2011 @ 09.17

    quote
    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 View Post
    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.
      Reply With Quote

  6. #6
    Senior Member Mike Hopley's Avatar
    Join Date
    Jul 2009
    Posts
    712

    Default 21 Jun 2011 @ 12.19

    quote
    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!
    Last edited by Mike Hopley; 21 Jun 2011 at @ 12.40.
      Reply With Quote

  7. #7
    Trusted Guru WelshStew's Avatar
    Join Date
    Dec 2008
    Posts
    2,555
    Blog Entries
    3

    Default 21 Jun 2011 @ 13.12

    quote
    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 View Post
    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.
      Reply With Quote

  8. #8
    Senior Member Mike Hopley's Avatar
    Join Date
    Jul 2009
    Posts
    712

    Default 21 Jun 2011 @ 14.09

    quote
    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.


    quote
    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?
      Reply With Quote

  9. #9
    Trusted Guru WelshStew's Avatar
    Join Date
    Dec 2008
    Posts
    2,555
    Blog Entries
    3

    Default 21 Jun 2011 @ 15.28

    quote
    What disadvantages do you see to using them?
    Originally Posted by Mike Hopley View Post
    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:
    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 View Post
    quote
    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 View Post
    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.

    quote
    I agree they are "not needed", but I can see them being useful.
    Originally Posted by Mike Hopley View Post
    In which desktop platform situations do you see this as being useful?
      Reply With Quote

  10. #10
    Senior Member Mike Hopley's Avatar
    Join Date
    Jul 2009
    Posts
    712

    Default 21 Jun 2011 @ 15.41

    quote
    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 View Post
    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.


    quote
    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.
      Reply With Quote

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •