design upgrade

… the falcon is landing.

I am not sure what to write about the major design upgrade this site has undergone lately, when apparently nothing has changed visually. All those hours, and nothing to show for it?

Oh well … this upgrade is not about where all the various visual components are and what they look like, but rather it is the latest iteration of how to get these components to where they are supposed to be.

The last thing one should do in responsive web design, is to count pixels and try to perfect line-up of visual details. Yet, that is exactly what this upgrade is all about … dynamic pixel-precision.

In essense the upgrade consists of a whole bunch of modified CSS rules, to simplify and tighten up how things line up in a highly flexible page-layout. Predictability under stress is the keyword here.

Elements will get out of line when web-designs are stressed, and eventually something will break apart. Having an HTML / CSS structure that holds its own and is perfectly accessible also when put under severe stress, is my goal.

To give this almost unnoticeable but very important design upgrade a name, I have chosen to call it “peregrine”. The way this upgrade makes visual design-components snap into place in good order also under stress, makes that a fitting name under the overall “virtual nature” design theme.

To expand: a peregrine is a predator, and on the internet weak User Agents and over-confident web designers like myself are its preferred prey.

the devil is in the details.

This upgrade is a continuation of the work done to improve the design for font resizing in browsers. The idea was, and is, to make everything work smoother in better browsers, without adding a bunch of dummy-containers into the source-code, or cause failures in slightly older browser versions.
Really old browsers are no longer supported on this site, which of course simplifies matters a great deal. Web-browsers should be upgraded too…

The built-in tools on site helped a lot during the upgrade process, but in the end it came down to thorough testing in browsers with all their various user options – the options we designers more often than not prefer to ignore.

Line-up of elements in the visual header is improved, and the vertical line-up of main column is self-adjusting to that header depending on window-width, font size settings and other browser-induced factors.
Creates more predictable space for the main headline image (the landing falcon on this page), and better balance between that image and the header elements.

The sections in this main column are redefined to line up with right edge of article, and grow left up to max-width and the variable article-width.
Keeps gap between main column and side column more constant in width, and main article more centered in page on wider windows.

Horizontal line-up of content-carrying elements is fixed, with zero-offset side-edges for content-areas.
Makes horizontal line-up of floats (mainly images) much easier when populating articles.

Horizontal and vertical line-up of sign-off (signature) and date paragraphs at bottom of main column, is improved by letting them grow wider and overlap each other on narrow windows.

Some page-zoom / text-only-zoom related design details left to optimise for two-column design. Mainly areas where browsers do not quite agree on how scaling text and page affect px/em/rem units respectively.

Horizontal line-up of content-carrying elements for one-column design, is partly upgraded by october 2020. I can leave the rest as is while I go through ideas for a more thorough SSR-upgrade.

A number of designer bugs were of course squashed in the upgrade process. Still some clumsy code left in the design from early on (2011), but it's doing little to no harm.

the peregrine is landing…

… but it cannon rest on its branch for very long. Always something that can be improved upon on this site.

A whole range of peculiarities and differences in how various browsers handle simple web design constructs, makes optimalization an ongoing challenge.

As support for more complex CSS isn't leveled across browser-land, optimal solutions for all rendering issues can not be found, or if found they cannot be used. Stylesheets behind this site therefore contain more rule repetitions than I like, since properly nested rules and calculations are likely to break in a number of browsers.

This carefully crafted visual design can most certainly take a few more rounds of behind-the-scene upgrades without failing. So, confident in the knowledge that I won't run out of upgrade options around here anytime soon, I can sign off this short upgrade note in a good mood.

sincerely georg; sign

Hageland 12.sep.2016
last rev: 10.oct.2020