The Almanac was a thing launched in v9 and never quite got done. It's getting closer though and closer every day. So in v10 we'll design around the assumption that it is "done."

We look at the existing v9 design, which is kinda-sorta OK but doesn't serve the content super well. As a quick aside, we see that the rollovers for the letters bold on hover, which is usually a no-no (often pushes other text away and looks weird) but it's kind of a cool effect on these locked-position letters.

We already have the custom header graphic in place, so we put that in Photoshop so we can tinker around with the design in context. Part of what I like about Giovanni's illustration is that it reminds me of the physical book that was common where I grew up: The Farmer's Almanac. We decide to take the physical book metaphor and bring it into this design. Not skeuomorphic or anything, but just a nod to dimensionality.

We make it a two-page spread and use gradients to hint at a shadow and binding. We play with some shadows to extend the effect.

Again extending the "book" metaphor, we pick out a handwriting font to show the letters in the book, making it more of a journal or diary than book which I'm fine with.

This area is split into two (which works nicely with the 2-page layout). One side is for CSS properties and the other side is for CSS selectors. To help make that visually more clear (beyond just titling the two pages) the two sides have a different base color.

We think through the typography a bit and wrestle with some decisions about where we can get away with this handwriting font and where we can't. We also wrestle a bit with the fact that we've (again) used the entire page for content exploration. A good thing, to be sure, but once again we've removed advertising which is pretty vital for the site's survival.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.