design theme

virtual nature.

OK, so you've got it already. The web is a virtual space, and some images displaying elements from nature are spread around. Well, yes, that's all it takes to name a design-theme, so why complicate matters?.

I want content to stand out, so I left out almost all colors from the design itself. I love colors, but not when they distract from main content.

One of my goals is to get the most out of the latest browser versions, while preventing older browsers from revealing their worst weaknesses.

I hope you use a latest‐generation browser with good CSS support, or else parts of my design may not show up or may end up in the wrong places.

UPDATE:As the last version of Internet Explorer has been dropped by Microsoft (in 2021), I have quit adding new patches for it. Old patches will stay for a while.

mainly gray‐scale

As with all CSS based web designs, the smallest alteration to code or an image can completely change appearance – and I do like to change things from time to time.

Most of the time I prefer the slightly retro style based on tones of gray, with a tiny amount of “structure”. Gray isn't boring when applied right, and the design is far from “vanilla”.

Borders and/or balanced amounts of shadows increase division between content blocks. I am always fearful that too much 3D effect may harm the design, but I think I got it about right.

The blue'ish or brown'ish “fan” canvas background on the html-element seen on larger windows / screens, creates an edge-break and completes the design. I change that background from time to time, while most else stays more or less the same.

The compressed screenshots of the full‐width home page, show all the bits and pieces that are carefully layered to form the “visual header”, and most of what you see up there is generated content attached to various elements further down the page.

These generated content pieces are then given backgrounds and shapes, and are absolute positioned to where you see them. When you see my pages at narrower screens/windows, the composition changes as the generated content pieces reposition themselves relative to each other and the page background – as they are designed to do.

The use of decorative images in text‐areas, varies greatly from page to page. If/when decorative images goes well with the text, I use them. If images don't add anything of value I for the most part leave them out.

Getting it right is a puzzle on each page, and I often revisit pages at a later date to swap decorative images and/or adjust their positions.

Some elements, mainly those decorative images, change line‐up and/or resize as a function of window size, apparently out of sync with main elements. This is to optimize use of available space on all window sizes.

Some elements in the theme also serve as “pure test objects” to see how various browsers support web standards. Knowing the spread across browser‐land is important to me as web developer, and these test elements belong in the design anyway.

The design is of course entirely my own. Have been in the web design business since the turn of the century, and have always found “entirely homespun” web layouts/designs to work best for all purposes.

simple and effective

For socalled “regular” screens the “mirrored L”, with navigation at the bottom and no header, has been my favorite design‐base for many years. It can be achieved with very light HTML code in today's browsers, and produces lots of space for my writing.

The idea is to make the most out of as little HTML code as possible, and not add anything that doesn't improve on the overall experience.

In web design everything is about appearance, as we web designers who are into building responsible and responsive designs are in reality building “castles in the air” that carry information and function. Nothing behind the visual layer has to be what it appears to be, as long as it all works on all levels.

I can for instance not see the point in having dedicated header elements on pages like this. I lovingly refer to my own web pages as “decorated web documents”, and for these proper headlines on top and layers of background and foreground visuals on and attached to the basic elements any web page is made of, create the intended appearance and functionality.

design tools

For your information: I always design directly on/for the web – no “photoshop” or similar pre-stages, and apply my CSS brushes precisely and lightly, with an eye on details, across my HTML canvas.

My main tools are HTMLPad and HTML-Kit – manual code input only, and I rely mainly on Gimp and Inkscape for creation/modification of most additional visual design‐elements.

As for browsers to design in/for, it is, for practical reasons, always ~~Opera~~ Vivaldi first, and then check of rendering and action in latest generation of the other (4) major browsers later – often skipping the other WebKit/Blink browsers. After that I may go back one or two generations in some browsers, to see that there are no serious failures in those.

I do get help, and Javascript code, from web designer friends across the world who are much more into scripting than I am, in tailoring scripts to go with my designs. Not much scripting behind this site as of now, but that is likely to change in the future.

designing “light”…

In a sense this is an “anti design” – a reaction to how the majority of web sites are designed. Been on the web long enough to have grown tired of overloaded, flashy and overly colorized web designs, and certainly don't want to add another one.

On the other hand; I am not anti-design as such, and my preferences do not include the “unstyled look” some web designs are given these days. I just can do so very well without all distractions and obstructions found daily while looking up information and shopping on the web.

That is about all I have to say about this design theme, really. A few more comments on details in side-notes, but don't get hung up on those as details change whenever I go through the stylesheets – the power of CSS.

Hope you are happy with my design, and, most important, that it “just works” for you as you surf around the site.

sincerely georg; sign

