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 intro­ducing some page-by-page variables to the site-wide mix though.

Instead of introducing a new design every other year or so, I rather refor­mat, rede­fine and refine various aspects of existing design from time to time.
Lets the site evolve naturally without losing its unique appear­ance, 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 verti­cally frozen so far, as too many elements in the header-area are posi­tioned relative to it. I recently found time to change that, with­out modifying the easily recog­niz­able visual header.


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 every­thing up there.

All those header visuals are positioned generated content – ::before and ::after, and there are no alter­na­tive 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 refor­mat­ting and design upgrade. So far I have only modi­fied 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 “respon­sive design” there is still so much to explore, test and imple­ment. 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  georg; sign

Hageland 04.dec.2017
last rev: 09.dec.2017

www.gunlaug.comadvice upgradeadvice upgrade navigation