… 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.
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.
sections in this main column are redefined to line up with right edge of
grow left up to
max-width and the variable
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
Horizontal line-up of content-carrying elements for one-column design, is not upgraded yet. Nothing is seriously broken though, so I can leave it 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
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.
13.sep.2016 - minor revisions.
25.sep.2016 - minor revisions.
last rev: 25.sep.2016