Oh, hmm... that doesn't look right! Is that dark background #040108, per chance? This is a screenshot from CSS Edit's preview window.

Hello there, I've been invited to write on ControlShift, so I best get to it! My name's Dave Balogh, I've been working here for over 3 years and had the pleasure to work on many of the various channels here. I currently reside on AOL Body, AOL Home, and help out on many of the other AOL Living channels. As AOL has transitioned to the open web, our workflow and process has undergone many of its own transitions. Over the last year I have been taking on CSS duties for my specific channels, with the intent to make our content more solid than ever. This can be seen most prevalently on AOL Home, where I had the opportunity to work tightly with my Art Director, Web Techs, and programming team. What I want to highlight is what my process is, and how it may work for your teams. Read on!

When working on a new channel, the number one thing to realize is 80-90% of your work is already done! Our Web Technologists have built many of our channels and have all the defined structures in the CSS. As the designer of the site, fit and finish is ultimately where we come in. A process that normally involves hours of spec'ing in Photoshop is whittled down to setting those key elements ourselves. This allows us to skip all the hours of back & forth communication with our Web Techs. It also allows for quick changes to the design as they come in, saving even more time for future iterations.

So what do I use to build these? Well, despite some controversy, I find my method to make the most sense in terms of workflow. I start with CSS Edit from a company called Mac Rabbit. This means I essentially (and here's the kicker) start with Webkit, which is what Apple's Safari is built on. Strange? Not really, and here's why. Safari is quite standards compliant. I wouldn't say that was completely true with versions 2 and below, but 3+ are a great place to start. It is more inline with Firefox now, and since v3 was part of an auto update, designing for 2 isn't really a necessity anymore. So right off the bat after taking care of minor FF adjustments, I've taken care of 4 browsers essentially: Safari Mac/PC, and FF Mac/PC. This program allows designers to build the code with the visual cues they need to inspect things, to format, to troubleshoot, etc. Combined with a text edit program like TextMate, and you got a powerful setup. I generally download pages for local use, and link them to my local CSS files.

Once I work all of that out, I then do the grueling task of IE6/7 testing and hacks. This can be painful as they just don't play nice, but it is a necessary evil until they are both replaced with IE8. Part of making this process smoother is to keep too many complexities out of the design as well. We run into more issues on feature packages, as we try new compositions. Of note with AOL Body I've made this process easier by keeping to a template/format for our features giving us the ability to reuse CSS. After all the changes are done, we coordinate efforts with Web Techs to upload our new CSS or add adjustments via quicker options. In the end, these steps allow our team to do quick changes and improvements to our sites without searching out resources and time from full teams for minor adjustments. A win-win, wouldn't you say? I'll talk more about this in future posts.

Related Links: