1

How do you position a relatively narrow paragraph (optimal paragraph width: http://www.ronswebsite.com/blog/optimal-column-width-for-websites) within a wide (e.g. 1100px) website, so that it looks aesthetic?

For example, if I have a full 1100px width menu bar and a narrow text column right below it, the blank margins on the left and right of the text column would be too wide and making it all look unaesthetic.

I've tried some solutions such as using multi-column layout or placing borders on the left and right of the blank margins (they create the impression that there's content from end to end) but I am looking for some better ideas.

  • Does the site have any other content you can use to frame it? Look at this site for example. Your question is in a column only 660px wide but it is framed with the up/downvote element, the related questions, and the comment/answer area so that it doesn't look like its floating alone in whitespace. – DasBeasto Mar 29 '16 at 12:49
  • I'd argue that pixel width isn't the right metric since that doesn't account for font size. I always learned that an average of 13 words per line was optimal. And, of course, the width of a 13-word column changes as font size changes. – Ken Mohnkern Mar 29 '16 at 13:08
  • @ DasBeasto - the site doesn't have any other content – drabsv Mar 29 '16 at 15:14
  • @Ken Mohnkern - that is correct, but I am referring to the general problem of dealing with extra large margin spaces on both sides of the text column; the pixel width I mentioned in my question was just to serve as a reference point. – drabsv Mar 29 '16 at 15:16
  • In many cases, having a fixed width menu bar given the amount of content you have looks much nicer than trying to make the content look nicer with a long menu bar. – Michael Lai Mar 29 '16 at 23:51
2

On line length, I'd think the jury is still out. There are studies that conclude longer lines are easier and faster to read, but if you ask people they'll say they prefer narrower columns (probably influenced by our experience with book paragraphs being as wide as the book itself).

On paragraph length and readability by a Google Cognitive Scientist: Google I/O 2013 - Cognitive Science and Design https://youtu.be/z2exxj4COhU?t=23m29s

Examples on how to position a narrower column on a wide viewport can be found here: http://www.ronswebsite.com/blog/optimal-column-width-for-websites/ (Not endorsing the article's research, just sharing the examples)

Also, take a look at Google and Facebook (and even Stackexchange) as those sites are used by millions and even if they're not the perfect width they might be an excellent reference and source of comparison for users, so you'd gain by letting users feel it is a width they're familiar with.

| improve this answer | |
1

Rethink your content strategy.

If you have a wide header but very narrow content then something has to change - If the entire site is like this then you might simply want to consider narrowing your header. If, on the other hand, most of the site fills the width of the header then you probably want to rethink the content on those pages - Add more pictures, expand the text... etc.

| improve this answer | |
  • Expanding the text is not an option for me in this case, as the idea is to stick to some optimal width of text paragraphs. What I have tried is using a two-column layout, it does the job, I've just been wondering if there's not a more elegant solution. – drabsv Mar 29 '16 at 15:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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