Designing Responsive Search Forms: Tips & Trends for Web Designers

Every modern website should use a responsive layout. This makes it easier to browse on any device but it makes the page trickier to design.

The beloved search field is one example of a tricky page element. With responsive layouts on the rise web designers have new trends for search forms making them both accessible and stylish.

Let’s take a look at some examples of search form trends on the web. These should help you plan your own search UIs and give you some ideas for your next project launch.

Dropdown Nav Search
By far the most common search feature is the dropdown form. This can be fixed with a link inside a nav bar that toggles the search on & off.

Since many websites use fixed navigation it’s easier to keep the search field visible everywhere.

But even with a static navbar you’ll find this dropdown search feature to be incredibly practical. There just isn’t much room elsewhere on a responsive page to squeeze a search form without hurting the main content.

Search Engine Journal does this right with a quick & easy dropdown search field in the top-right corner. It relies on a small magnifying glass icon which should be universal to everyone.

Once the field is displayed it’ll automatically change the magnifying glass into an “X”. It’s a good way to clarify the user experience so people know they can close the field at any time.

Not to mention the SEJ design is fantastic and it blends perfectly with the layout on all devices.

Problogger is another nice example that does things a bit differently between desktop & mobile.

When you’re browsing on a smaller screen you get the typical magnifying glass with the dropdown field.

But desktop users have more space in the navbar which encourages a fully-functional working search field. Pretty cool!

You might try this if you have enough space in the nav for a complete form.

Another site following this same technique is Skinny Ties.

Notice how their default search field is much smaller than other links in the nav. This way it doesn’t take up much space and it can stay visible even on smaller devices.

Fullscreen Modal
If you don’t like the dropdown effect you can try using a modal window instead.

On the surface this might look similar since it’s connected to a search icon. But instead of the form dropping down from the navbar it’ll appear over the page in a modal window.

You can see a clean example of this on Full Home Living where the search modal overtakes the entire screen.

Read More: Designing Responsive Search Forms: Tips & Trends for Web Designers