Weeki Wachee 04.feb.2011
06.feb.2011 - wrote addendum.
14.feb.2011 - added side-note about structure and layout.
21.feb.2011 - linked to article on layout-details.
26.feb.2011 - commented on the html bgnd.
28.feb.2011 - rewrote a paragraph in last block.
05.mar.2011 - rewrote some and added an image in first block.
02.oct.2011 - rewrote and added some more, and added an image in fourth block.
02.may.2012 - minor revision.
07.may.2011 - commented on use of images and design-theme details.
12.jun.2012 - restructured the entire article.
18.jun.2012 - revision/rearrangement of main article.
20.sep.2013 - revised to "IE10 is doing alright" (later removed).
12.feb.2014 - minor text revisions and some decorative images swapped.
14.feb.2014 - minor text revisions and adding "inverted L" image along with example images in sidenotes. 03.apr.2014 - minor text revisions.
12.aug.2016 - added screenshot and revised text.
01.sep.2014 - minor text revisions.
27.sep.2016 - added note about "flying birds" in side-notes.
15.oct.2016 - added note about "mostly unstyled in older browsers" in side-notes.
22.nov.2017 - added homepage screenshot for Nov.2017.
08.sep.2020 - added homepage screenshot for Sep.2020. Edited some text.
05.may.2021 - added homepage screenshot for May.2021.
10.mar.2022 - updated regarding older browsers.
last rev: 10.mar.2022

side notes.

HTML structure and layout

The main HTML structure is simplicity itself, which in part is why it works so well for my very own “conditional elastic™” CSS layout methods to fit all screens and browsers.

These are methods I developed many years ago, based on what directions I thought web standards and browsers were going. Luckily they for the most part have done just what I thought they would, although more slowly than I hoped.

I have written an article on the layout behind the visual theme, for those interested in more details.

supporting various media

My site is so far designed to my liking for “regular screens”, “small screen devices” and “print on paper”, within the restrictions imposed by each media/device. Multi‐media tailored designs is the rule, as there are only a few cross-media stylesheets behind this site.

“Regular screens” get most design code – CSS… …and “small screen devices” tend, for obvious reasons, to get a little less.

“Print on paper” is just that…
…very simple black on white, apart from color in pictures. Not all browsers can handle print-styles all that well though.

One potential drawback with multi‐media tailored and responsive designs, is that images can not be “pre‐sized” by including dimensions in source‐code. Images will be re‐dimensioned to fit in the fully rendered page, so content‐jumps can be seen while pages with large images above the fold are loaded and rendered.

load‐speed conciderations…

Not much is done to optimize load-speed for various media and connections. I am not obsessed about shaving milliseconds off load-time, as tests show that my documents load fast enough without limiting number and size of linked-in files and applying compression.

Not using web fonts do save a little on initial download, but the reason I only use fonts that are likely to already be on your computer, is that I haven't found web fonts I liked better than the basic ones for this design. That may change…

That I do not design in a “mobile first” fashion, may also save a little on initial download on small screen devices. SSR styles are only for small screens, and are totally separate from wide screen styles.

I can understand those who want faster-loading and lighter pages for mobile devices, to save on time and cost.
Remember to ask your service providers and device‐/software producers for real improvements on speed and price, next time you contact them.

no proprietary solutions

Proprietary and/or “smart” solutions, like WebKit browsers on iphone etc., don't get more, less or different code than others on this site. I am not selecting which devices and/or browsers to support and design for based on popularity or spread, only on HTML/CSS capability.

For instance, in CSS: prefixes and vendor-unique code are only included where leaving them out would produce total disasters. That very old and/or grossly deviating browsers produce “less than perfect” presentations, is not a criteria for including anything vendor specific.

In essence: all browsers/devices are served the same code based on the same web standards, so if the hardware and software is any good they should all render my site/pages fine.

browser-support is good

Latest version of all major browsers renders this design just fine on regular screens. Most slightly older versions don't do too bad either.

On small screen devices the picture is a little more varied, but latest versions of major browsers are for the most part doing OK there too.

Of course, only browsers with perfectly identical implementation of standards based rendering will produce perfectly identical presentations.

Rarely ever do I design for “pixel perfection” across the board. And to be quite honest; I hope we never will have “carbon copy” rendering across browser‐land.

yes, they do fly

(27.sep.2016) Lately some visitors have commented that some of the birds in the header-area seem to move. Those observations are of course correct, the birds do “fly”.
(It is one of the site's built-in browser and hardware tests.)

Most, but not all, birds overlaying the cloudy background on top of pages, do move a little. All moving elements are controlled by @keyframes that keep them going continuously in a repeated pattern of rotation and skew.

Because some moving elements are small – single images, and others are almost as wide as the page with several images attached, some pictures hardly move at all while others move quite a bit. Each individual element has been tuned with its own rotation-point and timing, so only pictures attached to the same element move in sync.

Those, and other moving elements in pages, are deliberately set to move very slowly, as I don't want them to catch every visitor's attention or become disturbing factors on pages.

mostly unstyled in older browsers

What little styling older browser versions get now, is only to keep content and basic navigation available, and remove unnecessary noise.