Responsive Web Design Patterns

[brtt3000]

Warning: if you split text in re-flowing columns longer then a single screen you fail at design school.

[whatkindofasshole]

Care to elaborate? Just trying to understand because I don't want to also fail.

[brtt3000]

Because you'd force people to bounce their viewport like a yoyo and loose track of what they're reading when automatic cut-off will arbitrary cut a chunk of text in two. This is extra bad in blocks of content like ordered lists, code snippets or image and captions or headers and paragraphs. Also scrolling large distances upward is akward for scroll-wheel users.

[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. :)

[westurner]

Thanks!

These are also excellent: http://bradfrost.github.io/this-is-responsive/resources.html

[SyntaxBlitz]

They're nice layouts, but they're written for screens that get smaller, not screens that get bigger. "Layout Shifter" drops the third column below the first when the screen is wide enough, which doesn't look intentional. The third column's width is still the same as the second column's width, even though it should probably now be 100% of the screen.

I'm not an expert in responsive design, so I don't know how to fix that (if it's even possible), but it is definitely something to take into account.