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 weak­nesses.

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 of August 2016 IE8 and older versions will render pages on this site unstyled – stylesheets are disconnected.

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 back­ground 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.

example of january 2011 example of june 2015 example of august 2016

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 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
last rev: 15.oct.2016



www.gunlaug.com advice upgrade advice upgrade navigation