When designing PSDs for responsive design, how do grids and columns behave?

Question

Ok, so I have this question that has been bugging me for quite a while, I'll try to explain it in detail.

I'm designing a regular marketing website, and did the desktop version first using the standard bootstrap grid (12 col, 30px gutters). I don't do code (I know I should).

Now when asked to do both tablet and mobile versions this big question came to mind. How do this grid in particular behaves at smaller resolutions? It would make sense that in iPad which is small but still a good resolution the standard of 12 columns and 30px gutter stands. This would make the website just adapt and resize some containers and it would still work.

My problem is with mobile. When we arrive at the breakpoint, do the same number of columns and gutter size stay the same? Because at 30px gutters, the columns become smaller or same size than the gutter. Or should I just make a breakpoint and erase 8 columns and only leave 4?

How should the grid then look in a PSD file aiming for mobile? Or at least, what's the best approach?

Thank you

Answer 1

It behaves the way you tell it to behave. In other words, these frameworks give you a grid to work with...but you have to work with it. You have to decide which breakpoints to use and what will happen with each breakpoint. What changes size, what get narrower, which wraps to a new row, which is hidden, which is shown, etc, etc.

Ideally, you do this WITH the developer, rather than build separate PSD files.

Answer 2

What I have read on Foundation 6 site is that the grid with gutters can scale. In Sketch 3.5 (the best app over Photoshop for responsive design) when I select "responsive web" for my artboards, the grid it auto generates scales so the gutters become narrower at the two mobile break points.

For example, at 768px break the Sketch grid remains 12 columns with a gutter of 10px. And at 320px mobile break, the gutter scales to 4px. It's good to know because that will be your minimum left and right margin for your ONE column in 320px viewport.

Answer 3

The basic idea is that on a phone, the columns collapse so that you only have one column.

If you have this on desktop:

[ column1 ]  [ column2 ]  [ column3 ]

… then on a phone you should see this:

[ column1 ]
[ column2 ]
[ column3 ]

This is all done with basic HTML+CSS.

You might want to look at Skeleton, which is a free responsive design -ready HTML+CSS boilerplate that has worked really well for me. The grid and breakpoints are already defined. You may or may not want to use it, but it at least is really educational. You may not even need to download it. Just resize the browser window on the Skeleton website and you will see the columns collapse. But the template itself is a great resource for designers because you can convert a PSD to a responsive website with very little work.

I don't do code (I know I should).

I am so not one of those people who thinks everybody should code, but the thing is, HTML+CSS is not really coding. There is no logic, no variables, no conditions, no loops. HTML+CSS looks really hard when you first look at it, but once you learn just a little about it, you realize that an HTML tag is equivalent to an object on the Photoshop canvas (e.g. some text wrapped in a p tag is just a text object,) and a CSS rule is equivalent to the properties you apply to that object with Photoshop’s panels (e.g. setting a width and height, adding a drop shadow.) So your Photoshop skills mean you are already 50% of the way there to knowing HTML+CSS. You already speak the language of objects and properties and pixel measurements, you just need to learn an alternate vocabulary. It is more like switching from British English to American English than switching from English to French.

This is a great book that has helped a lot of designers I know. It is specifically written for people who aren’t enthusiastic about code. It has a very light tone and covers just the basics.

Head First HTML and CSS

Answer 4

This is my workflow, what I found easier over time:

When designing PSDs for responsive design you usually do the HTML and CSS too (plus JS), therefore you don't actually need to design in Photoshop the tablet/mobile website, you only need to keep in mind that you need it to change the layout when smaller screens are detected.

Therefore you need to have a good knowledge of Media Queries, a basic example is:

@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

*What this does is detect your screen width, and if the screen has a minimum width of 480px, it changes the background color: Example

Knowing this, you can target a tablet screen width and write the desired CSS that will affect your layout and also, write another rule for a phone screen width with another CSS like:

body{ background-color: black; }
@media screen and (max-width: 480px){ body {background-color: red;} }
@media screen and (max-width: 300px){ body {background-color: green;} }

Translation:

Body background color is black. If the screen width is equal to or lower than 480px, change the background color to red but if the screen width is equal or lower than 300px, change the background color to green.

Hope this helps.

EDIT: Haha, I have just seen this question was asked 10 months ago. :)) Anyway, hope this helps someone.

---