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?

  • 1
    "better to adjust the size of the panels depending on screensize or adjust the number of panels in each row" = likely depends entirely on the content and purpose of the site. Generically speaking, I imagine you'd perhaps do a combination of the two.
    – DA01
    Jul 30, 2013 at 19:15

3 Answers 3


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.


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.

  • I actually think users could, anyone with a desktop or laptop and a tablet could often be switching between a similar pair of screen sizes
    – Toni Leigh
    Jul 31, 2013 at 14:51
  • When they do so, though, they may still care more about consistency of the tiles than consistency of the arrangement of the tiles...especially since the arrangement would not be consistent anyway, being made up of tiles that are different. That was actually the main argument in my answer, but I did not make it clear enough. ...will fix. :)
    – A.M.
    Aug 5, 2013 at 17:20

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.

  • I added a visual aid to help with what my question is about
    – Toni Leigh
    Jul 30, 2013 at 17:42
  • If want, post a mockup to imgur.com and put the link in your answer and I can embed it for you Jul 30, 2013 at 17:52
  • @CharlesWesley: does the "built-in" balsamiq mockup editor fall under the same restriction as images? Otherwise rajankz can simply add the mockup himself when editing his answer (using the icon that looks like an image with a pencil on it)? Jul 30, 2013 at 19:28
  • I do not know the answer to that question Jul 30, 2013 at 20:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.