Last night, we were finally going to bed at the same time. She wasn’t going out to a party, wasn’t going back in to work, and wasn’t staying up to read Harry Potter. I come up to the bedroom, find her dressed, laundry basket in hands, and her pillow on the top.

She headed for the door, and I asked why she had her pillow. She said she was taking it downstairs. I asked her if she was sleeping on the couch, surprised, and she answered with, “I don’t think it’s a good idea for us to sleep in the same bed.”

The last time that we had slept next to each other, even after she had stopped wearing her rings, we had both slept as we had before. Undressed, and close to each other. She had inched toward me, and cuddled me. I was taken aback, because she had put up so many walls between us. She told me something about there not being anything wrong with still cuddling. I pressed back against her, letting myself drown in the feeling.

How many more chances like this was I going to get?

Looks like none.

I still think that there’s a chance that this isn’t going to reach its conclusion. I still hope to avoid divorce. I understand, logically, why we are doing this. I don’t like it. It scares me, and I am questioning myself at every turn, because if I were cool, she wouldn’t be leaving me. If I were good. And that’s the looming depression over the horizon, the mind weasel nibbling away at my confidence.

She is my wife. Why doesn’t that mean something?

This chapter ties all the others together. It takes the layout, stylistic, coding, and graphical elements – not to mention the special effects – and wraps them together by showcasing six layouts and analyzing both the artistic and scripting components.

Hedges shows us how to blend background images with a dynamic foreground. Radio Zen breaks my horizontal scrolling pet peeve, but uses my favorite nifty CSS trick in a sweet way – the fixed background image. South of the Border shows how to trap content properly (and with slick hacks) in fixed and fluid layouts. Corporate ZenWorks is just a damn nifty idea. Open Window once again makes me shake my fist at Internet Explorer. Otherwise, the extreme re-ordering of data and content earns the thumbs-up. Mnemonic is all about choice and how a small one can completely change the design of a site.

All in all, this book was far more helpful than the reference text. I am now fully armed against the dreaded auto-suck.

In this chapter, the authors finally roll up their sleeves and get their hands dirty. Here, parsing order is addressed, specificity, inheritance, and the actual “Cascade” that makes up the “Cascading Style Sheets” acronym. Not to mention layering. And that’s all inside of This is Cereal.

Having been a coder in the past – forced to learn machine language on Sun SparcStations, machines that are designed so that you don’t ever have to use machine language, I might add – this chapter was kind of a breeze. These sort of tricks have been long needed, and widely-used, by previous scripting languages. JavaScript, for example, used to perform the duty of detecting which browser was being used, and would feed the proper page to the proper browser. Germination uses Internet Explorer’s lack of CSS standard compliance to feed it a completely different design than other browsers.

Of course, once IE7 comes out – standard compliant AND tabbed browsing? Trying to be Firefox much? – it may pick up the proper page, and half of this design’s code might become out-dated. But then, that’s what future-proof design is all about. The page will still work.

Bonsai Sky is SLICK. All of its tips and tricks simply don’t show up in older browsers, but the design is solid without the bells and whistles. This one is a masterpiece. It really ties it all together. Graphics, layout, special effects, browser compatibility… I’d really like to shake Mike Davidson’s hand.

Tulipe has HORIZONTAL SCROLLING! Argh. *Shakes fist at the heavens.* The design is extremely pretty, and includes nifty tricks, but it tweaks that horizontal scrolling pet peeve, so I won’t say a word more. Heh.

Door to my Garden does absolute width the way it should be done. I know the chapter is all about backgrounds, and how to deal with background tiling, positioning them with ultimate control, and keeping your style simple, but the positioning in this design is what caught my eye right off the bat.

Somebody actually named their design Elastic Lawn? Uh, okay. The name aside, this is what I was talking about before with combining absolute positioning and liquid positioning to get the best of both worlds. The chapter also focuses a bit on the way repetition was smoothed out with graphics and such, and that’s cool, but once again I dig the layout work with the positioning.

Okay, that’s enough blathering from me.

Apparently, dealing with absolute positioning and floats has been something that people consider difficult. Or at least irritating.

Not compared to nested tables. Holy crap, did that suck. (Auto-suck?)

The first design, Backyard, is all about absolute positioning versus floating. I’m really not a fan of the absolute, myself. Too much overlap, too much possibility of data loss when a browser is resized or your page is viewed at wacky resolutions. There was one bit that grabbed my curiosity and ran: When you use absolute positioning, the rest of the document completely ignores what you positioned, as if it weren’t there.

Gone. Bamf.

Great for columns, not really that great for anything else. Once again, this is only IMHO.

In the work I tend to do, floats are preferable. Images need to have text wrap around them dynamically, depending on size of the window and size of the graphic. I want to be able to change the graphic without having to re-work an entire CSS class. I want to be able to apply the class broadly, instead of specifically. Also, floating leads to liquid layout.

Which brings us to Entomology. Fixed layout takes your data, gives it a specific size, and lets whitespace or background graphics fill the excess allowed by bigger browser windows. Liquid layout lets your data fill the entire window, no matter how large or small. Fixed layout tends to look a bit more business-professional, but from a utilitarian standpoint, that’s a whole crap load of wasted space. Not to mention the possibility of browser windows that are smaller than your content.

HORIZONTAL SCROLL BAD! AUTO-SUCK!

Like that blink tag. Geh.

There’s also a nice trick in this section about using absolute positioning to center a graphic horizontally. With nested divs, I’m pretty sure you could use this trick in a liquid layout.

