I couldn't wait any longer, so I started fleshing out the HTML prototype for the homepage last week, and all I can say is that it was not easy.
This took me much longer than I anticipated. Mostly due to many failed experiments with layout.
My first idea was to experiment with the Negative Margin layout ideas I had read about in ALA. This really appealed to me because I wanted to keep both content areas fixed to an em length, while having the whitespace around each fluid. I though could try letting both columns float around a bit according to the browser window's width. Alas, it was not to be. I tried to troubleshoot, but gave up after an hour because I just wasn't in the mood to find out why IE hates percentages in combination with em width or margins, or something. So it was time for plan B.
I was sticking to the plan of having em fixed width columns, but this time with a simple two-column float layout. I almost go this one to work, but again I ran into trouble with IE, mostly around getting the column background to flow to the bottom of the page. Time for plan C.
Third time is a charm. I punted, using Dan Cederholm's trick for getting the column backgrounds to flow to the bottom of the page, but to do this I had to settle on a fixed width layout. So I set the width to 700px (don't ask me why I picked that particular width, it just seemed to work out that way) and was off to the races. A little work here, a little trickery there and viola, I had pretty damned close to my homepage comp!
Even though I had to ditch em's for my container widths (kind of sad about that, but hey maybe in rev.2), I was still able to maintain the text in em's for easier text-sizing in IE, and also use em's for setting white space whenever it was adjacent to or dictated relative to the size of the text (margin's between list elements, paragraphs, etc.). I only used pixels to define margins or padding related to the fixed width containers. In doing so, I managed to build a stylesheet without any hacks. Yay!
I can't say that I will be able to stay hack-less (though I will try to do so, if only for the challenge of it), because I have a whole lot more website to build. First I plan to finish out the weblog styling (all the archive levels) and translate them into MT Templates, then I need to finish up my comps for the rest of the site!. And at some point I need to write an entry so I'm not neglecting my blog.
Back to the grindstone
Using the homepage comp, I was able to create compositions for the archive levels of the main weblog.
Included in the PDF is the Main Archive Index, Category Index, and Individual Archive.
Nothing truly notable or different from the wireframes except the absence of the Monthly Archives, which I have decided not to provide because I'm not convinced of their use in this particular log.
I am going to try and find a different set of bullets for the category links on the right hand side for some visual distinction from the "Worth Your Time" section on the homepage. I also really enjoy how the alternating colors on the comments field provide easier visual separation on Stopdesign, so I've incorporated that idea into my Individual Archive page.
Off to the other pages...
I've been laboring over it for the past couple of days, so its time to post my homepage composition idea and move on to the next comps.
Lots and lots of work here. I'm not a graphic designer by trade so it takes me a while longer than some, but I'm pretty happy with the results.
I started with the wireframe. I added the graphic idea I've had for some time now (the scan of the refrigerator magnets) and flipped through my Color Index book for about an hour before I settled on a color idea (note: I will probably try out some different color schemes as due diligence, but I do like this one).
After that, the rest just started flowing, and slowly a website started to form.
Any feedback?
I've completed some wireframes for the Homepage and Category Index pages.
With the homepage, I'm starting to get a clearer idea of how I want to lay out Header, Footer and navigation elements that will apply throughout the site.
What I am having trouble with is deciding if the H1 on these pages should be the Header or the Page title (there is a good discussion about this in
the SimpleQuiz section of SimpleBits), and I think I'll subscribe to the camp that H1's are for page titles not headers. I'll have to modify my document structures later.
I also don't see any real need for date based archives at all. I can't see how foraging for content by date would be relevant for any user, especially with the Search readily available at that point and Categories providing better framing of the content therein. So I'm going to take the monthly archives off of the Master Archive page and replace them with the category list so it is consistent with the Category Index pages.
Couple more to go (Portfolio and pages within) and I'm ready to start comping!
First pass at wireframes for most of the content pages (sans Homepage).
The PDF contains wireframes for:
I've also done something new for me here. I started working out document structures and attaching them to the wireframes. In the past I've struggled when trying to find the best place to start working out document structures, but it felt natural today when I started putting them next to the wireframe. It just made sense.
Still outstanding are wireframes for the Main weblog archive pages (category, Month, Individual), Portfolio pages, and the Homepage.