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.

4 comments

  1. I sometimes use “The Non-Designer's Design Book” by Robin Williams to inspire me to remember things like layout, contrast, and typeface choosing. The book is about general graphic design.

    But, “The Mechanics of Web Design” that you describe is a more technical topic – and unfortunately, one that I've learned “on the job” as well.

  2. And that doesn't even get into the issue of “Why doesn't this work in X browser? Why is it different in Y browser?” or the “Okay, this is how I am supposed to do it. But this works a helluva lot better.” And I always love the “Hmm…advancement. The new technique is a paragraph of code to replace one line of the old method. Progress????”

  3. For CSS, I’ve found it boils down to 1. understanding selector specificity (which nobody except browser implementers understand), 2. understanding there are 5 different behaviors for line heights (depends on how you specify units, but this use of verb “specify” is different than what’s implied by “specificity”), 3. the difference between padding and margin, and which collapses and when and the exceptions, 4. positioning, especially why default is the same as static, except it behaves differently depending on whether its explicitly declared or implicitly assumed(!), 5. probably a couple of other things, I forget. Overflows maybe.  And the jargon. I recommend reading the w3 spec to get a grip on the vocabulary.

    Simple, no?

    Specificity is probably the key thing. Once I understood that inheritance and cascading could be (and usually) is trumped by higher specificity rules, it’s gotten easier to hack around them.

    Also: there is a lot of css out there which works because it was the last trial that didn’t produce an error. 

  4. Dammit, now I want this book too. I’ve taken to telling clients I’m more of a digital mechanic when they ask if I design websites, and it’s the first term that’s really connected it for them so far.

Leave a Reply

Your email address will not be published. Required fields are marked *