Colophon 2007: About next-design.com
col·o·phon n. An inscription placed usually at the end of a book, giving facts about its publication.
From: The American Heritage® Dictionary of the English Language, Fourth Edition
Presenting Version Five
Note: As of November 2007, and running to the end of the year, we’ve temporarily replaced the Chocolate Taffy theme with one more suitable for the Holidays. This X-mas theme is, however, based on the Taffy style and is also an elastic design.
The current version of next-design.com—the fifth since July 2005 (see screencaps of the four earlier versions below)—has three distinct screen stylesheets attached and one print stylesheet.
You can see these other styles if you use Firefox, Opera or Safari to browse the Internets; on the menu bar, go to View>Page Style and select a new style. If you go to another page, it will revert to the default style, Chocolate Taffy.
The New (and Old) Styles
Chocolate Taffy (default)
Layout:
An elastic design, described by Patrick Griffiths in his article “Elastic Design” as originally posted on A List Apart.
Changing the font size enlarges or reduces the entire layout (except for background graphics, which are further discussed here and here), preserving the proportions of the original design. While there is a default size (fitting comfortably in an 800 x 600 screen resolution), it functions as more of a starting point than a required or even recommended size.
What I like about this type of layout is how it places more power in the hands of the user without making any concessions on the design end.
Fonts:
<Headings>: Palatino Linotype, Book Antiqua, Georgia, serif
<Paragraph>: Verdana, Geneva, sans-serif
I try to keep stuff like this simple; I think too many fonts just looks like you either couldn’t make up your mind or you had too many fonts on your computer. Or you came from the world of print.
Colors:
Went with earth tones this time around. Wanted a warmer look after years of blues and greens.
Drop Cap:
Just wanted to try this out on a relatively smaller site. There is a class in the CSS specs for doing this, but I opted for using a span and a class instead. So sue me. Wound up using it in all three screen stylesheets.
The Joker
Layout:
Fixed width, 750 pixels wide.
Fonts:
<Headings>: Palatino Linotype, Book Antiqua, Georgia, serif
<Paragraph>: Verdana, Geneva, sans-serif
Colors:
I used to create these large hard-edge abstract paintings that used warm, organic colors. Sometimes, color combos would just pop into my head and I couldn’t tell you where they came from.
This combination was kinda like that, until I saw Tim Burton’s Batman (1989) again and realized the colors were very similar to Jack Nicholson’s wardrobe as The Joker. At least it gave me an easy title for the stylesheet.
Vanilla Extract
Layout:
Fluid width; uses min-and max-width CSS properties which Internet Explorer (in versions prior to IE7) ignores, in which case it just defaults to an 80% width.
Fonts:
<Headings>: Tahoma, Geneva, sans-serif
<Paragraph>: Georgia, Times, serif
Colors:
Pretty much just black & white, with a little light grey.
The Original Plan
The original plan was to create two identical stylesheets, one fixed-width, the other fluid-width; the only difference would be in the properties of the #wrapper. Everything inside the wrapper would be sized in percentages.
And it worked, but as the project developed—that’s why we call it Web development, folks —things, as they so often do, changed.
That’s when I decided to go with the three stylesheets, one from each category of layout.
Print Stylesheet
There is one print stylesheet to rule them all. You can see the effect from any page by either printing or looking at your Print Preview function, found in most browsers under File>Print Preview.
.jpg)
.jpg)