Suggest good max-width for fluid width design

  • My websites uses fluid width design. The CSS looks like this:

    #wrapper {
        min-width: 960px;
        width: 90%;
        max-width: 1200px;
    }
    

    The min-width must be 960px but I am open to suggestions about width and max-width keeping in mind that:

    • Majority of visitors have 1366px or wider screens
    • There is a separate version for mobile website (so no need to go responsive)
    • I need some left and right margin for background to show
    • The website uses two column layout (25% + 75%)

    Have you looked into Twitter Bootstrap and the responsive Grid system it offers? It, or perhaps another pre-packaged CSS library, may provide for your needs.

    I usually set widths in terms of ems (or rems), and I think this is fairly common practice these days. This gives you more control over the text line character count. If you set the width in px, and the user has set the browser to have a small font, the line character count could be higher than is efficient, and if set to a large font size the line character count will be smaller. If the width is set in terms of ems the line character count will remain the same (more or less) regardless of the browser's font size setting.

  • DA01

    DA01 Correct answer

    8 years ago

    Majority of visitors have 1366px or wider screens

    But note that screen size isn't necessarily browser viewport size

    There is a separate version for mobile website (so no need to go responsive)

    What about tablet users? Do they get the mobile version? Or the full version? It's not necessarily bad they get the mobile, but if the mobile doesn't scale up to tablet screens, and your site doesn't scaled down, you might be frustrating users that use tablets.

    There is no right answer to your question, we can merely toss out various numbers, so it's not the best question for this format. That said, the main reason to go with a fluid layout is to accommodate more browser size preferences than if it were not fluid, so I'd consider setting your min and max options as low and high as it makes sense to based on the particular content and the readability of said content at various widths.

    _"It's not necessarily bad they get the mobile"_ - I disagree. It _is_ bad. Almost everyone is using tablets as a replacement for desktop-computers (At least when it comes to internet browsing). Offering mobile versions is (in my opinion) only ok if your regular page uses flash or is very javascript-heavy.

    The rest of your answer is of cause still valid and very reasonable. :-)

    If I could, I would give you +10 for "note that screen size isn't necessarily browser viewport size". I have seen the argument of "screens are very wide" way too often in articles, and none of those authors even mentioned the possibility that a customer might not want to devote all of his screen estate to a single web page.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM