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 of August 2016 IE8 and older versions will render pages on this site unstyled – stylesheets are disconnected.
As with all
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
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.
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
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.
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.
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
Hope you are happy with my design, and, most important, that it “just works” for you as you surf around the site.
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.
last rev: 15.oct.2016