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

Subway System was inspired by my fascination with big cities. Although I've never gotten the chance to ride the subway, I thought it would be a great city-type theme. This design report will explore my design strategies and the process of working on the design. This Mini Zen Garden project was created for WRT 351 at Grand Valley State University during the Winter 2007 semester.

Working on the Design

The process of working on the design was a bit cumbersome. The biggest obstacle for me was trying to learn CSS in the process of doing this site. I would have been able to build the design a lot faster if I had used CSS prior to this assignment. My aesthetic goals for the project had to be put aside while I learned the limits of what I could and could not do with the little CSS I knew. I knew what I wanted my design to look like, I just had to find the CSS and figure it out before I could do it.

My biggest problem was getting the fixed container to be centered on the page. I started using margins to just push the container near the center, but this just did not look good once I saw it on a wider monitor. Once I used auto margin to place the container in the middle, everything else was affected. I had to piece by piece rebuild the site to get it to look the way it was before it was centered on the page.

Other areas I had trouble with:

• Using text replacement in the header, I had a little trouble making the "blockquote" portion disappear. To hide the h1 and h2 I used "display: none;" but to hide the "blockquote," I had to use "visibility: hidden;"
• Margins were changed a lot!
• Floats were not always cooperative. Once I used auto margin for the container, things that should have floated up next to the Requirements stayed below. After starting over and going piece by piece in the code, things eventually went where they were supposed to. I don't know what went wrong in the code, but it worked itself out in the end.

Technology used:

• Adobe Image Ready was used for all image editing

The evolution of my design did not change very much. Once I figured out my theme, I just applied it to the layout I already had in mind. Although it went through many drafts, until I could figure out the CSS to accomplish it, the overall layout did not evolve very much. I am happy with the way it turned out and am very proud of how much I have learned in the assignment.

Credits

All images used in this style sheet courtesy of stock.xchng.

• Header image used from "Time Square Station"
• Background image used from "Manhattan Train Map NYC"
• Sidebar image used from "You Are Here"
• All bullet images used from parts of header image

Inspiration for this layout is from "Entomology" by Jon Hicks and Professor Lowe's Mini Zen Garden.

Snippets of code were borrowed from Dave Shea and Molly E. Holzschlag's The Zen of CSS Design including text replacement, centered, and fixed width layouts. Other various snippets of code were borrowed from Professor Lowe's Mini Zen Garden including bullet images and border style.

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.