Reflections

In many ways, this was one of the most difficult projects I've created for the book. Why? Because I wasn't able to touch the markup and because I was working toward a very specific visual goal. The combination of these two constraints made the process very, very interesting.

The perfect example is the sidebar positioning. Sure, it's cool that we can use top and margin-top in combination to place the link list, but it turned out to be a fragile solution. Suppose the user bumps the text size up to 120% of normal. The quick summary text immediately flows to four lines, but there's no way for the top value to change as a result (short of using JavaScript, but that's outside the scope of the book). To keep everything aligned, it would need to change to 10.6em. Instead, the sidebar content ends up overlapping the quick summary area.

As I say, this is the case because the document markup was off limits. If it had been changeable, I would have reworked things so that all of the main column content was in one div so that I could just give it a single border. I also would have moved the link list into that div and then used it as the containing block for the link list. That way, the user could change text size all he wanted, and the sidebar would still line up with the content column. There would be no more danger of overlap.

This illuminates an issue that is very important but often overlooked: Presentation is dependent on structure. You may have heard the phrase "complete separation of structure and presentation." That's impossible with current technology and may always be impossible, although I'm no prophet and can't guess what might be possible in 5, 10, or 30 years. I can say that, as of now, a document with no structure that is to say, no elements, just an undifferentiated sea of text cannot be styled in any meaningful way. Without paragraphs and headings and divs and anchor elements to mark your hyperlinks, there's no hope of making things look good.

Similarly, if the structure of a document doesn't relate very well to the visual result you want (as was the case in this project), you end up either getting very creative or else having to change something. Usually, designers will just change the structure to better meet their layout needs. That's okay; in fact, it's often a good idea. The other possibility is to change the visual layout from what you wanted to what the document's structure can support. That's fine too, although it's generally not as satisfying.

So always remember that your design will depend on the document's structure. Sometimes that means grafting in an occasional div or span for presentational purposes. As long as you're doing that only when necessary, don't worry about it. If you find yourself frequently nesting spans inside (or around) links, though, you might want to rethink how you're doing whatever you're doing. It's important to keep things as simple and structurally appropriate as possible while still meeting your design needs.

One last note: My respect for the designers who have created Zen Garden layouts increased substantially by undertaking this project. Adapting a known design to the markup was a challenge; to create a completely new and original design on top of that markup bespeaks incredible skill and talent. To each and every one of the Zen Garden designers, I bow in reverence and humility. Thank you, one and all.