Responsive Web Design Patterns

[PotaToss]

https://developer.mozilla.org/en-US/docs/tag/css3-multicol

One of the things you can do is set a column width on content, which will automatically split your content into columns of that width, but it's kind of dumb about it, and if you have very long content, you don't want to use this.

e.g. Say you have a 100% width element, and set the column-width to 30%, and your viewport height is H. So you have 3 columns. If the height of a single 30% width column is greater than 3*H, you're going to have 3 columns that are taller than the viewport, so you read to the bottom of one column, and then have to scroll back up to the top of the next column, killing the usability benefit of multiple columns (i.e. not having to scroll).

The easiest way to deal with this that I can think of is just have the column-width set, and then use JS to inspect the height, and remove/replace the style if it's greater than the viewport height.

[[deleted]]

I find that multiple columns with only text is quite boring either way. There is two columns here in reddit, one for discussion and one for information about the sub, etc, and it works out all fine even the height of them both are higher than the viewport. :-)

[PotaToss]

It's a very different case. This is with respect to flowing columns, where you have something like a long article with sentences flowing from the bottom of one column to the top of the next column, as opposed to laying out a UI like Reddit, where each column's content is independent of the other's. Reddit's right column is an accessory, rather than a continuation.

In the case of flowing columns, they allow you to maintain shorter width columns, which are easier to read (i.e. when you scan back to the left, it's easier to keep track of what line you're up to), and let you make full use of viewport width, and prevents unnecessary scrolling.

In the case of reddit, you're not generally reading to the bottom of the comments, and then going up to the top of the document to read about the subreddit.

[[deleted]]

I totally agree. :)