CSS Concepts & Design Principles in the Zen Garden
by Scott Frangos
In this Lesson we’ll look at the CSS structure of an excellent site design in the CSS Zen Garden. You can follow along using the Web Developer Firefox extension which will help us reveal the hidden structure of the design.
One of my favorite, all-time books for web development is The Zen of CSS Design, by Dave Shea and Molly Holzschlag. It is a must read. Why? Well, forget for just a moment that the influential companion site at CSSZenGarden.com set the direction for success of CSS design on the web, and let’s just look at three major themes in the book. Graphic design principles. Web standards principles. Elegant/Web 2.0/XHML programming principles. Put those three together, and is it any wonder that world-class designers compete to show their stuff in the Zen Garden online which now hosts 206 “accepted” designs, and another 1014 that didn’t “make the cut.”
To understand more of what the Zen Garden is about, and see how those principles are applied we’ll dissect one of the sites there using the excellent Web Developer extension by Chris Pederick. Excellent? Well, there’s a reason why over 100,000 people have downloaded it — go get it now, if you don’t have it. You will have to restart Firefox after you install the extension… you do have Firefox, don’t you?
Good. We’ll begin by jumping direct to the location of a viewer for the 206 sites in the garden — no better place online to study great website design.
The above site is at MezzoBlue.com.
We’ll pick the first site at upper left, by a German Designer named Benjamin Klemm, and I’ll give you the rest of the lesson in a series of steps so you can follow along using the Web Developer extension. In forthcoming “Learning CSS” lessons, we’ll review some more sites here to uncover and reveal some of the leading “tricks” and techniques being used to present stunning website design. Following this general series of steps is like using an X-ray to uncover the muscular and skeletal structure, and to use for troubleshooting and diagnosis. Ok, Web Doctors… here we go:
Steps to Understanding Design & CSS Structure
1. The Naked Source: The concept of the Zen Garden is to take the same simple content with minimal HTML mark-up, and and have designers repackage it in a variety of unique and creative designs using CSS. Use the “CSS” menu in the Web Developer extension to disable all styles, as shown below, so you can see the standard file from which all the designs are developed.
When learning CSS it’s good to consider the simple HTML file without the CSS manipulation for a couple of reasons. There are still some folks who might access a page without the benefit of CSS, and it is a good principle to make sure your “naked” HTML content renders cleanly and intelligibly — a standard that contributes to the principle of accessibility. And, this makes your page more ideally “portable”, meaning the same HTML page will render well using style sheets optimized for print, or for mobile web browsers.
2. Visual Alignment (a design principle): We’ll use “Display Line Guides” under “Miscellaneous” to take a look at the lines in the design. Are there lines if you can’t see them? You bet. This is one of the most powerful tools in a designers arsenal, but is often overlooked by webmasters that have focused primarily on programming. People follow horizontal, vertical and diagonal lines on pages. Study magazine ads — the good designers will always set it up so a line leads you to the logo in the ad. Remember cigarette bulletin boards? Those were a classic study in lines leading you…. AWAY from the Surgeon General’s warning! Use your line guides to study the master designers.
Above, the designer has lined up the woman’s glasses in the photo with the baseline of the logo text at top. Nice. And, the man’s “site line” leads you directly to the sidebar headline “Select a Design” — a strong alignment for a design firm. There’s no coincidence here — this designer knows exactly what he is doing.
3. Images & Backgrounds: Clever designers make good use of photos and illustrations, and also the more subtle background images which may be “repeated” in one area of the layout to create a nice effect using CSS code. To discover what’s going on in this design, first use the “Information” menu to select “View Image Information” (#1 below). When the images open in another window find one you wish to learn more about (#2 below), and copy its name into the search field which appears when you go back to the tab with the design in it and open “Edit CSS” under the “CSS” menu (#3 below). This trick will help you quickly find the CSS code that contains that image (#4 below). Now you can study how the image is used in the design and see that it forms the left column background by repeating vertically (repeat-y). Here’s what the image looks like by itself:
You can see that the dark area at the right of the image forms the shadow at the right of the “Select a Design” sidebar.
The above illustration is a composite of what you see in two separate windows. Step 1 is done in the first tab where you view the CSS designed page. Step 2 — finding an image you wish to learn about — is done in the new window that opens after you select “View Image Information.” Then the final two steps are carried out after you return to the first window and open “Edit CSS” which appears at the left of your screen.
4. Structure — Visual and Coded: Here are two good ways to uncover the structure of a web design using your web developer tools — “Display Topographic Information”, and “Outline Block Level Elements” with “Show Show Element Names When Outlining” turned on (both under the Outline Menu), and also “Display ID and Class Details” turned on under the “Information” menu (click to enlarge and study them):
At left above is the result of selecting to view the “topographic” structure of the site which is an excellent way to consider how the different elements (sidebar, headlines, copy areas) all releate to each other. At right, the hidden CSS skeleton is revealed so you can learn how div’s and the “box theory” are applied. Note that different colored outlines are for different elements — red for paragraphs and blue for divs.
5. Which Elements “Float”?: A big key to understanding and working with CSS layouts is selecting appropriate div elements to “float” left or right — usually to create columns, sidebars, or content boxes. Let’s find out which element(s) float in this layout (click to enlarge image):
Above, at left, we’re using “View Style Information” under the “CSS” menu to show just the CSS code for an element you click on (the first gray column of text) — and we learn that it floats left. Outline Block Level Elements is also turned on. The yellow box appears for another look into the code for an element on which you’ve clicked, (usine “Display Element Information” under the “Information” menu). Why use both? Viewing Style Information shows you precisely how an element is coded, while viewing Element Information tells you what the elements ancestors and children are — great for troubleshooting when one of those other elements are affecting your layout.
6. Page Speed Report (where “weight” is part of elegance): You want to avoid “bloated” code for three good reasons: it takes longer to download (still an issue for some mobile browsers and a good percentage of global users not on broadband yet), it takes longer to code (you want to be efficient so you can make big bucks), and it takes longer to troubleshoot. To view the speed report, choose “View Speed Report” under the “Tools” menu.
The page gets six out of seven “congratulations” (in green above), citing only one HTML file linked to just one CSS file, and the total size and related fast download speeds. The only caution was for the size of the CSS file (4654 bytes) which is not a major issue.
7. Validation Check (for compliance with web standards): Lastly, let’s check the page for compliance with the W3C.org standards for CSS (also under the “Tools” menu):
Above, the W3C gives the CSS for this page the thumbs up with no errors found. Note that it validates for CSS level 2.1. CSS 3 is out there, but not consistantly implemented by all browsers (with Microsoft being the major offender — again).
About the Author: Scott Frangos is a BlogMaster, Web Developer at WebFadds.com, a Graphic Designer, and College Level Instructor (find him at Global Scholar) who believes the best web designs combine Design, Programming, and Web Standards principles. He lives with is wife, Pepper, and their three dogs — Wisdom, Spirit, and Steggman — in the Pacific Northwest.
Learning CSS is an evolving series of articles which you may access in any order, depending on your level of knowledge and needs. The series covers major CSS concepts like the Box Model, Syntax, Layout Controls, and ways to visually understand the structure of CSS.
Written by: Scott Frangos
This entry was posted on Saturday, April 12th, 2008 at 7:30 am and is filed under Learning CSS, OS WebMaster. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
