Time to dive into the Snippets area! That is, the actual content area of it. We already have the header in place. The snippets area is pretty popular. Without diving deep into analytics, I know from watching social media and hearing from people in real life that they find a lot of useful stuff in this area.

In v9, a very common and legitimate critique was that it was hard to browse. It was a heavily colored accordion and each snippet was a "bubble link" (for lack of a better descriptor) that matched the main color of that snippet sub section. Worse, they were aligned justified which I thought would be a neat way to give them some space and jump the eye around a little, but ended up just looking weird and sloppy.

Let's redeem ourselves here and make the Snippets area nicer to browse. Even though, again, most of this content is found via search. Still, might as well make it nice to browse.

Right away we decide not to put a search field right down in the content area. There was in the past, but this is a redesign and we're making the decision to consolidate search into one area. Once you learn how to use search once, you'll know how it works forever.

For the design, we go with a two column thing. On the left, the main Snippet categories, each with a unique color. Rainbow time! We browse our own gallery for inspiration.

The right column will simply be a list of the snippets in that category. Simple, easy to browse. Much like the footer links. People know how to scan and use lists of links. It's the most perfectly simple design pattern there is.

We mess around with some design decisions though. Should the links match the color of the section or just be gray? Should we "zebra stripe" the links with a faded version of the main color? Should we include a publication date or updated date or neither? Fun and important stuff to think about, but we can always make these kind of decisions once we get to the browser and are working with real data.

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.