Corporate ZenWorks: From competition to concord


Derek Hansen, Designer

www.csszengarden.com/095

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:

Figure 1. The imagery for Corporate ZenWorks.


 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.

Figure 2. A portion of the primary background and font treatments for Corporate ZenWorks. The headers are cut off on the left due to the negative margin value, and the text is very close to the edge of the document.


Note

Using 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.

Figure 3. A portion of the paper background with width, margins, and padding for the #container div.


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:

Figure 4. Adding the corporate logo. In this portion of the screen, you can see the #quickSummary section, which has yet to be styled.


 #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:

Figure 5. Strengthening the letterhead look.


 #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:

Figure 6. Adding the top edge of the paper.


 #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).

Figure 7. Using the footer as a means of styling a top portion of the page.


Note

If 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).

Figure 8. The styled design and archive links.


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).

Figure 9. The paper-clipped and sticky notes are absolutely positioned.


Figure 10. The pen adds to the fun, breaking away from the serious corporate look.


 #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.



    The Zen of CSS Design(c) Visual Enlightenment for the Web
    The Zen of CSS Design(c) Visual Enlightenment for the Web
    ISBN: N/A
    EAN: N/A
    Year: 2005
    Pages: 117

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net