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 unnecessary and unwanted restrictions.

That I at times may seem to be a little less serious than some people appreciate in the way I approach, 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 illustrations 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 publishing, they end up as stand-alones in the sense that content distribution vary with what I think works best for the individual page. How other pages on site are organized doesn't matter – blogposts and design articles usually have little in common.

Only the overall visual framework 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 readability I like to see as visitor/user.

Long sections of paragraph after paragraph 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 wellplaced image may do the trick, although I may accidentally 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 stylesheets. 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 adjustments in the stylesheets, 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 paragraphs, 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 anywhere.

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 readability 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 noticeable and/or disturbing, something clearly hasn't been done right.

It is easy to go overboard and show off with overly styled effects everywhere. Pretty soon everything 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

side notes.

writing about the small stuff…
… and touching on Star Wars.

Regardless of profession: most of what we do and have to master, is “just small stuff”. Writing about minute details is sometimes more difficult than to draw up the big lines for a project, but at least as useful IMO.

It would be easy to take an academic approach when looking at the many small techniques – the bread and butter so to speak – that makes up a complete web design.

Listing up the code and details behind everything, might be useful for a few front-end coders. It would be oh-so boring for the casual reader though – including me.

Because there are so many ways to achieve anything in web design, hinting at how I do things should leave enough room for others to figure out how to do whatever they want to do, without resorting to copy and paste for everything.

Not that those who want to cannot draw whatever they like from my HTML sourcecode and CSS. Not much to gain by going that route though, as all my code is a qualified mess put together for functionality rather than readability and ease of understanding.

It is of course how I use this “mess” that makes all the difference, and some of those uses are presented here. Maybe you can see them?

“Composing riddles, are we?”
Trying to make excuses for writing nonsense, I guess, but without much luck. Should have chosen another profession most likely, but according to the master: do or do not – giving up is not an option.

Playing around with the small stuff in web design, is a wonderful relief from boredom – beats Pocemon Go and social media, and something always comes out of it. This is how I come up with new ideas, or at least it is one way…

While I am gathering and “cultivating” a boatload of fun Star Wars characters for my collection of small images, whole series of new and destructive ideas pass my creative mind. One day some of them may end up on a web page near by, or maybe further away.

What you won't find on a web page designed by me, is “dancing and singing” (animated) elements out of context. I ditched attention-catchers over a decade ago, and no way I'll let that stuff pollute a design of mine ever again. Go watch a video for moving pictures … that's what I do.

The combined force of HTML and CSS is with us, and we have yet to reach their limits and test their ultimate strengths. That some browsers' support still is a bit behind, is unfortunate, but the problems certainly aren't as many or as grave now as back in the days when IE6 reigned.

Now that all those hindrances are blown out of the way, and browser “A”, “B” and “C” pretty much act the same for all the basic stuff, we can dust of and polish up the old techniques, combine them with any new ones, and make it all work to our advantage across browser-land without too much debugging.

It is literally like a whole 'nother universe for an old web dev. Now we only have to make sure there are no destructive forces outside our control that may take the open web back into the dark ages again.

carefully selected quotes…

Expertise becomes a real nuisance when it gets in the way of quirky ideas that may lead to real progress.
— Georg

Once a problem is solved, its simplicity is amazing.
— Paulo Coelho

… ninety percent of everything is crud.
— Theodore Sturgeon

Never overlook the power of simplicity.
— Robin Sharma

Never in the history of man has so many had so little worth saying and so many places to say it.
— Georg

moving pictures…

The Star Wars character images presented above, are moving in a sense. They are floats lined up sideways using pixels for positive and negative margins, but they are also given relative positioning offsets in percentages of container-width for fine-adjustment. A max-width in percentage of container-width, tops it up.
The idea is that the images will auto-adjust in a certain way relative both to the container edges and the text, to make the line-up look like I want on all screens this fluid design may end up on.

This “unobtrusive imagery” is a perfect example of how I combine styles on elements to achieve the intended visual effects in a very flexible framework. “Pixel perfection” is totally irrelevant – it just has to look right.