The Mechanics of Web Design

I am a stereotypical developer: I can’t design my way out of a wet paper bag, and I tend to regard every potential bout with CSS with trepidation. I’m trying to get better, though. Progress is slow.

I started working through Web Design for Developers recently, but I haven’t been very happy with it and I don’t think I’m going to finish it. I asked around for some recommendations for books on web design, and got quite a few responses; I’ll list them below.

What I realized, though, is that the book I’m looking for right at this moment probably doesn’t exist. Most of the design/CSS books out there are coming at it from one of two angles: either they are telling you how to come up with an attractive and functional design from scratch, or they are telling you all about how the individual CSS selectors work. That’s all stuff I want to understand better, but as a working web developer I often find myself with a much more tightly constrained problem. More often than not, all I need is to be able to take a comp in PSD format and produce a functional web page that looks exactly like the comp.

The book I’m looking for would be a slim volume, and it would be called something like “The Mechanics of Web Design“. It would be a step-by-step guide for slicing a comp and turning it into HTML, CSS, and images. It would answer questions such as:

  • Just what the hell is “comp” short for, anyway? “Composition”?
  • How do I use guidelines in Photoshop or the GIMP to make slicing easier?
  • When slicing up images, where should I make the cuts to end up with something I can best use in the final HTML?
  • What points on the mockup text should I measure to determine the correct CSS pixel size?
  • When should I use pixels, when ems, when exes?
  • What are some guidelines for organizing my CSS or SASS files? (Both within the file and how to divide up the files)
  • When should I use PNG? When JPEG? When GIF? What image compression settings should I use?
  • What are some good naming conventions for image assets that go into making up the design?
  • When do I use margins vs. padding for spacing?
  • When do I use floats?
  • How do I do those “sliding window” button styles with a minimum of effort?
  • Where do I use absolute positioning? Where do I use relative?
  • Etc.

Basically the problem I have is that while I long ago moved past doing messy trial-and-error when going from a failing unit test to working code, I’m still just poking things around to see what works when it comes to translating a visual design to HTML/CSS. And what I end up with always feels like a big messy unmaintainable ball of mud without consistent techniques or idioms.

Actually, the more I think about it, the more this sounds like it would make a better screencast than book.

Anyway, here are the books that were recommended to me:

Thanks to @RobotDeathSquad, @batasrki, @jptoto, @laktek, @kenrichard, @djbrowning, @gavinlaking, and @JoshuaChilds for pointers to books and other resources.