Web Systems Design and Online Consumer Behavior [Electronic resources] نسخه متنی

Corporate ZenWorks: From competition to concord

Derek Hansen, Designer

www.csszengarden.com/095

[View full size image]

UPON FIRST DISCOVERING the CSS Zen Garden, Derek Hansen was astonished by the thought and effort that went into creating many of the designs. He was already in the process of switching to a standards-based approach in his own work, so the idea of submitting a design appealed to him.

For inspiration, Hansen let a competitive desire to add something unique to the Garden drive his ideas. He went through each existing design meticulously. Attracted to those designs with a strong theme, he decided he wanted to create something that told a story. Still, he was determined that his design would look different from everything else on the site, which he achieved in his submission, Corporate ZenWorks.

Take a Letter

As with any well-written document, Corporate ZenWorks focuses on keeping the content organized well and displaying it simply (FIGURE 1). A silvery desktop and simply styled fonts set the tone:

body {
background: #999 url(bk.jpg) repeat-x fixed;
margin: 0;
padding: 0;
color: #33140E;
font-family: Georgia, Times, serif;
font-size: 80%;
}
h1,h2,h3,h4,h5,h6 {
border: 0;
margin: 0;
padding: 0;
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana,
sans-serif;
font-weight: normal;
}
h3 {
text-transform: uppercase;
font-size: 90%;
word-spacing: 2px;
letter-spacing: 2px;
margin-left: -10px;
font-weight: bold;
}

You'll notice that the h3 elements use negative margins (FIGURE 2). This looks a bit odd now but provides an attractive look for the final design, which will become more obvious as we progress.

NoteUsing Lucida Grande for the headers and Georgia for the body text, the text treatment in Corporate ZenWorks is simple but elegant. Hansen explains that he did feel somewhat restrained in terms of typographymostly because he was concerned about page weight and didn't want to overuse graphics. Because of his restraint, the results are more realistic in terms of a corporate letter style, and the look works.

Paper, Please

The next step is to get the text down on paper and begin to organize the words into some visual order. This is managed by styling the #container div:

#container {
width: 750px;
background: url(paper_mid.gif) repeat-y;
margin: 50px 0 0 25px;
padding-bottom: 20px;
}

This sets the container to a fixed width of 750 pixels, adds the main portion of the paper graphic, and has the graphic repeat as a background image along the vertical axis. The #container margins are set, as is some padding along the bottom to provide a bit of needed white space. While the margin values pull in the h3 elements a bit, they're not quite where we need them to be (FIGURE 3), but that will be fixed in just a bit.

Corporate Identity

Since the design echoes a letterhead, it's necessary to provide a corporate logo and related imagery. Here's the logo, placed in the #pageHeader h1 element:

#pageHeader {
height: 100px;
padding: 20px 0 20px 50px;
}
#pageHeader h1 {
height: 90px;
width: 340px;
background: url(zen_logo.gif) no-repeat;
}

The following CSS hides the text so that the identity text won't display but the images will:

#pageHeader h2 span, #pageHeader h1 span {
display: none;
}

This is also a great time to pull in the margins for the headers and text:

#linkList, #supportingText, #preamble {
margin: 10px 100px 10px 200px;
}

The logo appears just where you'd expect it to, along the top left of the paper (FIGURE 4). Along with the logo, the design sports a quote cleverly attributed to "C.S.S." This is achieved by styling the #quickSummary selectors that serve to position the subtext quote, hide the underlying text, and style the text within the section:

#quickSummary {
position: absolute;
top: 50px;
left: 450px;
background: url(subtext.gif) no-repeat;
height: 100px;
width: 280px;
}
#quickSummary p.p1 {
display: none;
}
#quickSummary p.p2 {
padding: 78px 0 0 15px;
font-size: 10px;
font-family: "Lucida Grande:, "Lucida Sans Unicode", Arial,
sans-serif;
}

The image and styled text provide us with the feel of a conventional corporate letterhead (FIGURE 5). However, the top edge of the paper is just a bit too sharp. Using one of the extra divs made available in the XHTML, Hansen added a background image to improve the paper effect at the top:

#extraDiv1 {
position: absolute;
top: 10px;
left: 23px;
width: 750px;
height: 50px;
background: url(paper_top.gif) no-repeat;
}

Notice that the absolute positioning ensures that the paper is properly aligned with the rest of the page content (FIGURE 6). To finalize the corporate-identity section, the #footer is styled to be positioned up at the top of the page, underneath the images:

#footer {
position: absolute;
top: 160px;
left: 150px;
font-size: 80%;
border-top: 1px solid #6E512F;
padding-top: 3px;
width: 575px;
text-transform: uppercase;
text-decoration: none;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial,
sans-serif;
}

This provides the styling for the #footer section with links and a solid top line, concluding the identity section of the document (FIGURE 7).

NoteIf you designed the XHTML from scratch along with your design, the #footer identifier should be named something more semantically appropriate. That the #footer element appears in the top portion of the page is due to the nature of the CSS Zen Garden. It's a nice way of showing how any element can be absolutely positioned anywhere on a page.

Linking In

Hansen decided to give each of the link sets a different visual treatment. With the #linkList margins already established, the styles for the "Select a Design" links can be added, which you'll find in the original CSS file for the designlook for the #lselect ul and #larchives ul selectors. This results in an attractive list of links and archive navigation at the literal footer of the page (FIGURE 8).

A Little Personality

Who says corporate themes have to be buttoned-down? Hansen adds a few great bits of personality to the design. First, there's the note paper-clipped to the page, which is added via the #pageHeader h2 selector:

#pageHeader h2 {
background: url(paper_clip.gif) no-repeat;
width: 320px;
height: 262px;
position: absolute;
top: 250px;
left: -6px;
z-index: 5;
}

Once again, relying on absolute positioning, Henson was able to place the element precisely where he wanted it. Below the paper-clipped note is a sticky note, which also serves as the location of the resource links. The link styles can be found in the design's CSS, but here's how the sticky note was added:

#lresources {
position: absolute;
top: 600px;
left: 10px;
width: 200px;
height: 257px;
background: url(sticky.gif) no-repeat;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial,
sans-serif;
color: #000;
}

The left side of the design now sports two absolutely positioned elements, making the page seem more realistic (FIGURE 9). A final visual elementa penrounds out the fun. You can see that Hansen used the #extraDiv2 selector to absolutely position the pen as well, this time at the right of the design (FIGURE 10).

#extraDiv2 {
position: absolute;
top: 900px;
left: 700px;
background: url(pen.gif) no-repeat;
width: 140px;
height: 547px;
}

Send It On

Corporate ZenWorks relies heavily on theme to create a unique, stand-alone design. Despite some issues that challenged Derek Hansensuch as the restraint in font use described earlier and the frustration that a transparent GIF wouldn't allow as refined a look across browsers as PNG alpha transparency wouldthe overall result is elegant and upbeat.