Chris and Joni listed some "methods of swaying" — ways of growing a layout that preserve aesthetic quality without media queries having to be invoked:

* Managing whitespace
* Proportional scaling
* Stretching (flexing)
* Cropping
* Moving elements off screen

Any others? Can methods be used simultaneously? Will thinking about combinations of methods lead us to new vocabulary? Do peripheral actions (managing whitespace, cropping) constitute responsiveness, even if core pieces of a layout are not fluid?

I think managing whitespace is the big one here. Too much or too little white space is what leads to relationships between layout components breaking down, which is what leads to the need for proportional scaling, stretching, cropping, moving, etc.

I've found that using some 'full-width' elements (elements that stretch to fill the canvas size) can be useful in 'anchoring' a design, which helps prevent fixed-width elements (like columns of text) from feeling dwarfed by whitespace.

I'm a big believer in content-out design, but I'm starting to wonder is there still a need for some elements that are tied to the canvas dimensions?

What's bugging me about managing whitespace the way we currently do is it kills the… "fullscreeniness" of the design, breaking the link between the design's proportions and the canvas's proportions.

Fullscreeniness leads to higher beautifulness and interestingness!

Also, I've noticed that adding vertical whitespace feels better than adding horizontal whitespace (dl.dropbox.com). More fullscreeniness preserved.

Right, the point is to make the layout feel like it was made specifically for the current canvas size, and just centering a layout means it soon feels too small for the canvas.

However, if you took your left sketch and had a single full-width divider line somewhere, I bet that would make a huge difference in anchoring the layout.

That does help some — the header at thegreatdiscontent.com is a good example — but to me that feels just like putting a band-aid on a broken arm. :p

I'm convinced that there's something way more fundamentally wrong with aesthetics in web design. Like we're playing catch-up with print design by doing these little compromises, and at the same time missing something that would let us match (or even exceed) its beauty.

Do viewport dimensions matter, aesthetically?

I'm not sure I see it as a compromise... layouts are all about proportions, the question is what is proportional to what? For example, should the nav be sized proportional to the content size, but positioned proportional to the canvas size?

I'd love to see a comparison of print layouts at different sizes... everything from A0 to A8, to consider what techniques traditional designers have used to bind their layout to the canvas size.

My gut says any viewport dimension not exceeded by the layout inside it matters. If the layout pushes out of the viewport through one of its dimensions, it kind of becomes "infinite" in my mind and stops… mattering. So:

(Oh boy. This is getting deep.)

- in vertical layouts the horizontal dimension matters
- in horizontal layouts the vertical dimension matters
- in infinite canvas layouts like fieldnotes.iancoyle.com neither seems to matter

It's kinda like the user is looking at our canvas through a camera lens... but its our job to create a scene that has great composition no matter how the user frames the shot.

FWIW, I always get a bit disoriented by layouts that require navigation along more than one axis. It requires too much thought just to browse.

Taking a two column vertical layout *intended for reading* as an example, and assuming it looks good in a given viewport, then let's imagine how it could behave as that viewport narrows.

As the viewport narrows:
# Outer horizontal margins tighten until they reach a comfortable minimum, after which they remain at a fixed width
# When margins become fixed, content is forced to flex; the columns' measures become shorter until they hit min-width
# The gutter is fixed, maintaining a relationship with the fixed-state outer horizontal margins
# When neither margins nor content can flex, the layout gets cropped

So:
* Two kinds of whitespace management and two kinds of flexibility (one weak, one strong)
* Horizontal viewport dimension matters

You're not alone. I can't think of many examples of sites or apps where bi-dimensional scrolling has felt intuitive.

The old Twitter (Tweetie) for iPad did it pretty well (thewwwblog.com). Can anyone think of other examples?

I think more websites should adopt horizontal scrolling. vertical scrolling makes a mockery of widescreen displays. You can naturally fill up an entire screen of any size with scrolling columns. Just look at the new Myspace demo video: new.myspace.com