We now return you to your regularly scheduled program.
—
So, after I was done officiating the funeral,
So, what now? How do I go back to the day to day after a week like this? I told
I have more catching up to do than I have all semester, but somehow I don’t feel daunted by it. I don’t feel overwhelmed. I feel like there’s a reason to be doing what I’m doing.
What a god damn week.
TAURUS (April 20-May 20): In ancient Greek myth, Prometheus stole the gods’ fire and bequeathed it to human beings, allowing them to cook, stay warm when the weather was cold, and make tools and bricks and pottery. According to my reading of the astrological omens, a Prometheus-like influence is now hovering at the peripheries of your world, angling to provide you with a boon that’s pretty damn good, even if it isn’t as monumental as fire. There’s a catch, however. This benefactor will not be able to bestow the gift unless you aggressively ask for it and unless you are alert for its arrival from an unexpected direction.
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.
Congratulations, you’re a Wizard! Very wise and
old, the Istari were sent to Middle Earth to
help and guide its inhabitants. Gandalf and
Radagast are good-natured, but watch out for
Saruman.
Which of Tolkien’s races are you best suited for?
brought to you by Quizilla
WHITE
??Which colour of Death is yours??
brought to you by Quizilla
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.
TAURUS (April 20-May 20): The *Fortean Times* reported on the odd case of Dixie, a British donkey that brays backwards. Instead of the usual hee-haw, she expresses herself with the sound of haw-hee. I nominate her to be an inspirational role model for your own inner donkey in the coming week, Taurus. Encourage that tireless, steady, hard-working part of you to be playfully deviant, fond of reversals, and on the lookout for upside-down and inside-out forms of expression–while still remaining devoted to completing the demanding tasks at hand.