#033: Photoshopping Search

(Updated on )

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.