molly.com
Tuesday 25 July 2006
Transcendent CSS: Creating the Aesthetic Web
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.
Please, Can’t We All Just Get Along?
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.
So 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.
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.
Filed under: WaSP, blog slut, blogging, policies, professional, society, software, standards, web design and development
Posted by: Molly | 16:57 | Comments (25)
Outstanding article Molly….this is the sort of CSS in Web Standards article I was hoping to read sometime very soon because it’s seems to be needed at the moment. You’ve really (once again) embraced what Web Standards and it’s future are all about…(at least, the way I see it).
This is an extremely positive and welcomed piece of writing…I expect people to take real notice of it – and if they don’t – then they must be missing something!
‘Integration’ is definately the keyword here (between developers and designers…and some people with skills in both).
A brief comment though: CSS 3.0 is still a bit of a mystery to designers at the moment and the spec isn’t the most complete looking of things…will there be more on this from W3 over the second half of the year? Will you or that cheeky-chappy Malarkey be giving the rest of us a more clear picture of what can and cannot be done with CSS 3.0?
I think it’s uptake will be slowed while some designers are still doing all they can to master CSS 2….(just a thought)
add to that – never attach oneself personally to the product you make, in the sense you must be open to advice and even constructive criticism.
i found working in a corporate environment for the first time this year that it gets to the ownership stage where if you suggest something in the code or they only have a basic CSS knowledge then you politically do very bad… the coder believes they know everything about front end markup, the programmer the same, and dare ask the designer if maybe there shouldn’t be a slightly bigger difference in colour. Then to top that off mention accessibility – mind you the site is inaccessible in a major way – and they all in chorus say they understand everything about accessibility.
in the end i just shut up and did my chores because IMO nobody was receptive to help – it was as you point out an office of them and us. Everyone else was them.
its quite depressing to see the corporate environment chew up a project via continual meetings and signoffs turning it into way less than it could or even should have been.
valid points molly.
And that’s where the webdesigner comes on stage, to create the link between the arrgh-code-my-eyes-bleed graphic designer and the artistically-diseased developper
I’m sorry but I see the first three points
- Use CSS that is currently available
- Deliver better CSS [...] to manage it
- Use CSS that might not be [...] bits of CSS 3.0
as a generalization of the already widely used “alternate stylesheets” trick plus some browser detection technicalities.
The fourth point
- Embrace a philosophy that combines [..] limitations of current technologies
sounds something about “extreme programming” where designers and devlopers work together in a highly-collaborative/dynamic environment.
The fifth point is the news, IMHO. Personally, I tend to get a page design out from every environmental element such as a tree, a house, a child face and stuff like that; that is, being inspired by the real world!
The last point, again, is nothing new; it’s a free software and open source based principle. No more, no less.
In the end, my thought about web developing is that it should be approached as a normal software development process (with more efforts on the HCI aspects); thus, the only difference is the technological environment (HTML, XML, CSS, PHP, …): Engineering principles, best practices and open source philosophies should be always take into account. As usual.
Bye,
–
Federico
RE: nortypig
I just want to add an AMEN! to everything you said in your response. I feel the same way – no matter how much you preach or teach – it seems to fall on deaf ears, or ears that simply agree but yet turn around and ignore everything that is said.
And, in a corporate website it makes it that much more frustrating.
Great article Molly!
Regarding:
I challenge this comment with a couple of responses.
Early versions of CorelDRAW were very much like the programming language BASIC where the “designer” of the day needed to program the shape and its placement.
In discussions with my publisher and page-layout person, they need to be good designers as well as understand the structure of a document (even if it is only a printed document) so that when using QuarkXpress, they can create and apply a stylesheet to the documents they receive. These types of designers can’t focus on only the “pretty pictures” but must understand the nature of document structure and be able to create style sheets in QuarkXpress to work with both the style and structure at the same time. Even if QuarkXpress’s style sheet tools are menu-driven, it does require that a document designer understand document structure.
Also, the designers I look up to in the Web arena are quite capable of handling both: Dave Shea, Eric Meyer, Andy Clarke, and Dan Cederholm (to name just some of them) are adept at (X)HTML, CSS and graphic design and some are good at PHP too. These are people who have been able to bridge the gap.
However, there is nothing wrong with not being able to bridge the gap: I have seen job ads for people who are paid to convert Photoshop mockups into CSS-driven web designs. As long as the coder and designer can communicate and work together on project like these, there is no shame in not being able to bridge the gap.
Great topic Molly! It is about time someone brought this up again.
I find it ironic that much of the talk about the “new professionalism” concerns the interaction between the website maker and the client, or the website maker and the public at large but ignores the dynamics within our profession.
How are we going to get respect outside of our field if we cant get it from our peers?
I only hope this doesn’t devolve into one of those tired “programmers vs designers” debates.
Love it Molly… While I agree there is the rare person who can do it all, I believe for most, the advantage is in specializing and cooperating. In the beginning I loved design. But several years ago, I made the decision to specialize in client-side development — XHTML/CSS. I have two designers I work with regularly (much quicker or more proficient than I was) and several server-side people — depending on what language I need. I also subcontract for other webdev companies that want to build sites based around standards and accessibility, but don’t have the time to learn to do it well.
When everyone works in the area of their specialty and expertise, we all work more quickly and efficiently. And in the long run, the client gets a better deal. Sometimes my designers do something that “can’t be done” with CSS — at least if I were designing the comp, I would design around the possible issue. But working with them causes me to push myself to make it work in creative ways I probably wouldn’t have come up with on my own. And sometimes they compromise as well. With time, we’ve developed trust in each other’s abilities and strengths — I know how they design or code, they know my work, and it’s a great symbiotic relationship.
Good post…
Look for inspiration off of the Web, not just from other Web sites
Such a simple point, yet one that I regularly need to be reminded about…
Totally aside that I’m testing coComment here, I’m going to remember your comparison between whizzy-wig CSS and the Word spellchecker. That’s a very good one!
Why are we giving a nothing name to an already well understood aproach to CSS development? ‘Trancendant CSS’ is nothing more than already discussed good practices. Can’t we just call it CSS and be done with buzz words and wanna-be-hype? The first step to being professional is to act it, rather than play at it.
“it’s only been recently that the W3C’s CSS Working Group has even had input from a visual designer” – I had been under the impression that Jeff Veen was a designer who once sat on the W3C…
Spot on!
Alright there,
I can confirm that the separation you speak of impedes the progress of what is currently possible on the web. I’m in the fortunate position of working for my older bro’s internet company for the last year. He’s always been the avid developer and general server-side genius while my experience of writing html and css started after a mate pointed me to the css zen garden. Its been a very steep learning curve but im glad to say ive never nested a table. Because we work side by side the usability, accessibility and aesthetics of our products has improved dramatically and even been incorporated into the back-end sytsems we have (mainly because im a demanding bugger, ‘i want alt tags by default NOW!’). We’re only just scratching the surface so far but there’s a lot of good come of it already.
Great article.
=]
[...] molly.com: Transcendent CSS: Creating the Aesthetic Web [...]
[...] Zusammen-arbeiten im Büro “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.” (Quelle: molly.com, via: cne _LOG) [...]
[...] Quelle: Molly E. Holzschlag “Transcendent CSS: Creating the Aesthetic Web” [...]
There is no question that we all can get along but not without our share of difficulties along the way. It would be better if graphic designers would learn the language but this isn’t often a job expectation and their salary certainly does not reflect the additional skillset. Programmers that I have had the experience to work with do not have the polished CSS skills necessary to take over what the designer intended from a PSD. CSS does require a great deal of time and experience and raw memorization to get a feel for all that you can do with it. So, who is the middle man in all of this? That’s the CSS consultant they hire in desperation nine months into the project to clean up the mess.
nice idea .
There is no question that we all can get along but not without our share of difficulties along the way. It would be better if graphic designers would learn the language but this isn’t often a job expectation and their salary certainly does not reflect the additional skillset. Programmers that I have had the experience to work with do not have the polished CSS skills necessary to take over what the designer intended from a PSD. CSS does require a great deal of time and experience and raw memorization to get a feel for all that you can do with it. So, who is the middle man in all of this? That’s the CSS consultant they hire in desperation nine months into the project to clean up the mess.
thanks
thankyou ..
[...] molly.com [...]
thanks
thanks for your article and being as a base of my works.