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

Question

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.

Answer 1

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.

Answer 2

What you mention is precisely why reponsive design is so diffifult. You no longer have a canvas to start with. Starting a design is no longer the same as "opening Photoshop" You have to work in you head first. What do you want the design to look like on different devices, and how should it change when the screen size change just a little (ie. between different types of phones).

You may complain that it's almost impossible to design for all different types of phones at the same time, but the reality is that's how the site will be viewd. In other words, if you stick to some kind of common denominator, and just design for that, your site will still be viewed on different devices. You will have to give up control of at least some parts of the design. This used to be the size of the left and right margin in the old fixed-width days, but things are no longer so simple.

Here's a few tips that come to mind:

• Build up slowly using low-fidelity prototypes. Keep sketching simple prototypes for different screens, and slowly build up your idea of what the whole design should work like.
• Work from content: Start with a very solid idea of what kind of content you have and what goals the site should actually accomplish. Are you serving news stories, video's, recipes? If at all possible, work with the actual content that you'll be serving.
• Think in terms of systems, not pages: Get rid of the idea of a page. A proper responsive design is an intelligent way of translating structured content to whatever device the use happens to be holding. You are designing that system.
• Keep the design simple and flat: There's a reason flat design goes together with reponsive design. Since it only takes a few minutes to sketch out a flat design in Photoshop, you can do a lot of them for different screen sizes, and see how the system looks as a whole rather than how the individual screens look. If every button is perfectly crafted, with many subtle 3d effects, this would simply take too long