Here are my notes from Sunday's SXSW Interactive panel How To Be Beautiful: More HiFi Design with CSS. Molly Holzschlag, Douglas Bowman, Dan Cederholm and Dave Shea, some of the best designers and foremost CSS gurus on the web were all empaneled. Topics ranged from the importance of sematics in the markup document to a really cool double rollover hack. The talk was informative and Dave Shea's portion especially appealed to me. Check out the notes after the jump.
How To Be Beautiful: More HiFi Design with CSS
Christopher Scmitt - christopher.org heatvision.com
Molly Holzschlag - molly.com
Douglas Bowman - stopdesign.com
Dan Cederholm - simplebits.com
Dave Shea - mezzoblue.com
Molly H.
Markup: Your starting Place
In order to master CSS, master markup first
document and data sturtures are equally as important as design
separation or integration
long advocated speration of structure and style
what do we really mean about document struture?
doctype
presence of root element
presence of head and title
presence of body
The Meaning of Semantics
structure and semantics are not the same thing
semantics literally means "meaning"
semantics in markup refers to the use of elements that have meaning in relation to their content
HTML and XHTML are often limited in element scope, but we do the best we can
semantics play a role in CSS as well (look to create names that have menaing associated with function rather than style)
semantics in markup should not be confused with the SW
thinking in structural terms and meaningful terms
use of meaningful markup
shift away from thinking in presentaion
the goal is to mark up based on signifigance, not the way it's going to look
headers signify headers (h1 means top level importance not big bad and ugly)
paragraphs are used to denote paragraphs
docc trees form the skeleton upon which we will "dress up" our content with style
doc trees are also the foundation of our behaviour layer
visualize the markup tree
using the tree helps understand inheritance, cascade effectivly,
start thinking in data structures
Dan C. simplebits.com/publications/
What makes beautiful CSS?
compelling visual design
bulletproof execution
bulletproof:
embraces felxibility
designs are protected
prepared for worst-case
step 1: the 10-second usability test
take away the CSS (McAfee, sprint, PGAchampionship)
Step 2
Learn the hard way
specify bg color equivalents
step 3: resist thinking in fixed height
strategic bg img placement
use avaiable elements
plan for unseen changes
Dave Shea - mezzoblue.com/archives/prev/sxwsw05
no longer about why? now it's about how.
Process, which comes first? Design or Code. Shea says deisgn first, which I tend to agree with.
(need to practice more, spend more time playing, experimenting, thought about this during cloninger also)
Doug Bowman stopdesign/present/2005/sxsw
remote rollovers
control rollover state of one element with another
<em>
<ul><li><a><em> <em> and <a> both change with hover
Comments