Hi-Fi CSS

Schmitt (host): Book signing after the event. Q/A via notecards (very high tech). Free books for questions. Zen of CSS, Meyer, etc. Will be on Rendezvous for messages.

How to be beautiful. Host is author of CSS Cookbook, Graduate student at FSU in Interactive and New Comm, Molly is one of the top 25 most influential women on the web. Author of numerous books. Cederholm is an award winning desinger. Shea is the owner of Bright Creative and founder of the Zen Garden. Bowman is the founder of Stopdesign.

M: Poll, expert, intermediate, newby? (I am intermediate because i haven't discovered anything...)

Markup, the starting place

CSS is an integrated language that connects to markup. In order to master CSS, markup must be mastered. (content and design separation)

Standards oriented designers have moved to a greater understanding that document and data structures are as important as the design.

Separation of integration?

Writing CSS means understanding the document structure from the ground up. Separation in the layers: structure, behavior, presentation.

Structure means the correct use of required syntax: proper DOCTYPE, presence of root element html, presence of head and title elements, presence of body elements.

Semantics

Structure and semantics are not the same. The word semantics literally means "meaning" of something. Semantics in markup refers to elements that have some relation to the content they are marking up.

If you are writing your own XML language you can have far more explicit links but the current iteration of HTML limits the scope of available elements.

How we name id and class elements is significant: semantic instead of presentational. #leftcolumn is not semantic because what if you want that content block on the right? It now loses it's meaning. The presentation should be completely separate from semantic categorization.

What is the function of the content? That should be the descriptive title.

.red is meaningless.

Semantic in markup does not refer to the semantic web. This means associating the naming of things with the significance of their function.

Use

Shift away from thinking in presentation. Look at markup not based on what it looks like but instead think of it's significance and context.

Headers should be headers - h1 does not mean big bold and ugly, it is the highest level heading. p means a paragraph. Don't use breaks needlessly! li should be list items. table elements should be used for tables of information not for layout.

Data structures, not design

We are dealing with real languages. Combine structure and markup in meaningful ways. Understand that this work creates a meaningful document tree to form a skeleton upon which we will "dress" our content.

[Visualize the markup tree graphic]

C: Web version of talk

What makes a site beautiful? Compelling visual design. Bulletproof design embraces flexibility and does not depend on content amount.

All designs should be designed for worst case scenarios. The page should always remain readable despite content specifics.

Step 1

X-ray the document by reading it without the presentation layers.

Looking at MLB.com you see that a site is unreadable without the presentation layer. CSS is only used halfway.

A simple fix to some common problems is to make background colors similar in appearance to tiled background images. Place background images strategically.

(paying attention, the presentation is on his site)

S: URL will be up. How many use text editors? (I do)

The separation of structure and presentation has really caught on. Thanks to Molly and others we are caught up on this. This ironic because graphic designers are now conforming to convention. Latte sipping, mac loving, designer types are now convention conformists and it is good!

So how do we apply these ideas to our work?

What design tools do we use? GUI

Graphic designers think visually: dragging, dropping, etc. CSS is a language and is not part of the natural environment of design. It is kind of like a page layout program. You define styles programatically and changes impact appearance on a modular level.

It is unlike a page layout program because it is code not GUI.

Some of the problem with CSS is the presence of different user browsers. Hacks are controversial but the bugs are the fault of CSS implementation.

min-height isn't supported uniformly. To get that functionality you have to have all kinds of padding hacks. This is stupid but it is reality right now.

We have to reconcile the difference between pointing and clicking our way to a layout and coding.

The most effective tools are combinations of code and preview. It's not quite drag and drop but it is different enough from the text editor that it makes a difference.

Most of the big dogs use text editors but these other tools can be useful.

You can build however you want and then plug CSS into your workflow as you prefer.

Shea uses paper and then Photoshop. Before any code is written the whole thing is planned. When you code first you are too focussed on the limitation of CSS. Do the design and then figure out a solution. Make the code work for you and your vision.

Don't paint yourself into a corner by starting with the code.

The CSS does not bring the visual interest, it is how you use it and what you do with it.

Design Concepts

Color Theory, Form and Shape, Spacing, Texture, Typography, and Dimension. Think like a designer and produce something beautiful

General Tips

Know your tools. Study typography. Study inspiring designs. Practice. Find imagery sources. Keep your eyes open.

B: Double rollovers: better than good.

Remote rollovers allow you to change the state of another element with another element. When you mouse over one photo you see a little tab for the next image on Doug's photo gallery.

This was originally implemented for the Adaptive Path partner photo list.

This is built on a simple ul. This depends on the em tag in each li element.

hover applied to an a element positions an image via absolute anywhere you want on the page.

You don't have to use this technique just for rollovers. You could use this on Google Maps to show bubbles of more info.

(Running low on time. I wish he could go on all afternoon. This man is brilliant.)

We've been building gorgeous sites forever. We can now build clean, simple, and beautiful down to the core of the site.

Looking at a an orange you see that nature consists on beauty in both directions - on the surface and down as deep as you can go.

Doug received an e-mail from a blind man about how great the Wired redesign was for him. Beauty is not only that which appeals to the eye but also that which appeals to people with no eyes.

QUESTIONS

B: Yes this method violates the separation between appearance and structure.

Jeremy Keith: fixed height is gone. why not fixed width?

C: height is the only direction he could go if sites already have fixed widths.

?: typography sources?

S: The web has had a limited history of typography. Look at books (That's what I'm doing, don't I feel good) and go to the web typography panel on tuesday. The elements of typography style. Typographic elements: form and communication. Go to mezzoblue and look at the books recommended there.

David ?: What would you say to my intro to HTML prof who never mentioned CSS?

H: Say that you want a job! Everybody wants this and if you don't know it you are being sold a bill of goods.

?: What is the most urgently needed improvement to CSS?

B: Parent selector.

S: Embedded type but it is more of a licensing issue.

C: Multiple background images to elements.

H: Please with CSS and wants browsers to get better.

S: There is no element way to scale images in CSS.