Colophon 2008: 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 6
The current version of next-design.com—the sixth since July 2005 (see screencaps of all earlier versions below)—has three distinct screen stylesheets attached and one print stylesheet.
It also features the debut of our rebranding; from the start, we've used “Look Deeper” as a tagline and a spiral nautilus as a symbol, though it did not appear as part of our logo.
Now, we’ve created a simple hand-drawn (OK, mouse-drawn) spiral which will serve the same purpose and will appear on all our marketing materials. Simple and elegant, just the way we like it.
iPhone as Game-Changer
With the increasing popularity of the game-changing iPhone and its progeny, we’ve created a special stylesheet seen only with these new Web appliances.
Because other cell companies use wildly different techniques for rendering webpages on tiny screes, designing for handhelds is trying to design something that will render consistently across dozens of browsers on dozens of platforms instead of the four major browsers (Microsoft’s Internet Explorer, Mozilla’s Firefox, Opera and Apple’s Safari) and three major platforms (Windows, Apple & Linux) we normally deal with on the Web.
One of the goals with this refresh was to “open up” the layout, get it out of the “box inside of a colored background” style I've done since the beginning. Working on the New School site and some other projects both recent and upcoming, I’ve been trying to move away from that and let these layouts breathe. To that end, I felt it was time to take another look at the way I've been structuring my HTML.
Restructured HTML
Rather than dumping everything into a wrapper div, I wanted to try and take some key elements out for enhanced design flexibilty.
So, in this reboot—really more of a refresh than a total overhaul—I wanted to move the header and footer out of the wrapper. I also moved the bottom div, that darker band across the bottom above the footer, out of the wrapper.
Time will tell if this is a better, more flexible configuration than dumping everything into a single container.
We tell our clients that using a XHTML/CSS design means never having to change your HTML, but the fact of the matter is that's not as true as we’d like. Yes, it’s still way better than using a table-based design. And, yes, most of the time, the changes are minor, shifting something into or out of an enclosing <div>, but sometimes, like this latest iteration of next-design.com, it becomes a more elaborate project.
Tag-Soup?
On the downside, some may think I’ve indulged in some old-fashioned “tag-soup”. For some features of the current styles, I couldn't get it to work any other way. In some cases, this means having a div styled one way on one stylesheet and completely ignored on another.
The thing is, if you want to center a page, you’re already adding a wrapper/container div around everything else. If this kind of added code bothers you, I suppose you could always just align your header, nav, content and footer against the left of the body. I suppose.
As there is no Holy Grail as far as HTML structure, though attempts have been made, my thoughts now lean toward leaving myself some extra blank divs, stuff that I can show or hide, use or not use, as the project develops. I know I could make this design function like any of the previous inside-the-wrapper designs, but I could not do it in reverse. I did try...
If you have a better idea, please, feel free to contact me and we can discuss it; I’m always looking to learn.
Alternate Styles
You can see these other styles if you use Firefox, Opera or Safari to browse the tubes of 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.
The New (and Old) Styles
Red Band [elastic]
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.
What About the Zoom, Zoom, Zoom?
Internet Explorer 7 has it; Opera’s had it for a while; now we hear that Firefox 3 will have a Zoom feature, too.
What is it?
The Zoom feature of these three browsers enlarges the entire page—text, graphics, layout, the whole schmear. These early efforts have not been universally loved, mostly because they still seem a bit crude. Graphics become blocky and pixillated, it’s too easy to make it way bigger than your screen. There are issues.
But there’s no denying this is the trend for all browsers. It seemed inevitable once IE did it, pretty much everyone else would follow. The rest of us will just have to wait and see how this develops.
Fonts:
<Headings>:
Constantia,Georgia,serif
<Paragraph>:
Candara,Arial,sans-serif
Using some Vista fonts on this style.
Colors:
Sticking with many of the earth tones we used last time around. Wanted to keep the warmer feel after years of blue and green color schemes.
Ice Box [fixed]
Layout:
Fixed width, 750 pixels wide. I agree with many of my brethren that the primary problem with fixed-width sites is determining what’s gonna be the most effective width for our users. One one hand, I think you have to be conservative, no wider than 750 px; on the other hand, if you’re surfing at 800 px or less, you’re probably used to stuff running off the sides of your screen. Maybe it doesn’t bother these guys. A computer that old probably doesn’t have a Zoom feature as outlined above. Who knows...
Fonts:
<Headings>:
Georgia,“Times New Roman”, Times,serif
<Paragraph>:
Verdana,Geneva,sans-serif
Colors:
Used to be, it seemed like every site I did was some form of blue or green or a combination thereof. Hadn’t done one in a while, and I had some ideas, plus, blue is a favorite color. I might add some snowflakes or icicles to this one down the road...
Vanilla Extract II [fluid]
Layout:
Fluid width, 80% of available screen real estate. Renders great from 640 pixels wide to 1280—the width of my current monitor. I didn’t use max-width/min-width on this one. I figure if people with super-large monitors surf full-screen, much like people that still use an 800 x 600 screen resolution, they're probably used to pages that render in, shall we say, interesting ways.
Fonts:
<Headings>:
Candara,Arial,sans-serif
<Paragraph>:
Georgia,“Times New Roman”, Times,serif
Colors:
Pretty much the same as our last Vanilla Extract; just a basic black & white site, with a little light grey.
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)