Advice on how to re-order elements for smaller screen size

Question

I have a web app that displays data in tables. And there's different options to display that data.

In full size the options show as follows:

The two blank boxes are input boxes and together with the select box they determine what data is displayed. Which is updated when the load butting is clicked.

The filter box filters on all table data and the add button ads a new row. There's also a save button that shows up on the right of the add buttong when something is modified.

This looks fine to me but when resized it gets messy as the elements just wrap down:

I added a min width so they won't go beyond this but it doesn't look good and I'm looking for a bit of advice on how to improve the layout.

Answer 1

This seems like a case where you could employ progressive disclosure to hide some of the elements until they're needed. For instance, you could hide the filter controls by default, revealing them when users make the decision to "filter." (Usually that decision is represented by a button or dropdown control.)

^{download bmml source – Wireframes created with Balsamiq Mockups}

You could reveal them in several ways. Which one is "the best" depends a lot on your users and their contexts/backgrounds but a few of them are:

• A modal dialog
• Taking over the toolbar (if space allows that)
• Taking over the whole data-grid
• Using a "popover" like in the mockup above
• Going to a different page altogether and then returning to this one (more of a progressive-enhancement-friendly approach)

Alternately, you could use hide the Add and/or Save buttons until they're needed, if those actions are lower-priority than the filters.