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

  • 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 Mar 17 '14 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 Mar 17 '14 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 Mar 17 '14 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 Mar 17 '14 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 Mar 17 '14 at 7:29
up vote 6 down vote accepted

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.

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

  • 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 Mar 17 '14 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 Mar 17 '14 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. – 4rchit3ct Mar 17 '14 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 Mar 17 '14 at 13:30
  • @MarjanVenema No, not really. I'd keep increasing margin/padding if the viewport expands further than 1900 px. – 4rchit3ct Mar 17 '14 at 14:17

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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