The Making of “klassik”
The idea of the design klassik was born when I skimmed an old Brockhaus-Encyclopædia: it would be quite interesting to create a webpage with elements roughly based on 17th/18th century printing.
Design Aspects
Most notable in books of this era is the use of vignettes and miniatures as decorative elements.
I decided to add a greek column apart from those small graphics to enhance the classical touch. Then I found two rather expressive etchings in a book about french Renaissance prints.
Although being somewhat early for passing as “classical”, their motifs where convincing.
One shows Saint George fighting the dragon, which I use as an allegory for CSS fighting tables and the other one shows Amor conquering Chastity, which translates to CSS enamouring the unaware :-)
Technical Aspects
When writing webpages I place emphasis on usability and accessibility. This means not fidgeting with font-sizes or available space. Be as generous as possible, allowing for utmost readability and scalability.
klassik embarks on this principle, using default font sizes and distinct contrasts for foreground and background colours.
klassik has been developed and tested using Opera 8.02 to 8.5, Firefox 1.06 to 1.07 and Internet Explorer 6SP1 on a Windows 2000 machine.
Resolutions from 800×600 pixel to 1280×1024 pixel and scaling from roughly 80% to above 200% pose no problem.
Further tests were performed running the page through browsercam.com.
The following browsers and resolutions were tested: Overview
CSS Hacks in “klassik”
As a rule, I severely restrict the use of hacks in CSS.
To hide the Style sheet from old browsers, I apply the
at-media rule @media all {}
To accommodate IE users,
klassik
uses the Tan hack (* html)
in three instances, twice for layout issues, and once to suppress a png-image
with alpha-transparency.
