There is a lot of content on CSS-Tricks. That's one of the things that makes it's design a bit challenging. While we can stay clean with the design, we probably can't get away with "minimal" with the amount of stuff that deserves attention on the site and makes the site what it is.

All that to say, search is very important on CSS-Tricks. It's heavily utilized with many hundred searches per day. We might even be able to improve that if we can make search even more visually prominent and obvious. I want people to use search. I know that it works pretty well and helping users find what they are looking for is good for everyone. Also, psychologically, I believe providing search in a big and obvious way shows confidence in the content of the site.

A big blue square with a magnifying glass (via our icon font) right up in the head is what's going to do it for us. The blue-on-gray is very striking and communicates click-ablity.

We're imagining that when the magnifying glass is clicked, the blue box expands into a search box. The reason it's closed to begin with is because 1) we could use the extra room in the header for our top sponsor and 2) the magnifying glass may actually be even more obvious than a form field.

The search form has the things you'd expect: a search field and a button. But it also has some links you can click to narrow down the search you run. We'll make that actually work in an upcoming screencast.

Comments

  1. CWSpear
    Permalink to comment#

    I think it was the last video, you were reminding us that the blog posts are the most important section of the site, but on the search, you can’t filter to search only the blog archives?

    • Chris Coyier
      Permalink to comment#

      Absolutely true.

      It’s a technical limitation at this point. You’ll notice (at the time of this writing) that the blog posts on CSS-Tricks come right off the root URL. E.g. css-tricks.com/slug-of-blog-post/

      That means it’s hard to create a Google CSE that limits it’s results to only blog posts. Whereas it’s easy to create one for only forums results because you can limit it’s searching to css-tricks.com/forums/

      I’ve tried a number of things, all of which were unsatisfactory in one way or another, to move blog posts to be at /blog/. I’m going to keep trying over time and ultimately will get it.

      Or, I’m going to make a reverso Google CSE that filters out results that aren’t blog posts. That comes with it’s only challenges. And also doesn’t come with the benefit of being able to track the blog articles analytics specifically like we could with moving them to /blog/.

    • CWSpear
      Permalink to comment#

      Gotcha. That makes sense. Did you see I had a couple suggestions in GitHub about how you could handle that a little while back? I think if you knew you had a finite number of sections (i.e. /snippets/ is a section), a whitelist approach would work really effectively, and be easy to implement.

  2. domenico colandrea
    Permalink to comment#

    i love the design of the search form! its so simple but its zoo just cool and awsome!! btw love the vids..ive been referring back to css-tricks for about 2 yrs now and love it but this screencast series is friggin AWSOME!!! Such a good idea!!

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 in triple backtick fences like this:

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

We have a pretty good* newsletter.