Panel arrangement and responsive design

Question

In a user interface it is often appropriate to use to panels arranged in a grid to display content, either as a way of showing content instances to a user or as a way of arranging content instances for administration interaction.

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

When we are designing interfaces in a screen size responsive way is it better to adjust the size of the panels depending on screensize or adjust the number of panels in each row? I am thinking more about the difference between 1280 and 1960 as screen widths rather than specifically responsive screen size and mobile devices.

Is the loss of pattern recognition such as 'third panel on the second row' sufficiently compensated for by keeping the panels a similar size regardless of the screen size?

Answer 1

You should choose a maximum width for the context of your website if switching between 1280 and 1960 pixel widths is the main issue.

UX Stack Exchange does this as well by setting their width (I'm guessing) to 1024 pixels. If you do this, the loss of pattern recognition isn't an issue anymore. If you feel like this is wasted space, setting a maximum width actually improves readability. Source: UX Myths: Myth #28: White space is wasted space.

BUT, if the screen sizes are smaller like for a phone or a (smaller) tablet, I think you should adjust the number of panels for specific width ranges AND adjust the panel widths for everything between the ranges. Also, pattern recognition isn't a big issue because changing layouts is expected behaviour.

Answer 2

Users may benefit more from consistency of the tiles more than from consistency of the arrangement of the tiles...especially since a consistent arrangement would not yield a consistent view in any case, since it would be composed of tiles that are inconsistent.

Also, unless you expect individual users to be regularly switching between 1280- and 1920-pixel screen widths (or regularly using differently sized windows), there should not be much worry about "pattern recognition" as you described it. Most people will get used to where things are on their one screen size, and where people have multiple screen sizes they should not be thrown much by differences in tile arrangements.

Even if they do regularly switch display sizes, as per the argument above they could easily be thrown more by differences in what tiles show (if you resized them per display size) than by arrangements. In other words, you should prioritize tile recognition (and uniformity of tile presentation for other reasons).

The fact that you are using tiles that are no wider than the most narrow possible screen width (if that is true) is a great luxury that enables you to do what one-big-view interfaces can't: keep things quite consistent between displays of different dimensions. It would be a shame to waste that strength by deliberately making the tiles inconsistent.

Answer 3

Based on my experience with design and development, I would suggest a slightly different approach. If you adjust the size of the panels(shrink it, if this is what you meant), then it breaks one major law of responsive design.

Remember if you are using mobile devices, then its okay to increase the number of taps(screens) rather to shrink size and having the user zoom to content(tapping can be done with one hand, while for pinch<->zoom needs the other hand to hold the device).

So in your first screen you can show a list of rows with only one column(probably the most important or understandable one). When a user taps on one of the row, you forward the user to another page with the row data, but now the headings row become one column and the tapped row data becomes 2nd(and the only) column.

Please do remember to have a back button to go back to the row list again.

PS: I don't have enough rep for posting images, but let me know if this makes sense to you.