Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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%)
share|improve this question
1  
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. –  Evil Closet Monkey Dec 12 '13 at 17:58

2 Answers 2

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.

share|improve this answer
    
"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. –  L. Möller Dec 12 '13 at 9:56
    
The rest of your answer is of cause still valid and very reasonable. :-) –  L. Möller Dec 12 '13 at 9:57
1  
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. –  Rumi P. Dec 12 '13 at 12:28

This is my input, and relates to the above.

  • Your website should have no wasted space on a 1920 monitor, fullscreen.
  • Your website should have no wasted space on a 1920 monitor, half-screen.
  • No horizontal scrolling(Removes vertical space)
  • Factor in the interface chrome.

So perhaps your CSS Should be

#wrapper {
  min-width: 920px;
  width: 90%;
  max-width: 1920px;
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.