Advertisement


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?

2016/07/25
1
3
7/25/2016 1:31:00 PM

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.

2017/04/13
7
4/13/2017 12:46:00 PM