reformatting design
… and adding more flexibility.
A design should be pretty stable and easily recognisable across the entire site, so as not to confuse visitors.
The above is one of the “rules” I have defined for my design. Doesn't prevent me from introducing some page-by-page variables to the site-wide mix though.
Instead of introducing a new design every other year or so, I rather reformat, redefine and refine various
aspects of existing design from time to time.
Lets the site evolve naturally without losing its unique appearance, and keeps me from getting bored.
task at hand
Vertical adjustments of content carrying elements relative to the header area, has not changed much since this site was launched. Only the header area itself has evolved a little over the years.
The ability to push or pull the main headline vertically as found necessary, and thereby move the entire main column up or down, has been
built into this design from the start. Line-breaks in H1
does of course also push main column down.
H1
vertical position also gets adjusted with window width, and font-size of course, to make the most out of available view
area on smaller screens.
The side column has been vertically frozen so far, as too many elements in the header-area are positioned relative to it. I recently found time to change that, without modifying the easily recognizable visual header.
complications
A whole boatload of visual elements in the header area use the exact space above main colum and side column as positioning references. Any changes to the actual top edges of these elements will upset everything up there.
All those header visuals are positioned generated content – ::before
and ::after
, and there are no
alternative elements to hook those visuals up to. The source code is very skinny.
Another complication is that the side column's background is also generated content, positioned from much earlier in the source code. That background, with borders and all, only appears to follow the side column's content.
Once I got my head screwed on right, I realized that this separation between content and visual background was to my advantage. It is after all “all about appearance” in visual design, and content doesn't have to be moved around by its container-edges.
visual magic
The side column's content container starts at the exact same height on all pages, but the visual part of its content can be pushed down
relative to that upper container-edge. So, by modifying margin-top
on first visible headline inside the
side column container, all content after it gets repositioned.
One class
added in source-code to initiate the “magic”. It is a page-by-page lineup alternative, and will only
be used where necessary.
As the side column's container doesn't move, and non-visible content nearest to the top of it doesn't move either, all positioning in the header area relative to these elements stay intact. An invisible gap is opening up above the first visible headline in the side column when I decide to lower the side column.
Note my use of visible vs. invisible, as I use an off-screen technique to make some content invisible
but accessible and reusable – an old technique of mine that was built into this site design from the start, and which leaves
invisible “tails” that take up no space across the page.
These “tails” was put to good use when I needed elements to hook up generated content to. By not touching these invisible
“tails” while reformatting the side column, all those relations stay intact.
The generated content making up the visual background, also gets pushed down by the same amount of margin-top
. This makes it “skip the gap” in the upper part of the actual side column, and line up nicely with
the visual. Illusion complete.
I have also provided for those rare cases when lineup of background and foreground shall differ, by having a class
that only
controls background. Example: a caveman's look…, where foreground is left at default and
background is pushed down.
I use rem
units for those margin steps to make sure content and background always line up in sync. Other units would work,
but apart from px
they may “unsync” if I change font-size for parts of the design in the future.
Additionally, as the visual background is absolute positioned, a slight adjustment… top: calc(-1px - .25vw);} … makes the visual alignment match more to my liking at all window widths.
Add outlines to reveal actual elements and the invisible gap on top of side column. (That's borders in Firefox, as its outline rendering is useless in complex designs.)
pause, to think
I always have some improvement projects at the back of my mind while working on this site. Some are isolated and can be implemented in an evening – like the one described above, while others require proper planning and lots of testing.
Styles for mobiles – or “Small Screen Rendering” (SSR) as I prefer to call it – should be given a full reformatting and design upgrade. So far I have only modified styles for larger screens for SSR, and could do a lot more for this format.
Might also be time to leave out the smallest two-column styling, and go directly to one-column SSR styling at a wider window width than I have now – around 640 me thinks. That's the easy part – about ten lines of CSS to change, and it can wait till new styling for SSR is ready for launch.
Within the field of “responsive design” there is still so much to explore, test and implement. The “adaptive” method works, but having worked with “fluid” for a decade and half has set my preferences for Conditional Elastic™.
So many ideas, so much time to waste.
sincerely
Hageland 04.dec.2017
last rev: 09.dec.2017