6

So when creating a responsive design, how big should the maximum width of the container be?

Improve this question
7
  • 1
    Your question is a bit too broad and dependant of circumstances, we could say, always use 100% to use al the space, or 80% so you give some room and more space, or 90% but no more that xxx pixels if you are going to do..., etc If you can describe the reason or content of the page, it's easier to narrow down the answer, give as much information as possible.
    – PatomaS
    Commented Mar 17, 2014 at 6:24
  • @PatomaS I didn't have anything specific in mind here, but let's assume that it's a has a lot of text, like a blog. Or an SE site.
    – bjb568
    Commented Mar 17, 2014 at 6:28
  • 2
    This question seems to be a duplicate of this earlier question. As noted in that issue; it depends on the content. Since you mentioned long-form text content, you should probably also read this question about maximum line-length.
    – Kit Grose
    Commented Mar 17, 2014 at 6:31
  • @Kit This seems pretty vague… you can make it big, but it depends on content. The question is more vague than this: "what should the width be?", not "what should the max-width be?". The second link is helpful.
    – bjb568
    Commented Mar 17, 2014 at 6:36
  • 2
    I think the best you'll find is the max line length debate. There's more to it than that, though; there are people who feel that every pixel not dedicated to content is a waste of their hardware—high information density makes them feel special/elite. Some users use a big screen because it allows them to have the font size much larger to help with poor eyesight. Some use a big screen because they want to do lots of things at once. Normally a big screen means the user is further away so there's a font size implication too. It all comes down to "what behaviour would most benefit my users?"
    – Kit Grose
    Commented Mar 17, 2014 at 7:29

2 Answers 2

Reset to default
6

The size of your website should be relative to your content needs and the user's viewport. Sometimes that means limiting the size of website to XX pixels. Sometimes that means a 100% width.

A big issue is line length. Copy lines should be 45-75 characters long, with 66-characters regarded as the ideal. If you cap you lines to that size, yet have a base font-size of 14pt, long blocks of copy are going to fill lost among a lot of negative space. To counter this you can increase your font-size to 18 or 21pt. Yet even there though you can't go too much larger because your vertical height will start to be too large. Which means users will have to scroll more.

Just remember that if you're making your website 100%, you need to scale things accordingly - not just the grid. Making your website's layout responsive is important, but that's just a facet of RWD. Making your content scale accordingly is more important.

Improve this answer
1

A web page ideal width is the relative size 100 percent. It would make a great opportunity for you and your design team to work on mobile friendly or responsive design. It a tough approach since you have to address screen that are extremely wide, but implemented correct it is your best option.

In detail you can add left and right padding, add another column when viewport expands, or whatever your design team finds pleasing. The same idea works when the viewport gets smaller; move a column, decrease padding…

enter image description here

Improve this answer
9
  • 1
    That's what I was thinking. On a huge monitor, the puny 1kpx of SE doesn't suffice. And large margins are welcome (at least I like it). I guess the huge line length problem can be solved by using a complex grid with small tiles, large margins, and large(r) text.
    – bjb568
    Commented Mar 17, 2014 at 7:30
  • Just wondering: in the very wide view layout padding between columns/cells is not going to help to reduce the line length of the wide text portion. Adding or increasing margins in this portion is going to mess up the (perceived) grid. So what can you to restrict the width of all text blocks to a readable length apart from page margins? The only thing I can think of is to have columns within the wide text block, but that can really mess up the read experience with longer texts, as you would have to scroll up and down to go from one column to the next. Please help my foggy brain here...
    – Marjan Venema
    Commented Mar 17, 2014 at 12:06
  • 1
    @MarjanVenema If you want to limit line width to 80 characters, you need to add more columns or increase padding. You can always have fixed width on columns and add/remove columns based on viewport width.
    – Benny Skogberg
    Commented Mar 17, 2014 at 13:08
  • Ok, I guess I am hypothesizing a bit, but what if, in your big/wide example, the site simply doesn't have any more blocks of content to shift around and the viewport still gets wider. Would you then shift the content blocks in the top content row down to the left or right of the wide content block? Could work I suppose.
    – Marjan Venema
    Commented Mar 17, 2014 at 13:30
  • @MarjanVenema No, not really. I'd keep increasing margin/padding if the viewport expands further than 1900 px.
    – Benny Skogberg
    Commented Mar 17, 2014 at 14:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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