Mini Zen Garden, Winter 2007

WRT 351: Writing for the World Wide Web

A demonstration of what can be accomplished visually through CSS-based design -- CSS Zen Garden

Design Report

Overview

My initial dreams of creating a beautiful weather-themed mini-zen garden fell by the wayside almost at the very start of the project. It’s not as though I backed down from the challenge of crafting a well-integrated color-coordinated masterpiece, I simply came up with a more interesting, creative, accessible, and feasible project.

As I was playing around with CSS, it became clear that one can make the content of the page float in bubbles (square bubbles, I guess) and this somehow reminded me of a bulletin board.

The bulletin board idea quickly gained momentum, as it seemed a fitting way of presenting the information included in the html. My mini-zen garden was to be reduced from the ornate delicacy of an actual zen-garden to a simple everyday bulletin board – the cliché bastard child of the billboard. However, it was nevertheless an appropriate device for presenting information.

The Idea:

• 1. Make the garden look like a bulletin board To do this, I chose a simple background color, harkening to the lime-greenish color of the squishy pin-cushion boards. I tried a thing or two with patterns in an effort to give it texture, but I settle on the flat color which gives it a somewhat cartoonish feel.
• 2. Make the content look like stuff stuck to a bulletin board. I created simple blocks of yellow for each of the three main pieces of content, this was done to make it look like a sticky note. (More on the “sticky note” idea under the Problems section.) I wanted to use a font that looked like handwriting, like script, for the headings in the document. To do this, I had to create images using Fireworks to replace the text headings, since such a font was not likely to be available on every computer. I created the images and replaced the headings using a span and no-display function in the css file. I kept the body text as text, as it wasn’t feasible to create image files to replace everything, nor would it be easy for a user to read script text in such a large amount.
• 3. Add some extras to accentuate the bulletin board idea Standalone, the yellow and white rectangles hardly succeed at communicating the bulletin board idea. To combat this, I recreated the header by hand-writing the words on a sheet of notebook paper, tearing it out, and stapling it as though it were stuck to a board. I took the image I had drawn, and scanned it. It’s a rectangular file, though the image itself is not a rectangle. I had to add the same color to the edges to make it hold its shape. This graphic establishes the theme immediately, and gives context to the pushpins I used. On each of the blurbs as well as the footer, I added a gif of a pushpin to make them appear stuck to a board.
• strong>4. Do a couple extra things to enhance the linksFor each of the links, I created a function to make them appear clearly as links. Also, I changed them to turn gray when they’re hovered over.

The Problems

Not all of this was terribly easy to accomplish, especially for someone not used to the language of CSS. As mentioned above, I had issues with the sticky note idea. Initially, I wanted to split the six ideas under requirements into six different sticky notes. However, this involved changing some of them to include padding, and somehow my code wouldn’t work, causing the color to disappear. This rendered the sticky note idea useless. As a result, I decided it was acceptable to leave them all in one single yellow rectangle.

I had difficulties implanting the pushpins as well. Similar to the trouble I had separating the sticky notes, whenever I implanted the image, the color would disappear. This meant there was a problem with the code. Though I never had an issue with the requirements section, the sidebar and description continually disappeared. Eventually, I found that if I placed the background-color and background: url commands on different lines, it was no longer an issue.

I also had issues establishing absolute positioning with the elements. I settled with a float function, however that isn’t necessarily appropriate with things tacked into position. You’ll notice that if you resize your browser, some of the elements will move. This is not on purpose, and I’d like to change it when I figure out how.

Summary

The design didn’t emerge exactly as planned, but I am satisfied with the way it looks. It emerged with a simple, almost cartoonish theme, but I like it. There are a few things to tweak – the moving rectangles are the probably the biggest issue. But I feel like I’ve captured my idea pretty well. Most of the problems I had were, of course, with the code. To figure some things out, I had to refer to the book or to HTML Dog.

James Gamble
Student of all things
Grand Valley State University
gamblejj@student.gvsu.edu
Design originally created Spring 2007

This HTML document is available under a Creative Commons Attribution-NonCommercial 2.5 license. CSS style sheets and all graphics and images used are copyright 2007 by each individual author and do not carry the CC license unless otherwise indicated.

Thanks to David Shea for CSS Zen Garden and The Zen of CSS Design, as well as Steve Krause for suggesting this class project.