Molly
Before the CSS: master the markup
- understand document structure
- 3 separate layers: structure, presentation, behavior
Structure ≠ Semantics
Structure is: correct use of required syntax
Semantics are: use of elements that have some meaning relevant to the document content
- semantics are relevant to CSS
Meaningful markup
- stop thinking presentation
- start thinking meaning
Think data structures, not design
- creates a meaningful document tree
- forms the foundation for behavior layer
- skeleton we dress with presentation
Create a document tree to see what we mean
Tree = inheritance, cascading, reduce errors
Dan
What makes beautiful CSS?
design + execution
Bulletproof: designs are flexible, protected, provides for worst-case scenario
"10 second usability test"
- take away CSS & see if page is legible
- take away images: is site still legible
- use color equivalents for background images in CSS
Don't think in fixed heights
- allows you to plan for changes
Dave
Blog post about the presentation (slides linked within post, with disclaimers)
Design Tools
- design tools have a GUI
- CSS is text, but like a page-layout program
Browser Bugs
- we have to use CSS in ways it wasn't intended
- e.g. min-height, not supported by all
CSS is just a tool, a stage in the design process
Recommend designing it all first, then building it
Note: images can contribute more than CSS to a design
The foundation is good design
Typography: begin learning from books
Doug
Slides from this presentation (available eventually, Doug promised)
Remote Rollovers
- roll over one thing, affects another
- positioning parts of nested elements differently
- all nested within anchor tag
- e.g. putting link in both header and footer
Beauty in Nature
- can now build sites that have beautiful source as well as design, like patterns in nature