CSS Layout Creation: Day 1

Here's a situation I'm in at work: a fairly high-profile project (Biola's first-year student journals, if you're familiar with them) is close to completion and the only piece left is the website. This project lives entirely on the web, so I won't blame you if you ask why this is the last part to be developed. The design process has pushed the launch date back from early October to mid October to... well now. I was asked to convert the design into the xhtml + css, and I quickly agreed, knowing how important it was to crank this thing out. And I'm responsible for much of the interaction design, both from the visitors' and editors' side, so having control over the entire thing - XHTML, CSS, Javascript - will save me time and frustration.

To complicate matters, I'm out on vacation much of next week and the design I'm working from is fairly print-centric. And I have to get a license of Adobe InDesign before I can even start working with the graphics. So I naturally thought, "I should spend valuable time blogging about the process!"

I began Day 1 trying to work with the .eps files in Illustrator, coming to the realization that wasn't going to work and putting off that part of it to Day 2 or 3, which is where that step belongs anyway. Fortunately I didn't waste much time coming to that decision.

My first step was creating the base xhtml document that would later be split into a modular template. I wanted a Jello Layout so I had to add some non-semantic divs and a little extra css, but I think it'll be worth it.

Next I added the divs for my main content columns and started on the css, first floating them to get them in line. I soon abandoned the float method and used absolute positioning instead (if you're curious why, ask me... I can't remember right now).

That was working well in all the browsers I had access to (Safari, Firefox, Flock, and IE Mac - though the latter isn't respecting a top margin on two of my columns), so I moved on to added rounded corners to the columns per the design. That forced my hand on adding a few more block elements than I had been planning, but still not too bad. If all the browsers supported multiple background images, this part would be cake. Until then, we've got A List Apart's article on custom corners.

With the rest of my time I started on the text styling for each of the three columns. I used one of the journalist's entries so I had some real content to work with — which I think is necessary when designing for the web.

And that was it for the first day! Only three left!