CSS: Bridging The Gap Between Creative And IT
Friday August 13th 2004
For me, learning CSS has been a journey, not merely an exercise. And while I tend to be a practical guy most of the time (which CSS is all of the time), I've also been known to be impatient. Not about the little stuff, like how long I'll have to stand in line, or when the light will hurry up and turn green already??! I'm impatient about big picture things, things you look forward to only after a lot of time and effort. Your first date. Your first child. Your glorious and well-earned day of retirement. Journeys.
With respect to my impatience with CSS, what I've been waiting and looking for is how CSS is relevant in my situation. How can I apply it to all I've learned in my years designing websites? Since I've always worked for myself, I've maintained the role of both designer and coder, simultaneously and symbiotically. I didn't care how I named my images when I designed site mock-ups, because it meant that I also knew what to call them from my html markup. Sure, I always made it a habit to comment my code, often verbosely, but that was because it was "good practice" that spoke to me on a fundamental level. My programming logic was very deliberate, even if my presentation code was always a bit behind the times. If there was a certain disorder to my way of thinking, I could never really see it. . .
But split my designer/coder personalities, and what do you have before you? A free-form thinker staring off into space while a neat-freak tidies up non-stop. How could these two ever get along? With CSS, that's how. CSS can bridge the communication gap between my creative side, and my IT side; the gap between your creative and IT sides; between ours.
Applied Learning
So right, CSS might not serve a functional role when it's my One Man Army of web designing against the world. Yes, CSS and XHTML serve a greater good by being well-structured, semantic, accessible, leaner, and all that other good stuff. But it isn't a clear-cut way to shave hours off of my development process, since I've always done coding and designing and prototyping and testing and everything else, all by myself. So it was never an issue of a communication gap.
But enter a business setting, with teams of IT geeks and creatives, and suddenly there's a gap the size of the Grand Canyon. Coders need structure, reliability, consistency. Creatives need a free-form environment without shackles to keep their artistic spirits down. Yet in the table-based design world of yore, these two opposing groups have no choice but to eat off of the same plate. Take this scenario:
Creatives design the site in Photoshop, slice it up, and export it to a simple HTML-based table layout. Then they pull up the HTML document into Dreamweaver, tweak the layout, add content, save it out, and move on to the next page.
Only now is it in IT's hands. IT goes in and cleans up what trash code Dreamweaver left behind, edits the copy for typos and errors, slips in any necessary server- and client-side scripting, tests, debugs, tests, and goes live. If there is to be a design tweak at this point, well, now there's a tiny power struggle at hand: Creative wants to make some changes, but IT has a firm grasp on the raw files and won't let go. So IT writes up the specs for the images needed, Creative supplies them, a little back-and-forth ensues to get the new graphics and old code to work together, and we're back to a live status.
Let's see how many things are wrong with this picture.
- Let's be honest: for any real web developer, Dreamweaver is merely a sampling of his or her diverse web toolbox. Dreamweaver is designed for the lowest-common denominator, which means it can only give you so much control and power over the development of a site. So if a site is being built above a foundation of Dreamweaver code, your limiting your reach to the stars of form and function.
- To an IT buff, the thought of Creatives having their muddy hands fingering through code is a nightmare. ITs like tabbed lines, lean mark-up, and layouts that flow and make sense both behind the scenes and up front. Our concern isn't so much how it looks, but how it works.
- I can't say this any simpler: updates are a bitch. Changing one graphic means having to go through a swarm of hands, not to mention changing a font style. Yes, IT has the option of doing a series of file includes to help lessen the potential drain of productivity by making laborious site-wide changes, but that still doesn't keep you from being an intimate bedfellow with BBEdit's search-and-replace functionality.
- IT can't really begin testing of any back-end functionality until Creative has handed off the HTML pages. Imagine the pain and suffering of working out code bugs on templates, and then having to re-thread them into the real thing only to retest and re-debug.
- IT and Creative will find themselves in constant On Hold patterns while the other has control over the single HTML file.
I think you get the idea. . . So now then, how might CSS (and well-structured (X)HTML) come to the rescue? By allowing both teams to work comletely independent of each other, yet still in concert. Follow along with this new workflow:
- IT & Creative sit down to discuss the structure and content of a site. Schematics are developed that map out the flow of the site, as well as the content elements of each section/page. Headers, subheads, breadcrumb links, logos, navigation--everything that can be found on each page.
- Creative takes these schematics and run with them: mock-ups are churned out, marked up, and revised. Having a well-planned page & site structure allows them to ensure that all elements are designed for.
- Meanwhile, IT whips up not templates, but the actual site itself. There is NO waiting around for Creative. (X)HTML documents are assembled, all well-structured, semantically sound. Then the front- and back-end programming is coded, layed over top, and tested.
- As each Photoshop document comes down from the Creative shop, ready to be put to use, the studio's CSS go-to-guy/gal (ahem) takes the layout and starts working out the stylesheets. These stylesheets can be tested by viewing the actual (X)HTML files being worked on by IT, as they continue to develop the site's functionality.
- At some point near the end of the road, it's a matter of fine-tuning and tweaking as with all site projects. But here it's a fully cooperative project--Creatives, CSS, and IT work together to place in the final images, work out the final logic flow, and go through the last bit of cross-browser testing.
Is this obvious to everyone else already, am I the only one that has just now realized the beauty and power of CSS in an agency/studio environment? The top CSS/XHTML developers out there today tend to be Lone Rangers of the Web, working for themselves or tiny design firms where they are the sole designer and programmer, so it isn't something you hear from them often. Similarly, they always seem to be speaking to a crowd of people that wish to be just like them. But for those of us that find ourselves in a room of IT and Creatives that more closely resembles a junior high school prom dance floor than a professional conference room, perhaps these thoughts can help light the way down a new, brighter, more efficient, more rewarding, and more profitable road. . .