How to create interfaces in a graphics editor for responsive grid systems considering that they aren’t pixel-perfect?

Any responsive CSS grid system uses long decimal point percentage values for columns’ width (e.g. “16.66666667%”). I don’t understand how to lay out the grid in Photoshop, because elements of the interface will either be longer, or shorter than the CSS grid expects them to be, which leads to certain problems with the whole layout (elements can shift position because of number rounding)—in the end it doesn’t look the same in a browser.

To illustrate it better, let’s take Bootstrap’s values: column width for the biggest container is ~97px. So, how should I lay out the grid in a graphics editor, should I round it to 97 or 98, or perhaps I should forget about these precise values and design not for the exact pixel numbers, but for the amount of columns instead—whatever the width?

I mean, I just can’t get over the fact that it won’t look the same, paddings would be different from how I drew them (sometimes even different from one another in case of an element taking 100% of a column [or two] width, say, a button with some text on it can have the padding-left of 30, and the padding-right of 32; it’s noticeable and isn’t right), widths would be different, gutters would be different, and so on. I don’t understand how can you create functional and beautiful interface with this inconsistency and lack of precision.

Can you please share your experience? How do you do it? Am I wrong about something? Maybe there’s something good I can read on designing for responsive/fluid grid systems? Thank you very much.


I just can’t get over the fact that it won’t look the same

You have to get over it. 🙂

The bottom line is that you can’t easily create UI mockups in static tools like PhotoShop and expect to properly accommodate responsive layouts.

The best way to deal with this is to design in the browsers. This doesn’t work for everyone, of course, as no everyone wants to write UI code. As such, the second best way is to work with the UI developer side-by-side.

I suggest this flow in those situations:

  • create the mobile view first. Work at 2x or 3x size in your image editor so you know you have plenty of resolution to work with if you need to scale up
  • work with the UI dev to implement the mobile view in code.
  • work with the UI dev to now think about how the other views will come together, tweaking images as needed as you go.

Source : Link , Question Author : awgv , Answer Author : DA01

Leave a Comment