white space distribution

… doesn't always measure up.

Introduction: have been on one of my infrequent round-trips to see if any new and ins­pira­tional solutions have been intro­duced to web design lately. Not much came up.

After going through dozens of dedicated design sites and hundreds of others, I con­cluded that either I am totally out of touch – plausible, or web design has gone full circle too many times – also plausible.
Either way, my folder for new and exciting stuff is rather empty at this stage, and I'm bored. Desperately grabbing for straws, I decided to go with some old and proven one more time. One can go wrong so many times that one ends up in the right place by accident…

White space distri­bu­tion is an important subject in web design. It is one of those factors that hardly ever measure up to everybody's wishes and expec­ta­tions.
Some will always think there is too much white space, and some will always think there is too little.
To me, it either looks about right in context, or it doesn't. Measuring screen pixels may provide solid numbers, but won't ensure a more optimal out­come. Besides, we cannot please every­one anyway.

I have touched on this subject before (see: content distri­bu­tion for optimal flow and readability), but, as there are so many “right” and “wrong” ways to organize content distri­but­ion in web pages, a revisit should be in order.

conditional white space distribution

Changes in visual distribution caused by presence and absence of unused – white – space in the text-flow, provide cues beyond the text itself that all who can see reasonable well will pick up on. Our “caveman” brains are hard­wired to quickly observe and hang on to the tiniest visual cues within our range of view, and may even imagine some where none exists.

That we at times may read more, or some­thing totally different, into visual cues than was intended by those who put them there, is in part why some solutions work better than others. Good use of horizontal and vertical white space always has an edge.

My examples (below) are simple because this isn't about coding up a particular solution, but rather about what one wants to achieve – the end-result across a multi­tude of screen sizes. Well-working white space distri­but­ion is just one factor amongst many…

preserving content space…

Allowing for plenty horizontal white space on wide windows/​screens, and letting content take over more or less all space on narrow windows/​screens, is most often an acceptable tradeoff in re­spon­sive design. Some screens are simply too small to allow for much unused space.

Almost no horizontal white space left on very narrow screens.

preserving white space…

Preserving white space until one literally runs out of space, is an option albeit not one I person­ally find much uses for. There are those rare cases though…

Have run out of horizontal white space on very narrow screens. Defaults to same as previous example.

un-preserving space…

Examples 1b and 2b show what happens when one tries to “make better use of space” by letting content run into and occupy the space along­side the right-floated text boxes.
Such “space saving” may work in some cases – text along­side images and flyouts for instance, but with text running along­side text (as in my examples) it isn't worth the visual clutter and messed-up reading order it creates.

Should be totally unnecessary to mention that none of the above makes much of an impres­sion on those who rely on AT to “see” our web pages. We better not rely on white space distri­bu­tion to convey more important cues … yet.

lost in space?

Well, at least all bits and pieces and the allocated spaces in my examples line up visually as intended, and show what I wanted them to.

That conditional white space distri­bu­tion has its uses, is beyond doubt. Not that I think anyone doubt that, but it is way easier to find fixed than con­di­tion­ally variable white space distri­bu­tion variants on the web. Something may have been “lost in trans­la­tion” during trans­fers from fixed to more re­spon­sive designs.

As I finish off this article, I find that I have actually learned some­thing through the process of writing it. To me that is more important than its release.
If I write and release a few more articles, then who knows…

sincerely 

Hageland 18.oct.2017
12.sep.2020 - minor visual shuffle.
last rev: 12.sep.2020