… 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
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.
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
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…
10.oct.2016 - added some "relevant links".
02.aug.2022 - updated / revised text to reflect changes in stylesheets.
last rev: 02.aug.2022