It's tricky learning design, especially as a developer. And I'm not talking about the aesthetic stuff--for some developers that may be downright impossible--I mean the technical world of HTML and CSS. The problem I've had over the years is that, as a developer, most CSS/HTML information on the web is not targeted at someone with my background. If you're like me, then you have a BS degree in computer science or engineering from a university where you were made to sit and think about everything from processor pipelines to XOR gates to compiler optimization to how much wood could a wood chuck chuck if a wood chuck could chuck wood and what would be the complexity of said wood-chucking in big-O notation, thank you very much, here is your degree, now go learn Java or Xt or MFC or whatever in the real world on your own.
So you know enough to write the CSS parser and rendering engine, at least on a theoretical level. But that won't help you to use it. Nor will it help you to know the quirks of the several rendering engines out there in the real world.
So I find myself in this quandary of knowing too much for my own good when I sit down to learn about CSS/HTML. Then I get impatient. I want the articles targeted at design-people to just cut to the chase. Stop talking about "If you wanted to have these pretty flowers in the upper left corner, you would float DIV x and put a background..." Show me the money. I'm not an art major. My web pages may suffer for that, but I can understand the box model if you would just tell it to me already.
The purpose of me writing this post, then, is to collect a few choice resources I've discovered in my own haphazard and unofficial CSS/HTML career.
Find a good CSS reset to start from ground zero. My philosophy is to know as little as I need to about the difference between browsers. The less you fill your brain with that meaningless crap, the more room you have up there for knowledge that might actually enrich your existence. One way to cut down on the browser-difference arcana in your head is by never using the default styles, which vary from browser to browser. You can choose from many of the reset CSS recipes out there:
Don't using clearing elements. I used break tags (BR) with a style of "clear: both;" for a long time to clear floats. Even though it is the W3C-recommended approach, clearing floats in this way will drive you crazy. (It is difficult, if not impossible, to get those clearing elements to share a uniform height across browsers.) I use Tony Aslett's clearfix method personally, although Dave pointed this out to me. It is a more recent technique, but I'm a bit hesitant to start using overflow to achieve clearing. It gives me scrollbar nightmares.
Understand the Holly Hack. I never understood the difference between clearing floats in IE and other browers until a I read an explanation about why the Holly Hack fixes it. I wish I had read this years ago.
Use Chris Pederick's Web Developer Toolbar. This is the single most awesome CSS tool that I use. The Edit CSS and View Style Information tools are almost all I need. Occasionally I will drop into Firebug when the View Style Information tool doesn't do the trick (it doesn't show the inherited styles as well as Firebug).
Don't take on IE6 without CSSVista. If you're like most people, you develop everything in Firefox or Safari first, then drop into the depths of hell to work out whatever is broken on IE6. One nice tool that lets you interactively edit CSS in IE and FF at the same time is CSSVista. It's free. It's not perfect, but it's the best I've seen for IE yet. The IE Developer Toolbar is also nice to have.
Don't buy reference books. It's funny how many CSS reference books there are. Same with HTML. You don't need me to tell you that these are a waste of paper, including that green paper that is your money. But there are some good CSS books that discuss layout techniques and browser bugs. It is definitely worth having one of these. I like this one a lot. It is also good to have a CSS cookbook on hand when you need to remember the right way to do some common CSS task. I use the CSS Anthology from time to time.
Read this book. For all of us who are not graphic design majors, who didn't know all those fancy terms in that documentary on Helvetica, I recommend The Non-Designer's Design Book. Nothing has helped me more in grasping the basic aesthetic principles of laying out a page. If you have to do anything with design, even if it's just laying out your church bulletin, you should read this book. It's short, easy, and will have you making passable designs in one day.
If you are a dev who has been designing for a while, this is probably all old hat to you. But if you're like I was a couple years ago (clueless), then an hour spent reading the links above will hopefully be a great starting point for you.
Sorry, comments are closed for this article.