building a drop-down form for an html input
When
working on a newspaper website, it’s common practice to receive design
requirements from some unknown authority. An email will just end up in
your inbox with a note such as, “Our yahoo contract requires the word
‘search’ to be capitalized in the phrase ‘Web Search powered by Yahoo!
SEARCH’ which must appear in the search bar with the name Yahoo! in bold
red font. Things like this have become so common that my first instinct
is always along the lines of “how can I get out of that”, or “is there a
loophole?”. There are so many requirements that they leave pages looking
like a cluttered mess, just like every newspaper web site out there.
That’s when we have to get creative and try to find elements that we’re actually allowed to touch, and arrange them so the pages still look as clean as possible. A perfect example is this drop-down search selection tool. We have three main types of search on fresnobee.com. I won’t get into why we have to have three different search types in this post, but I will say that the reasons are not good ones.
Users on our site have to be able to select which search tool they’re going to use before they hit the search button. In the past we’ve used a regular XHTML select element which renders into a regular drop-down select menu in the search bar. A user would click the drop down to select the search type, then enter search terms and finally click the search button (or hit the ENTER key). This is exactly what’s done at one of our affiliate papers, the Bellingham Herlad. That approach takes up precious space in the search bar which could otherwise be left clean and blank in my opinion, or filled with more junk in someone else’s opinion. Another similarly bad approach can be found at the Miami Herald. Either way it’s a waste of space because a user doesn’t need to select a search option if that user is not using the search function.