content distribution

for optimal flow and readability.

An overview of how I go about distributing content, which isn't necessarily how it should be done by any standard. Anyone who have read any of my stuff knows that I don't really follow standards – not even the ones I have made up myself.

No strict rules will survive for long in my mind, as no matter how good they are they will sooner or later become unnec­es­sary and unwanted re­stric­tions.

That I at times may seem to be a little less serious than some people appre­ciate in the way I ap­proach, and write about, even quite serious matters, may be true. I have never seen the point in lowering my mood as if the sky was falling – even if it is.
Consequently, if an article allows for humor it will get some, and if it allows for illus­tra­tions some will be added. Whatever gets in will in turn affect how content gets organized, which is what this article is all about.

As articles, postings and notes are completed and getting ready for pub­lish­ing, they end up as stand-alones in the sense that content distri­bution vary with what I think works best for the individual page. How other pages on site are organ­ized doesn't matter – blog­posts and design articles usually have little in common.

Only the overall visual frame­work and basic content-carrying code behind it all, remains the same from page to page – pretty much set in stone for a given site.

splitting up content.

Some pages and sites have so much separation – space – between bits of content, that space almost becomes the main content. Other pages and sites cramp so much content together in a small space that it becomes really hard to keep track of where you are.
Some kind of middle-ground is what I'm aiming for when I adjust content distribution visually down a page, and it is all about achieving that optimal flow and reada­bi­lity I like to see as visitor/​user.

feed the trolls 
you should not.
-- Yoda Long sections of para­graph after para­graph work well in some cases, but I do like to put in visual breaks and spaces in longer sections to make subject-changes in written content easier to track by eye. A well­placed image may do the trick, although I may acci­den­tally have chosen the wrong image here.

As I primarily use microtuning on elements that need visual adjustments, there are few limitations in what can be achieved without updating the style­sheets. However, having hundreds of options to play with isn't the point.

The point is to make the visual content-flow work for the reader, based on what the actual content is in each case. “Less is more” in nearly all cases, but it is easier to put the various puzzles together when there are more than one way to achieve particular visual results.

I have a huge series of course and fine definitions for vertical and horizontal adjust­ments in the style­sheets, and apply them as classes where I find it useful and/or necessary when I read through my articles before publishing.

As I also use basic screen readers to check on content-flow without the visual cues, I get a fairly good idea of what will work for most people, both visually and otherwise.

a few intermixed examples…

Pulling in margins for whole paragraphs is used mainly as focus guide – “a space to align and rest ones eyes on before continuing down the page”. That's maybe not exactly how “use of margins” are defined by various schools of writing styles, but that's how they work for most readers.

Large and small vertical spaces between paragraphs, and sometimes inside para­graphs, are also frequently used as guides. Achieving a kind of visual rythm down a page or section can help a lot on readability, and the rythm on screens can be allowed to deviate from the actual content-flow where that makes sense.

Auto-lineup of paragraphs alongside small, floating, images, may work here and there. I do like to sprinkle small, more or less neutral, images throughout text-rich articles, but it is of couse important that the images used don't contradict the written content. The “pretty relaxed” image used for this demo will fit in almost any­where.

The “auto-lineup” (for larger screens) above is simply one of several Block Formatting Context techniques applied to the paragraph or other element. Which BFC-technique to use depends on whether content shall overflow the BFC-box, or not.

Increased font-size, often combined with extra text-softening, can make whole or parts of paragraphs stand out to catch the eye. Definitely not an effect that should be overdone, but I do like to use the slightly enlarged and softened text at keypoints because it is so easy on the eyes.

Having a generated content fly-out with text in the text-flow, might work to attract attention to a subject and break the flow. It is however one of the less reliable methods we have at hand for now.
As the fly-out text isn't part of the flow, but most definitely is visually in the flow, both its content and where it is derived from matters greatly. Besides, not all screen readers will handle generated content correctly.

Such fly-outs are not well suited for small screens IMO, as there is no space to “fly-out” on. Additional styling to make them stand out in the flow without actually “flying out”, solves that “minor problem”.

Generated content as design elements has become very useful for all kinds of non-essential design details on all media. Emphasis on “non-essential” here, as one can never be sure if all generated content details will show up as intended across browser-land.

Most, but obviously not all, of what works on the bigger screens, is reflected on the smaller screens. Scale and complexity goes down with reduced screen area, but still plenty room for imagination and thoughts related to flow and reada­bility on the smallest screens this site covers.

a severe case of classitis ?

A case, yes, but severe, no.
It is a calculated mix of basic element styles, and adjustments to those styles in the form of more or less universal classes. We all use them, and I have only taken it a little further than most.

Looking past the slightly odd mix I have spread around on this page just to show how things may work, the keywords are “simple” and “unobtrusive”. If the visual effects are too notice­able and/​or disturbing, some­thing clearly hasn't been done right.

It is easy to go overboard and show off with overly styled effects everywhere. Pretty soon every­thing will look boring at best and disturbing at worst, and neither is the sign of good web design.

Moderation regarding visual details and effects, will pay off in the long run. Besides, very few visitors care about such things anyway, unless some of it gets in the way…

sincerely  georg; sign

Hageland 27.jul.2016
last rev: 02.aug.2022 advice upgrade advice upgrade navigation