: 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

@Speyer780

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

Vote Up Vote Down

@Holmes874

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.

Vote Up Vote Down