Valerie was asking for some good starting points on CSS-based layout and design, so here are some of the links I sent her way:

• Start with the W3Schools guide to learn some syntax.
• Pick up some tips from Zeldman’s Journey at AListApart.
• Acquaint yourself with the code via MaxDesign tutorials.
• Steal a CSS template or two from Glish, or just just google for them.
• And when you want to go hardcore, browse the Zen Garden.
• One thing I forgot to email to her was the Position Is Everything one stop CSS-bug-and-fix shop.

The comments are open to additional CSS links which I may have missed or forgotten.

CSS “@import” notation should precede all other CSS declarations. I’ve been doing CSS-based layout for three years now, and this is the first time I’ve come across this rule, discovered while struggling with styles not showing on a project at work. Learn something new everyday, I guess.

Travelocity has redesigned, and is now laid out in CSS. Navigation appears to be some variation of the suckerfish, and the dropdowns break rather badly in Opera 7, dissolving into a mess of unfloated, overlapping list items which loop in and out of a :hover state repeatedly whenever the mouse is over them. In Safari, only the first item in each nav list drops down; the rest are hidden away from the user’s eyes, denying Travelocity the views and profits of Mac OS X users everywhere. This effort to move towards cleaner, more usable, standards-friendly design is admirable, but till Travelocity’s cross-platform deficiencies can be fixed, I’ll be sticking with my preferred travel site for now, thank you.

Sippey has written/drawn up some visual analysis of Travelocity and other travel sites. I’m not sold on Expedia’s “front-and-center” treatment of the flight search box as the best scheme. Remember the “visual Z”: On first viewing, readers and users tend to scan newspaper, magazine, and website layouts in a quick “Z” above the fold, starting at the top left of the page and ending at the bottom right. It’s most important to put the focal points of pivotal elements — such as primary navigation or reservation forms — right where the Z starts. Center-of-the-page positioning is not terribly wrong, of course, as long as the form is designed to be prominent enough to catch the viewer’s attention, but on a subliminal level, the user only sees the reservation form when beginning the diagonal leg of the “Z-scan,” thus lessening its perceived importance for precious seconds before more detailed reading comes in.

It might be argued that Travelocity and Orbitz get the “Z” wrong, placing the reservations form below primary navigation and branding, but it must be remembered that we’re talking about scanning here, not reading. The user’s vision takes in a wide swath of detail, making instinctive connections between borders, headers, and boxes. In Travelocity’s case, we first see the logo, the navigation bar, the reservations form, and the special promo graphic — all important elements. In Expedia’s case, we see a logo, a white space, a banner/textad, and a bunch of tabs in the moments before we even start to notice the reservations form.

These are all unconscious thought processes that occur in the first few seconds that a page is viewed, and those seconds count. As I constantly told my graphic design staffers back in my Guidon days, the designer’s job is mostly subliminal. A good layout is barely noticed, introducing the reader to the content and keeping them with it to the end. Or, as usability guru Steve Krug puts it, “Don’t Make Me Think.”