The basics of webdesign for responsive grids

Question

I've never designed using a grid layout. I want to do that now so my developer can easily change the current layout, that is already made using a row/column grid.

I opened my software, made a grid layout appear and wanted to get going, only to realise I have no idea what the basic 'rules' are. I get the scaling down to different screens, being able to change the amount of columns per screen.

But what about the gutters. How do I use the gutters? I imagine an x amount of pixels between every object is not always wished for, what do I do if I need multiple columns next to each other? Do you go column to gutter, or gutter to column? And what if I want just one row with 3 column wide block + the gutter?

I made a quick illustration, I am hoping you can tell me which of these blocks are right or wrong.

Answer 1

So you've never designed using a grid layout but you want to start doing so. Great! A grid is a designers best friend an a structure that serves as a framework on which you can always lean on to.

As you said, you already get the scaling and the idea behind grids. But a grid layout is much more and I would say it's of great worth to learn.

A few years ago I didn't know how to benefit a grid layout on my designs (print or web) but then I stumbled on teachings of a great graphic designer Mr. John McWade. He's a guy behind Before&After magazine. With his online courses, McWade has taught me a great deal about layout and the benefits of using a grid and really helped me to become a better designer. Based on your question I think you could benefit from learning from him as well. You can check out that course on Lynda here. You have to log in and Lynda.com is a paid service, but they offer a free 30 days trial if you need one.

Then comes your specific question about gutters based on your illustration. You should check out Bootstrap's documentation about their grid system. In their practice they use horizontal padding to create the gutters between individual columns, so you don't actually even see the gutters in there and therefore they are in a way taken care of. Also, if you like to make more breathing room between some of your columns you can easily do so with off-set class. You can found many excellent resources for learning more about 12 column grid system for Bootstrap or other frameworks alike from internet.

You should focus on understanding how to use a grid layout and the benefits it offers. After all it is just a grid. If you like or need you can go of it and plays your layout reach to a gutter if you feel like it. Of course this isn't necessarily wise thing to do if you want to maintain a neat and clean layout, but why not there would be cases your design profits it.

Also Threehouse teaches a great online course about how to get up and running with Bootstrap and they also offer a free trial if you want to just tip your toe in first. Here's a link to Guil Hernandezs' great course.

Answer 2

I don't know how much of your problem is dependent on Sketch, does it output to html? I do know the basics of responsive web design though.

The Creative Style Sheet (CSS) is linked from your HTML web page. The style sheet contains Media Queries which check which screen size the user has and delivers styles for that size.

They look like this:

@media only screen and (min-width: 600px) { /* For tablets: / {Styles defining the columns and spacing and everything you want for tablet size} } @media only screen and (min-width: 768px) { / For desktop: */ {Styles defining the columns and spacing and everything you want for desktop size} }

There are several more sizes: phone, tablet horizontal and vertical, laptop and desktop, big screen etc. They are all defined by pixel dimensions. When a certain device opens a web page it gets those styles that work on their screen size.

That's the responsiveness!

Most basically you can design layouts for each screen size and put each in the media query for that screen size. They can be completely different styles, proportions, colors, layout etc.

Usually people use the same format laid out differently on different screen. For example where they have 12 columns on a desktop they'll have 3 columns on a tablet and 1 columns on a phone. The content in the remaining columns is shifted below the top row so you scroll down to see them.

Programming all the responsiveness is pretty complicated for a beginner but there are pre-defined media queries in web platforms like bootstrap, which is free.

If you have the bootstrap CSS linked up to your web page you can use their pre-defined code to set your columns on different screen sizes. They use a max 12 column scheme, so after you start a row you can start a column with class "col-md-12" which means there will be 12 columns on medium screens and it will auto shift them down on smaller screens. A column can have multiple classes if you want get specific you can classify one col-lg-12 col-md-3 hidden-sm which means 12 columns on a large screen, 6 columns on a medium screen and hide it on small screens.

The gutter, or spacing between columns can also be defined the same way, within a media query for large screens make a rule something like padding-right: 20px. and in the media query for small screens make the padding less.

I believe Bootstrap gives the same spacing between columns on large and small screen sizes. It doesn't look funny because 10 pixels is a lot smaller on a phone than on a desktop.

I hope this helps.