White Lily is all about the planning involved in layout. The concept that stuck with me here is consistency in design. Little images for bullet-points, links, expanding trees, etc. should all fit an intuitive and consistent theme. The purpose of these things should be easily discernible on first glance.

And then there’s Pret-a-porter. While I dig the graphics and creativity of the design, please reference my earlier notation about horizontal scrolling. Port-a-potty.

CS(S) Monk takes me back. The grid, which is a method of designing layout on graph paper, reminds me strongly of designing Doom levels on graph paper over a decade ago. I took to this method quite quickly, as the grid shows up easily in my mind’s eye, and things lock into place visually.

On the flip side, the grid is best for absolute layout, instead of liquid. I suppose an initial design could be done with the grid method, and then tweaked to become liquid. I’ll have to think on this one.

Not So Minimal deals with clearing, more floats, and absolute-position overflow. It’s mostly tips and tweaks for found problems with absolute positioning. And that’s it for Chapter 3.

http://jjg.net/ia/visvocab/

It could be that I’ve already been working in computers for too long. It could be that after over a decade of working in the field, I’ve slowly absorbed the ideas about information architecture, use, and layout purely on my own. It could be that this document is extremely helpful, and I’m just an ornery old geek.

It seemed to me, though, that the first reading was taking the obvious and re-stating it in over-technical terms. It came across as overblown simplicity and logic in design. I understand the need for nearly-universal and simple logic diagrams for flowcharting, idea mapping, and process design. I just think that this sort of thing already existed, far before web design was a twinkle in somebody’s eye.

Logic gates, AND, OR, XOR, etc, have been available for use since the first processor was mapped out. Hell, Babbage may have used simple logic diagrams like these. To pass off simple logic and conditional diagrams as something designed in response to a need in the office offends me. A small history lesson may be in order.

Click to access elements.pdf

The second document, on the other hand, was extremely helpful. It had a clear and concise chart that compared and contrasted two different flows of information design, which were centered on the two most popular uses of the World Wide Web.

That’s a broad topic to cover in just one chapter, especially since it’s the topic I’m really interested in. The chapter covers six different Zen Garden designs and highlights the primary design elements in each. Instead of saying “this is how you do design”, this chapter says “this is how others have done design.”

Atlantis

Minimalist perspectives were part of the problem, not part of the solution. Until Atlantis came along, apparently. While coders have stuck with boxy minimalism that could never be called inspired, Atlantis takes coder minimalism and smashes it against that really expensive, antique, fragile heirloom that you’ve treasured your whole life. Then it dumps a whole bottle of inspiration on it.

Or I’m drinking far too much coffee.

Anyway, while Atlantis uses boxes, it uses the graphic design elements of shape, symbolism, and iconography to make minimalism interesting.

Zunflower

Holy bright, Batman. White background, yellow flowers, and orange-yellow header bars. I had to blink a few times before I could read the chapter. Then again, I’m a fan of the dark. Light and shadow are actually the biggest tools that this design uses to differentiate itself from everything else that’s out there.

This chapter also has a bit about using space, and I agree with most of it. Usually, I discount space as anything more than what’s between the important stuff – the content. After reading this and considering it, I’ve figured out that that’s one of the things that made me a coder, and not a designer.

Springtime

The general and specific info are separated by the ground in this design. The green is very light throughout the bottom, and blue is light near the top, but they meet at a vibrant green line of grass and plant life. The chapter focuses more on the color used in this design, but that’s not what I like about it.

The separation of content by a ground, or a line of earth, is something so far outside of the realm of what I would have considered… I had to stop and just wonder how the designer came up with it. Novel isn’t the word I want, but it’s the only close one that I’ve got.

Viridity

Contrast, pattern, color blindness (and accessibility), CSS code for repeating graphics, contrast, etc. I really didn’t find the design very interesting… I felt overloaded by the greens, honestly.

Ballade

It’s all about connections. Each section must lead from one to the next, and the eye must follow. There is a difference between content naturally flowing from one section to the next and leading the eye from section to section with creativity and subtle detail. Ballade accomplishes this with its literal theme of a walk in a park.

The authors couldn’t decide, initially, if the colors implied Winter or Fall, but I immediately thought of Autumn. Winter would bring blues and whites, while Autumn is all about the browns.

There’s also a helpful comparison between using tables for layout (not what they were designed for), and using CSS for the same layout. CSS is the clear winner, hands-down.

Night Drive

The look at this style is nothing but technical. It addresses specific problems that arose in moving the design from Photoshop into the actual CSS and graphic files. Alternative code layouts compliment an exposition on the purpose of different type of graphic file and compression formats. I took to this section of the chapter more easily than the rest; code-monkey strikes again.

I’m amazed that this worked. Honestly, a bunch of graphic designers got off of their collective rumps and actually took up the challenge to show off the design elements of CSS. It reads like a geek legend – like Kibo – and I’m just amazed.

Long story short, CSS is recommended by the W3C, but nobody’s picking it up. Browser support sucks, and when the support does come about, only coders are using it. Boxy, minimalistic designs that are only using the coding aspect of CSS. Which makes sense, because they’re… well… coders. Like me.

So, Dave Shea puts out this challenge to take his HTML code and crank it up to 11 on the CSS front. And they do. There are over a hundred designs now, and all use the exact same HTML, but look completely different. Graphics, layout, style… DESIGN. This is where I’m lacking. This is the challenge I face: Moving from the coder to the designer.

Maybe being both.

This can’t help but be a good weapon against the auto-suck.