Web Directions North » Blog Archive » Transcendent Design with CSS & JavaScript

Transcendent Design with CSS & JavaScript

Presentation with Andy Clarke and Aaron Gustafson. This presentation had a number of demonstrations and my apologies ahead of time for not being able to include the dynamics of those examples in this coverage.

• trying to get people to think about technologies and applications. Why we’re doing what we’re doing and how can we improve.
• likes what we do as a creative medium.
• about 50/50 design/technical in the audience. we’re all creative no matter what we’re trying to do.
• we get too focused on the technology and the techniques.
• latest in a long series of conferences on CSS (6-7 years)
• have we talked about all there is to know about CSS?
• if we think so, we’ll start to stagnate.
• who’s heard of Jacob Neilson? There’s been conventions that have been established that we need to follow.
• The web is still young; we can’t have already learned all there is to know.
• “Art is design without compromise” - Jeffrey Veen
• faced with limitations
  • Environment; the inflexibility
  • Materials; the limitations of markups and CSS
  • Medium; poorer CSS in older browsers
  • Ourselves; Unlearning that we have learned from past experience
• We can play it safe, but maybe we can move away from that.
• examples discussing layout options - first steps at moving us away from tables. allowed us to really think about layout.
• the zen garden
• there’s this hesitance on trying to do this on a corporate site. “we have to have it same across all browsers”. sites don’t need to look the same.
• web standards awards
• “We’ve arrived at a situation where beautiful sites with beautiful code are being produced by the hundreds; every month, every week, every day. it’s no longer a myth that you can produce a stunning site with Web Standards.” - Cameron Adams
• a lot of emphasis on the science. discussions of design get centered around that.
• buying iPod’s because it’s an Apple. functional design doesn’t mean we have to develop sites that are dull. what is it that our brands mean?
• why use delicious over magnolia? Magnolia looks nicer.
• Not all web designers are aware of web standards.
• we need to expand the conversation to include these people.
• How do we find inspiration?
• some just use screenshots of other web sites but there’s ways we can look outside of the web to find inspiration and sticking them in scrapbooks. Looking at ways certain elements are treated and bringing them into the web.
• look at things away from the printed page, too.
• Print designs have conventions but still have the flexibility to present information in different ways.
• looking at taking things from other cultures and bring them into our design.

Meaningful Markup

• Semantics means “meaning”
• Markup as meaningful to content
• The content-out approach
• aids accessibility and SEO
• Valid is not always meaningful.
• (over to Aaron)
• DOM visualization
• (showing example DOM tree)
• we use the DOM structure to target using CSS selectors
• (a more complex DOM example)
• (an example that shows how things look to JavaScript including text elements)
• “Simplify replacing table cells with div”
• CSS Naked Day
• - how did people actually structure their site.
• Designs and potential markups
• what is the meaning of the things that I’m seeing
• (going through a number of examples)

CSS Positioning

• Mastering position with its enormous potential for layout flexibility and robust behavior will be one of the most rewarding challenges you can take on when learning CSS.
• (a small demo)
• once we have a solid structure of HTML and CSS, we can add JavaScript.
• (shows previous example with JavaScript added in creating an animation for enlarging images)

CSS and JavaScript

• very similar. both have ways to access elements via CSS and JS.
• Attribute selectors
• Accessing attributes (using javascript)
• with javascript, can create new content “whole hog”.
• (example of a page glossary using javascript that pulled abbr out into its own section)

CSS3 Multi-column Module

• the advantages of JavaScript allow us to plug holes in CSS and browsers.
• important to try this stuff out now so that we can give feedback to those developing the standards right now.
• as an example, the original stuff didn’t include support for images for column rules. as a result of suggesting it, it is now getting into the spec.

Zebra Tables

• table striping
• :nth-child is coming but until then we can use JavaScript.

Other Examples

• using -9999em to hide the content but still allow it for those with screen readers who still have javascript enabled
• example using an FAQ that automatically expands out (with animation) when sliding stuff out

CSS3 Advanced Layout Module

• designed to give us really flexible layout possibilities
• “must have been on acid when they came up with this” but that it’ll work out really well when we can begin using it.
• introduces a stretchy grid that we can apply to elements
• reiterates need to tell the W3C any quirks with the layout module.
• (demo using javascript)

Posted by Jonathan on 8/02/07 at 1:00 pm