Thursday, February 22, 2007

Fun With CSS

It says something about how fast the web world moves when I can recall my days at AINE in 2003, listening to my instructor say, "yes, sometimes designers use Cascading Style Sheets for formatting headers, but for now, just use the bold tag". Nowadays, anyone teaching web design would probably be stoned publicly for such heresy, but at the time, we all just innocently nodded our heads and kept plugging away at our page-sized Photoshop documents, slicing the images and placing them into tables to create our projects.

I started to see more and more sites that boasted little windows that looked like Chiclets. Then came the logos and banners that reminded me of the Jellies sandals that I had coveted so much in Jr. High. Before you could say CSS2, the web exploded in a visual extravaganza of Kandy Kolored glossy rounded corners and something that I was rapidly learning about called "suckerfish dropdowns". At the time, I was trying to come up with some sort of business plan for my in utero design shop and after tooling around a couple of times on Google with the term "Salem web designers" I stumbled across Simplebits the "tiny web design studio" run by Dan Cederholm. So I went to the site, loved the deceptively simple looking design and decided to e-mail him. In my newbie frenzy, it came out something like this:

"Hi Dan! I like your site! I am a web designer who's starting out and trying to get a handle on all the new technology that is around. As someone who has been designing for a while, what do you think is the best approach for learning about Web 2.0 development?"

Anyone in their right mind would have sent something like this right into the deleted bin, but either he's unusually patient, or, if he's like anyone else I know who does this kind of work, he was too sleep deprived to know better, but Dan responded with an invitation to join a css discussion list.

Soon my e-mail inbox was displaying messages from people with names like Ingo and Gunlaug who dispensed advice on queries like "Help! My a :hover link doesn't display in IE 6!" and "Why won't my div span float with my 3 column header?". To be honest, most of the time I hadn't the faintest idea what these people were actually talking about and for days at a time I would simply plow through all 17 pages of postings and delete them without reading them. But after a while, I started feeling guilty and dutifully tried to make sense of the various discussion threads. If anything, it was a great way to spy on what other people were doing for web design.

Finally, the inevitable happened and I got hired to re-vamp a local company's web site. It was going to be a challenge. The first time I went to their site and hit View>Source, I freaked out. It had more nested tables than a Chinese import shop. I collected every book I had that even mentioned CSS, invested in Red Bull stock, and went to work. (editor's note: I was going to link to Red Bull's site here, but it requires Flash 9 or it won't work. :^( Accessibility counts people!)

Now I can see what all the fuss is about. Although I don't have any mysterious white lines going through anything, my life is now a constant rhythm of tweak, F5, preview in browser, rinse, repeat. I was really proud when my Home page design finally displayed perfectly in Safari, then slightly nauseous when the two left columns poked up into the navigation in Firefox. My moment of shame came when I tried to shift the side bar div to underneath the content for the "About Us" page and forgot that I was changing it's position in the Home page too. Whoopsy.

The only thing I can compare the process to is this little puzzle that my grandparents used to give me to get me to stop bugging them for cookies. It consisted of a small plastic square with grooved edges. The square contained 15 tiles which, when coaxed into the correct configuration, showed a picture of Deputy Dawg. (Ralph Bakshi, who knew?) I would shift one tile over to the right, then see that it would block the tile I needed on the top, then shift that and it would knock the whole picture out of whack. I would so wrapped up in shifting one tile back and forth, up and down, that it wasn't until I put the damn thing down and went to watch "Wonder Woman" that it would occur to me what the solution might be.

So, long story short, I'm loving the CSS, and it's kind of fun to see the look a client gets on their face when I mention using a suckerfish dropdown.
Share/Bookmark

No comments: