CSS Refresh
March 8, 2005
Two years ago, after reading Designing with Web Standards by Jeffrey Zeldman, I made an oath to myself that I would kick my old web development habits and take my Jedi training in CSS-based design.
I can remember the exact moment when the proverbial lightbulb appeared above my head because it was around the same time my daughter was born. In a short span of time two pinnacle moments (albeit with seperate meanings) changed my perspective on life; the birth of my daughter and becoming a better web designer.
Changing my Habits
It happened as I was sitting there in the hospital cafeteria, carefully reading Designing with Web Standards while I munched on overcooked scrambled eggs. Combing through the text I felt the need to change my habits, dance to a different drum and work towards bettering my skill in web design. Prior to this, I only used Dreamweaver’s WYSIWYG editor because I couldn’t get a grasp of the meaning of HTML code. To me, if Dreamweaver handled the code, there was no reason to muck around and potentially cause damage to the code. It’s amazing how wrong I was.
The most important step towards becoming a good web designer is first learning how various tags work in your code. Otherwise there’s no reason to even take that plunge let alone consider it as a viable career option. I’ve seen several good designers feel the need to rely on WYSIWYG editors rather than understand how HTML (or XHTML) functions. I know because I was one of them at one point but after investing in a library of web development books I’ve scrambled out of the hole I had dug myself into.
CSS is a Tricky Beast
After re-learning how to code properly I hit the books as far as educating myself about Cascading Style Sheets. I had used CSS previously, in a limited fashion, to style text. I remember thinking it was a huge deal to change the color of a word or sentence using inline CSS but at that point I really didn’t see the value in using it for layout, neither did I realize that it could be used to control an entire layout. Cut to a few years later and I’m surprised I didn’t catch on earlier but just as well since earlier browser versions had limited CSS support.
While CSS is an amazing tool it’s also a tricky beast and that’s due to Internet Explorer’s poor CSS support. I know many designers who’ve given up supporting IE all together and while that’s a personal and comendable choice on different levels I feel the need to continue supporting IE because it’s still used by a majority of the Internet audience and mostly because it comes pre-installed on most PC systems.
Also, as Molly and I have discussed, designers that have transitioned from print to CSS-based layout have difficulties mainly because of their inability to make their layouts pixel perfect. Speaking from experience, I come from a print background and quite honestly using CSS came quite naturally for me and a lot of this had to do with my attitude towards it. Let’s face it, the web and print world are on opposite sides of the spectrum of design. One can easily fire up a copy of Adobe InDesign, choose a two or three column template and using the Shift + Arrow key method align certain components to the pixel. CSS, on the other hand, isn’t as easy to manipulate and mainly that’s due to browser support and certain limitations with the technology. Instead of creating a pixel perfect layout you have to be in the mindset that you’ll get close to aligning certain aspects the way you want them to, but certaintly not perfectly.
The Road Ahead
Even though I have a good working knowledge of CSS and apply that knowledge on a daily basis I’ve decided to make a personal goal; to refresh my experience with CSS and web development in general by hitting the books and relearning everything from the ground up. To do this I’ve added a few notable books to my library and to date my library of web development and CSS books is comprised of the following:
- PHP/MySQL: Build Your Own Database Driven Website Using PHP & MySQL by Kevin Yank
- Designing CSS Web Pages by Christopher Schmitt
- Don’t Make Me Think! A Common Sense Approach to Web Usability by Steve Krug
- CSS: Seperating Content from Presentation by Briggs, Champeon, Costello and Patterson
- CSS: The Designer’s Edge by Molly E. Holzschlag
- Web Standards Solutions by Dan Cederholm
- Designing with Web Standards by Jeffrey Zeldman
- Eric Meyer on CSS (and More Eric Meyer on CSS) by Eric Meyer
- The Zen of CSS Design by Dave Shea and Molly E. Holzschlag
Wish me luck.
10 comments
You and I have a similar experience to learning CSS, except I don’t have a daughter, and I really don’t know what I’m doing. So I guess our experience is, uh, not similar.
by Charlie on March 8, 2005 at 5:21 pm. #
Wow, so daughters make the good designer eh? Guess I’ll have to work a tad harder on that area
by Rob Mientjes on March 8, 2005 at 6:48 pm. #
Amen to all that, brother. And then some.
See, my incursion on CSS, web standards and all that was perhaps less of a “pinnacle” than in your case, in no small part ’cause I was early in turning my initial addiction to all things Internet into a way to make a living. We’re talking 1995 here (10 years in October — suddenly that date makes me feel just… too.. old :S ). Which was intended to be just a two-year stunt turned out to be my way of putting food on the table, well into this day…
Back in ’95 then, you had to know your code — Dreamweaver, Scheamweaver. If you wanted to make it as a web designer, you had to get your hands dirty on code or else. I think that’s where I got used to do things that way ever since. Then, of course came Macromedia with DW 1.0, corrupting thousands of minds and companies into making believe that “using DW” equaled “knowing HTML”. Still does, and to a sadly big degree.
Don’t get me wrong — DW has always been a kickass piece of software — when used by the right hands and know-how. Trouble is, when everybdy and his mother got sold on DW, they missed the forest for the trees and began proclaiming themselves “HTML experts” with reckless abandon. It hasn’t been until now that we are –in a way– getting “back to basics” that they are finally being proven wrong.
Anyone that has tried his or her hand at XHTML and CSS knows that it’s far from being a walk in the park. Only God knows how many times I have cursed and kicked my monitor due for yet another IE CSS rendering bug or a hideous tag that keeps hiding from me. But as they say, what doesn’t kill you makes you stronger, and the lots of experience I have gained over the years with CSS has taught me a lot of what is possible with it and what isn’t, what works and what doesn’t.
I’ve read Zeldman’s book. Probably one of the best for the budding web designer out there, however I feel it was written ten years too late for me. It’s the kind of book anyone wanting to start the right way on this should read, though. I’m really interested on Dave Shea’s, especially since it focuses on the design aspect of CSS rather than on the techical side of tags and such.
And while you are at this, how about thinking on a new site design for May 1st CSS Reboot? (Yeah, riding on the coattails of May 1st Reboot). In any case, I’m in. Should be fun. See you there.
by beto on March 8, 2005 at 11:19 pm. #
Charlie: You’re right, I think.
Rob: I think children inspire adults in different ways, but in this case it just so happened to coincide with the birth of my daughter so it sticks out in my mind. As for daughters (or sons) making a better designer, it worked for me mostly because my overall outlook on life changed dramatically, for the better.
Beto: 10 years, you old fogey.
Yet, I understand where you’re coming from. It’s just unfortunate that Zeldman’s book didn’t arrive earlier (at no fault to Jeffrey of course) because then we might’ve avoided the clusters of stale designers out there, who as you described considered themselves web designers because they could work with Dreamweaver.
It’s much more than that when you take into account web usability and a solid understanding of markup, not just being able to throw your weight around with CSS. We wear many hats but also it’s advisable, from my standpoint, to avoid overspecializing. Otherwise you’re dipping into too much and your focus should be on doing a few great things instead of several okay to mediocre skills.
As for the CSS Reboot, I think I’ll take the challenge considering that’s when I hope to finish this design.
by kartooner on March 9, 2005 at 10:14 am. #
People that use WYSIWYG editors aren’t what I’d call web designers, but web site button clickers.
by Matt Burris on March 9, 2005 at 9:22 pm. #
Matt, at one point I too was a “Wissy Wig” web designer and you know, I’m glad because in hindsight I realize how confident and yet foolish I was.
by kartooner on March 10, 2005 at 12:59 am. #
I remember jumping into the subject of web design in late 2002. Prior to that I had no interest in web publishing of any sort; if anything, my interest in making the layouts I make stem more from a desktop publishing background coupled with the need to write, write, and write some more.
I started to learn web page styling using CSS from the very beginning. In fact, I found CSS to be much easier than table-based layouts from a code perspective. It’s easier to type and markup. However, I must say that WYSIWYG editors, especially DWMX/MX2004 are very helpful in churning out the markup code for certain documents. If I have a series of list items and paragraphs I don’t have to write the tags (or select and assign tags to them using custom shortcuts) myself. I can just keep writing and give the code a once-over for semanticity and accuracy. And in all fairness, DWMX is very good code at churning out good code.
There are more lightweight options, but when I’m writing a forty page report in XHTML, one that consists of basic typographic effects, a WYSIWYG editor isn’t that bad. (As a side note I’ve grown to write a lot more written work in XHTML and plain text nowadays than using a word processor. Let’s just say it’s grown on me.)
by O.F. Jay on March 10, 2005 at 6:03 pm. #
Thankfully, I started with Notepad and moved only to EditPlus. Not too far of a jump. I’ve tried Dreamweaver and the like, but nothing beats simple text editors.
by Scott on March 10, 2005 at 8:14 pm. #
By the way, I’m against any design that eliminates me from your link list…;)
by Scott on March 10, 2005 at 8:17 pm. #
whoa…great comments posted here.
KartoonerI’m feeln’ like your distant shadow or something. I am a print designer…dabbling in web, with hopes of becoming more proficient in web. If it werent for Dreamweaver though, I would have absolutely no desire to do web design.
Hello…my name is mike.…and I am a wissy wig junkie. I realize my addiction and with the help of great sites like this, I hope to eventually call myself an actually web deigner someday. Thanks for the references as I’m now reaching that point of striving to better myself in the world of code.
I’m also your neighbor here in Rochester. Although, I haven’t been to Palmeros yet.
by Mike on March 21, 2005 at 12:22 pm. #