Setting up responsive grids in Photoshop

Question

I'm having some serious trouble understanding one aspect of responsive design. I understand almost all of the basics but one thing that is troubling me is setting up correct grids in Photoshop for various break points. From what I can gather, a responsive design will scale down your grid as the device width decreases. This means that it's not just a case of removing a few columns and your grid is back in proportion.

At the moment the only thing I can think of doing to duplicate a responsive grid is to scale down the document in Photoshop and that will then keep the relationships between the columns, gutters and margins. I've looked at how other people do it and nobody seems to do it this way. I was looking on YouTube and found this chap — he seems to just use the same grid but smaller parts of it instead of resizing the grid completely to match the break point. Can anybody shed some light on this?

Answer 1

The truth is, few are using Photoshop to mock up entire sites anymore. That's just not how modern web design is done in my experience.

Wireframing has become much more of a starting point for design than it was 5 years ago. The days where you'd spend hours creating the perfect mock up in Photoshop, then recreating everything again in HTML are long gone. Any more Photoshop (and others) are used as a supporting tool for fleshing out wireframes, by creating and exporting sprite sheets or images for CSS background use, as opposed to starting points for design. This is also why architectures such as Twitter's Bootstrap have become more prominent.

The theory behind responsive design is that as the screen narrows, the structure of the web page alters to better suit the narrow interface. You simply can not accomplish this dynamic ability within Photoshop. The only way to accommodate the reduction in any raster editing application is to use only a portion of any grid as opposed to resizing a grid.

The way the gentleman in your video link is moving things to the left side of the grid is really how you need to use Photoshop if you are going to configure entire pages. You have to think of everything being laid out at the maximum screen width then simply move, not resize, elements for a smaller width. Responsive design doesn't generally scale anything, it simply moves elements. It's really only images (like photographs) which get resized dynamically in a responsive design, text, buttons, icons, etc rarely get resized.

Answer 2

"Responsive Design" is a fad term to create more revenue for designers that suck at design but love to talk about rules.

EDIT: FOR THOSE THAT CAN'T FOLLOW THE OBVIOUS: Responsive Design postures there being some set of amazing rules able to determine how a design should correctly respond to being in any variation of screen size vs pixel density. This simply isn't possible, practical, or even remotely fun to do. It's faster to custom design layouts and designs for each screen size and pixel density ratio you want to focus on, and push that out for each. And you'll get a better looking result.

--- If there's a trick to this, its bandying around the term long enough with your clients that they consider it something expensive to cover your time. Of course the opposite is true. Designers that usually throw this around are pretending they can somehow automagically design once for every device and their secret sauce will "responsively" adapt their design and layout to all resolutions and screen size/density variations.

--- Nothing could be further from the truth. It's time to face facts on "Responsive Design"... that it's jargon portending to represent something impossible or implausibly limiting as both possible and a good idea, when it's neither.

--- There's just a tonne of work involved in making a site or app work well on all the possible variations, and it involves a lot of compromises.

"Standards Compliant" design and development was the last of these fads, before this one.

Think about what it is... like deeply. Responsive Design is an attempt to make any given layout and design idea work on different resolution devices, screens, browser windows and suchlike. It's impossible to make an allowance for all possible variations and all the different fragmentations of device, browsers and screens.

So you have to step back even further, and consider the content, the users and their expectations and the provider of the content and their ambitions.

Now... what devices, screens and browser windows do you want able to see this content, and in what manner?

Grids can be a guide to your initial ideas, but by their rigid nature they're not going to solve the problem completely, just give you a set of "constraints" within which to try out different mutable containers for the content.

The reason very simple layouts and design are popular is because it takes much less work to mutate them into all the various spaces and places they'll be seen... which means it's still a lot of manual work to figure out how you want the content structured, laid out and layered.

So start with all the screen sizes, browser types and their possible logical window sizes, and screen sizes of your app (or whatever it is) and basically build to order. It's that much fun.

btw, the expected margins, gutters, column dividers etc.. they vary from device to device, screen to screen, OS to OS... so it's kind of up to you how you do it. There's not really any rules.

What that video is suggesting is that there's a common (sort of) LPI (lines per inch, you can use any metric you like here) to the experience, so it's just a matter of figuring out a commonality to the screen size. This "SORT OF" works, but you might want to also consider that a phone is held much closer to the eyes, and they have crazy levels of resolution now... etc.

So, no fun at all, really.

Probably the main thing to consider is keeping a visual consistency across all devices, screens and browsers and just thinking of it as a tonne of work.