Notes on Converting an HTML Comp

I learned HTML on the street. I've been a corporate trainer in Java and XML, so I know all the basic stuff in those fields by heart, but I don't think I've ever read an entire book on HTML/CSS. On the other hand, maybe I have, but it was probably before I understood anything much.

This weekend was massive. I've been commissioned to do a tiny site on Rails (overkill, but good to have around). We've got the PDF comps and the resources half in Photoshop and half exported to GIFs, JPGs and whatever. The site is very simple, so the Rails part took about 10 minutes to finish the entire structure, including the paging stuff and my famous ie6? and ie7? helper methods, which I try never to use.

So what have I learned?

1. CSS Reset - Based on my lukewarm experience the last time I did a full site, this time I followed the CSS-reset route. I chose this radical CSS reset, which was probably not the best idea. A more opinionated CSS-reset might've worked better. But the CSS-reset, plus using the strict HTML doctype, resulted in a minimum of cross-browser problems.
2. HTML5: We didn't use any HTML5 on this project. But when I was asked to change the doc-type to the one for HTML5, and the site didn't budge, so the future is sound.
3. Cross-Browser Problems - I tested every single thing I did in IE6, IE7 and Chrome on Mac. This is totally annoying to say the least, but it kept me sane throughout (IE6 really makes one think that Microsoft was hoping to kill the Internet as a concept).
4. Design is a science, kind of: I usually kind of eyeball the comps and then build the thing. I measure later. Getting good measurements using PixelStick in the first place even while working on more interesting problems would have been brilliant (so I didn't do it this time, either). 
5. One of the biggest mistakes I made was not making a serious attempt to figure out that the PDF comp needed to be zoomed to 73% (why?) to match the assets I was given. But measuring it worked. Design is empirical. Mostly, so...
6. Use a test harness to figure stuff out. A test.html (like a test.fla, or a HelloWorldSocketConnection or whatever) is invaluable, especially when compared to poking around in a complex situation to figure things out. HelloWorlds are our friend at all phases of a project.
7. Default position of elements is not static: it's relative. This took a while to debug, since I was debugging my knowledge itself :)... If the comps are really exact, just make the outer DIV relative, and then place everything inside with absolute positioning. This works solidly, unlike what I had thought previously. But more importantly...
8. Designers do design much faster than me, but I can still do design. I learned Fireworks a bit back, and while I can barely do anything beyond slicing in Photoshop, in Fireworks I can create assets as needed (though sometimes I have to go spelunking to find how stuff works). The thing about asset creation is that if you need an asset, you should try to measure what you do know. I only created one asset here: a rounded rectangular box with an inner and outer glow. The outer glow needed to go to transparent, and the inner glow needed to go over white (PNG8!). So I eye-balled the rounded corners, but the rest was data-based. I knew I needed it to have a certain size and use certain colors. The amusing thing was that when I finished I thought, "damn, that inner glow looks like crap, let me check the comps." The comps looked the same: anybody can do glows and drop shadows with modern tools.
9.  Margins and padding are very different, though in certain browsers they kind of work the same. The point is mostly that negative margins are usually a mess (at least in IE), whereas negative padding is pretty cool. This is a topic for study, but nothing simple like this will help.
10. Z-index, negative margins and absolute position: z-index does not work with static positioning (I think), but with absolute positioning it works well. While in some cases I was able to get a negative top value to work, in others I couldn't get it below zero. In those cases a negative margin in addition to the position worked nicely. I have no definitive point here, but surely in 10 minutes of goofing around one could figure out what the real situation is. 
11. Measuring stuff in em's is incredible. Though sometimes you want to measure in pixels, of course.
12. Font sizes like +1 and -1 are relative to the current font size. I wish I had known this a while back.
13. Next time, no more screwing around: I will do the CSS as an ERB. There is no reason to not be able to define variables in your stylesheet. Otherwise how do you keep colors consistent? 

The next time I do one of these corporate designs, I'll probably do 90% of it as absolutely positioned. 

Working with GIT was a dream, especially now that I know about soft and hard reset.

Now I can get back to my iPhone/Objective-C learning, which has taken a turn for the better. The other day I was actually writing code...