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.

1a: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime…

1b: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime…

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…

2a: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime…

2b: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime…

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  georg; sign

Hageland 18.oct.2017
last rev: 19.oct.2017



www.gunlaug.comadvice upgradeadvice upgrade navigation