Search with Filters Responsive Design Pattern

Here is an interesting design example relating to Responsive Design of a page requiring search filters such as a store or photography gallery. What do you think? Which responsive option would work best from a user standpoint?

I’ve long been interested in design patterns. Common and proven-effective solutions to design problems. Too many settings to display at once and it’s confusing the user? Put them into logical groups and use an accordion design pattern! Patterns got even more interesting with the onset of responsive design. How do these patterns hold up as the available screen space changes?

We might be able to get six or more tabs on a laptop screen, but it’s only really practical to get three on most mobile devices. What do we do? Perhaps converting them into an accordion would work.

Brad Frost has done a great job in keeping a repository of Responsive Patterns. Brad and Dave and I were sitting around after InControl talking about design patterns that hadn’t been explored as much. Dave mentioned “Search with Filters” as an example. There can be quite a lot of UI involved in a search filter, so you have the challenge of displaying that without taking up too much room for the actual results, as well as allowing the user to change those filters without being too disruptive.

On desktop, you can do a split column design with the filters on the left and have plenty of room for results:

large display grid with search options.

On a smaller screen though, you won’t have the room to pull off that split panel. You can squeeze down into one column though:

Small display with search items responsively going into one column

Notice how the title “Search Filters” became an obvious link (just CSS changes). This simple set of filters is already taking up quite a bit of room. Any more complicated and you’d have a full screen of filtering before you saw any results. Probably best to make that a link that hide/show’s the filters:

A better responsive option where the search items condense behind a link

Read full article here: Search with Filters Responsive Design Pattern | CSS-Tricks.