CSS Positioning and Visual Design

The table-based approach to layout that you learned in 320/741 (or on your own) was cutting edge back when David Siegel pioneered it back in 1997. But browsers have come a long way since then, and markup has evolved to match that.

Using tables for layout has two major problems. The first is that it ties together content and presentation, which are two components that are best left separate. The second is that it results in bloated, slow-loading code.

We'll discuss the importance of separating content and presentation, as well as the specifics of the CSS box model and cross-browser challenges for CSS-based positioning.

Readings on CSS Positioning

• Chapters 10-12 of Designing With Web Standards (pages 235-297)
• Bill Merikallio: Why Tables for Layout is Stupid
• Brainjar: CSS Positioning
• a list apart: Flexible Layouts with CSS Positioning
• Webreference.com: Advanced CSS Layouts, Step-by-Step
• The Noodle Incident: CSS Box Lessons

--

And a late addition:

• Relatively Absolute @ The Autistic Cuckoo - a very clear explanation of the difference between relative and absolute positioning, as well as the default (static) positioning and use of float properties.

Readings on Visual Design

• Boxes & Arrows: Visible Narratives: Understanding Visual Organization
• Web Page Design for Designers: Taming the Electronic Page

Useful color tools:

• Man In Blue: Technicolor Tool
• Hex Color Chart: Visibone
• Colour Tools Roundup

CSS Zen Garden Critique

Go to the CSS Zen Garden web site, and look at a minimum of ten different designs. Pick one that you really like, and one that you don't, and post a comment here explaining why you selected the ones you did (provide the name as well as the template #, which appears in the URL).

You should work with at least one other person, but no more than two other people. You only need one comment here for your pair or trio, but all of your names should appear in it.

Group Interaction Tools

On Wednesday, I'll show several examples of group communication tools that you can choose for working in your groups this quarter. They include:

• Group tools in myCourses
• FirstClass conferences
• Password-protected wikis
• Basecamp project management

Whichever option your group chooses, you should make sure you have it in place, and everyone is familiar with login methods, before you leave for break!

I should have group assignments out by tomorrow afternoon...