Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Transcendent CSS: Creating the Aesthetic Web

Last updated Oct 17, 2003.

By Molly Holzschlag

For those folks working with Web standards, particularly CSS, the road's been a bit of a difficult one. We've faced a lot of challenges and continue to face them. But there's hope on the horizon, lots of hope. This hope has emerged from the hard work of many people who are attempting to transcend the technical problems and create great Web sites. Our joint goal is to create sites that are structurally sound, accessible, usable, and designed with aesthetic appeal for multiple platform use including screen, print, and wherever possible, mobile devices.

Understanding the Challenges

The first challenge we face is that we have to learn CSS, which isn't particularly easy for most people, especially visual designers accustomed to working in visual design tools such as Photoshop, Fireworks, and so on. There's a reason for this: CSS was developed by technologists for designers, and it's only been recently that the W3C's CSS Working Group has even had input from a visual designer.

This has extended a gap that's long existed between "creatives" and "techies" and has left us all at a disadvantage. Designers are expected to learn programmatic concepts found in CSS such as conflict resolution, application hierarchies, and the specificity algorithm. Conversely, developers tend to find these concepts familiar, but struggle with aesthetics.

In a typical work environment, these seemingly separate factions are, in fact, separated. Designers sit in their area, developers in theirs. But this is a critical mistake. Because technologists tend to grasp CSS as a technical language, while designers are trained in aesthetics, separating them does nothing to advance our understanding, education, and progress. My first recommendation is that we use the buddy system to solve this problem, and get developers and designers working together. It's a great divide in some ways, but one that must be breached in order to progress beyond our current state of affairs.

We've also had to deal with browser compatibility issues. Fortunately, with better CSS in the upcoming IE7, most of us are now in a place where we can design with CSS confidently. Where we cannot, there are good practices to follow, such as using surgical correction techniques and hack strategies; grading browsers and supporting them accordingly; and for some, implementing proprietary techniques such as conditional comments to correct IE-specific concerns. So, at least for the desktop, we're seeing great strides in this area and out of that will come the opportunity to do progressive work.

Now What?

We know we've got a major learning curve and transition on our hands, and while the software products we use as Web designers and developers are getting better all the time, we still have to know the code. I like to compare using a WYSIWYG tool without understanding markup or CSS as allowing Word to correct your spelling and grammar. If you don't know that something's correct or incorrect and allow Word to do all the work, you can end up with a document that is downright unintelligible! So we have to accept that designers must learn as much CSS as we can, and developers must look to designers for help with esthetics. Again, not necessarily an easy task, but one that I believe is fully necessary.

As our skills grow, and our tools become more mature, it becomes imperative that we begin thinking not only about retrofit solutions for existing Web sites, backward compatibility, and how to make something work today, but that we look toward a progressive future where the technology isn't the focus—the entire quality of the project is.

The Fine Art of Web Design

The concept of Transcendent CSS was clarified from discussions around Andy Clarke’s upcoming book from New Riders called Transcending CSS: The Fine Art of Web Design. Clarke had already planted the seeds for this idea via his blog and at conference events prior to writing the book. The concept is simple: Although we need to use CSS to achieve our designs, it's not about CSS. It’s beyond that. It's about seeing our industry and the sites we produce as art rather than science.

In the early editorial conversations for this book, feedback from the publisher regarding the title brought about the term "transcend," and as a result, Transcendent CSS was born.

Principles of Transcendent CSS

The principles of Transcendent CSS are very straightforward:

  • Use CSS that is currently available
  • Deliver better CSS to those browsers able to manage it
  • Use CSS that might not be currently available in such a way that it anticipates a feature. Such features might include attribute, child and adjacent sibling selectors as well as bits of CSS 3.0
  • Embrace a philosophy that combines the value of the designer with the value of the developer to achieve results that literally transcend the limitations of current technologies
  • Look for inspiration off of the Web, not just from other Web sites
  • Collaborate and share your work with the world, don't keep techniques and solutions private

The interesting reality is that we can do all of these things today, at least theoretically. The problems we've faced in the past can be worked around or resolved. What remains for us to manage is accepting and dealing with the learning curve, creating more effective workflows and processes, and getting designers and developers working together.

Changing an ingrained infrastructure and finding the resources to do these things is no doubt a daunting task, but again, one that I feel is absolutely necessary. We need to change in order to move above and beyond the limitations we’re dealing with today and face tomorrow with strong, agile skills; better communication and organization; and ultimately, better Web sites for all.

Transcending CSS: The Fine Art of Web Design by Andy Clarke, edited and with a foreword by Molly E. Holzschlag and introduction by Dave Shea, will be available from New Riders this fall.