SXSW 04: Panel notes for "CSS: The Good, The Bad and The Ugly" 2004

Panel: Brian Alvey of Weblogs Inc, Kimberly Blessing of AOL, Doug Bowman of Stop Design, Eric Meyer and moderated by Tantek Çelik
Monday, March 15th

Notes:

The Good:
Tantek: Start paying attention to CSS 2.1 Candidate Recommendation instead of CSS 2.0.

Tantek's slides for his great presentation:

- avoid hacks
- fewer is better
- further from content is better
--- clean content
--- clean style sheet
--- import style sheet with the hack

There are some great bookmarklets (a.k.a. favelets) out there to make your testing easier. Eric showed off some I really liked for adding styled borders to the tables and highlighting images without alt tags and things like that. Unfortunately, he didn't say or I didn't catch where he got them. They don't seem to be on his CSS reference page or part of Tantek's Favelet's page. Anyone know? (Yes, they're probably something I could figure out after a while how to make, but it'd be nice to have these examples I want to use to improve my CSS and then I can figure out how to do favelets for style changes later).

Someone, Eric or Brian I think, gave some nice examples of bad use of styles in lists where each entry in an unordered list with class="foo" has a class="bar" in its LI tag. You could just do
ul#foo li {style rules}
instead of having a "bar" style defined and having to declare the style in all those tags.

Someone said to assume that display:none will cause that element not to be read by many if not most screen readers. This makes Fahner Image Replacement a non-accessible solution.

Kimberly showed some very interesting things they're doing at AOL to make it easier for staff adding new content to insert it into the design without having to understand how to write clean CSS. She showed a very stylized grid of possible positions and sizes for content in the basic page layouts. Selection of a position seems to bring up an input box for the information (headline, image, main text, links for further info) which is then put into the template. Very clean and produces very consistent look & feel with a variety of folks doing the actual input. It reminds me of a more sophisticated version of the administrative interface SoftDevices made for Kevin Smokler's Central Booking site.

See also the much better notes from Matt May which were helpful to me in sorting out who said what in my brief notes.

Comments

SXSW 04: Panel notes for "CSS: The Good, The Bad and The Ugly"

Panel: Brian Alvey of Weblogs Inc, Kimberly Blessing of AOL, Doug Bowman of Stop Design, Eric Meyer and moderated by Tantek Çelik
Monday, March 15th

Notes:

The Good:
Tantek: Start paying attention to CSS 2.1 Candidate Recommendation instead of CSS 2.0.

Tantek's slides for his great presentation:

- avoid hacks
- fewer is better
- further from content is better
--- clean content
--- clean style sheet
--- import style sheet with the hack

There are some great bookmarklets (a.k.a. favelets) out there to make your testing easier. Eric showed off some I really liked for adding styled borders to the tables and highlighting images without alt tags and things like that. Unfortunately, he didn't say or I didn't catch where he got them. They don't seem to be on his CSS reference page or part of Tantek's Favelet's page. Anyone know? (Yes, they're probably something I could figure out after a while how to make, but it'd be nice to have these examples I want to use to improve my CSS and then I can figure out how to do favelets for style changes later).

Someone, Eric or Brian I think, gave some nice examples of bad use of styles in lists where each entry in an unordered list with class="foo" has a class="bar" in its LI tag. You could just do
ul#foo li {style rules}
instead of having a "bar" style defined and having to declare the style in all those tags.

Someone said to assume that display:none will cause that element not to be read by many if not most screen readers. This makes Fahner Image Replacement a non-accessible solution.

Kimberly showed some very interesting things they're doing at AOL to make it easier for staff adding new content to insert it into the design without having to understand how to write clean CSS. She showed a very stylized grid of possible positions and sizes for content in the basic page layouts. Selection of a position seems to bring up an input box for the information (headline, image, main text, links for further info) which is then put into the template. Very clean and produces very consistent look & feel with a variety of folks doing the actual input. It reminds me of a more sophisticated version of the administrative interface SoftDevices made for Kevin Smokler's Central Booking site.

See also the much better notes from Matt May which were helpful to me in sorting out who said what in my brief notes.

« SXSW 04: Notes from panel "Accessibility Is For Everybody" | Main | SXSW 04: Keynote with Eli and Zack from Moveon.org »

Blog (noun) A weblog or similar brief journal usually containing links and commentary thereon. Term coined by Peter Merholz.
Visit Typepad or Blogger to start your own. (I began with hand coding, then switched to Blogger when it first became available, then to Movable Type when I wanted more control over my weblog and to have it hosted at a place of my choosing (Hurricane Electric). Now I use Typepad, built by the same folks who made Movable Type and I love it).

You may write to Dinah @ this domain.

Except where otherwise noted all content is copyright 1965-2012 Dinah Sanders. Please do not repost my writing or other creations elsewhere. Instead, copy a tiny bit and link to the rest. Thanks! Images are copyright of their original creators. MetaGrrrl logo and photos by Dinah are copyright 1965-2012 Dinah Sanders. Inkspot Books and the Inkspot logo have been Service Marks of Dinah Sanders since 1993.