[Y]ou’re using footer to clear floats (content + sidebar). This creates a large drawback, because before footer is downloaded and displayed in the browser, parent wrapper lacks any background.
It means that we’re staring on black text / orange background combo for a few moments. Well, few moments now, but should you put any unresponsive widgets in the sidebar, everything can render much slower. Having main content flash like this isn’t very pleasant – especially when you named the redesign “Designing from the content out”.
Solution is very simple – use ‘:after’ clearing for the main wrapper. Sure, it won’t work on IE, but 1) setting width to wrapper sets hasLayout and triggers clearing 2) #footer is still there, in any case.
I’d read about using “:after” clearing but hadn’t implemented it and thought I could solve the problem an easier way. This afternoon, with about five minutes’ work, I did so.
I solved the orange background flash by moving the faux column background image up in the CSS hierarchy.
In the original CSS, I used the faux column background image on the wrapper element only.
In the updated CSS, I’ve now added the same background image to the body element as well.
Doing so fixed the orange background flash problem, because the browser no longer has to wait for the footer to clear before showing the background image.
Thanks for the great feedback, folks. For those who find the orange background objectionable, I’ll offer a user-selectable alternate color scheme, like this one (quick sketch, ignore the color of the printer’s mark at the top, final colors may vary).
I’m designing from the content out. Meaning that I designed the middle of the page (the part you read) first. Because that’s what this site is about.
When I was satisfied that it was not only readable but actually encouraged reading, I brought in colors and started working on the footer. (The colors, I need not point out to longtime visitors, hearken back to the zeldman.com brand as it was in the 1990s.)
The footer, I reckoned, was the right place for my literary and software products.
I designed the grid in my head, verified it on sketch paper, and laid out the footer bits in Photoshop just to make sure they fit and looked right. Essentially, though, this is a design process that takes place outside Photoshop. That is, it starts in my head, gets interpreted via CSS, viewed in a browser, and tweaked.
Do not interpret this as me dumping on Photoshop. I love Photoshop and could not live or work without it. But especially for a simple site focused on reading, I find it quicker and easier to tweak font settings in code than to laboriously render pages in Photoshop.
If you view source, I haven’t optimized the CSS. (There’s no sense in doing so yet, as I still have to design the top of the page.)
I thought about waiting till I was finished before showing anything. That, after all, is what any sensible designer would do. But this site has a long history of redesigning in public, and the current design has been with us at least four years too long. Since I can’t snap my fingers and change it, sharing is the next best thing.