Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I had experience with Twitter Bootstrap and Foundation, and I personally think the only thing I want to use is their grid system. Other features are just bloated.

So I read about the prospect of a grid layout. All of the articles I found are oriented toward an 'artistic' explanation (golden ratio ect). I am a coder at heart, I need a clear & logical reason to use a grid layout (for example: 'columns can be easily stacked on top of each other on mobile screen, and expand horizontally on larger screens'). Can someone give me the pros and cons of applying a grid system to my website? Personally do you think using a grid system is good?

If the answer is yes, should I use a premade grid system like from Twitter Bootstrap/Foundation or just make one for my own? All of the other features are unnecessary for me an irrelevant to my problem.

share|improve this question
add comment

4 Answers 4

up vote 2 down vote accepted

Grid as visual alignment and ordering of blocks not only creates layout structure for more easy content perception, but also creates feel of consistensy and solidness, which partly works on subconscious level. It is hard to express by words, but eyes grasp it quickly. Just compare:
enter image description here

The full answer will contain a bunch of words like cognitive psychology, left brain, right brain, Gestalt principles, emotional design, etc.

But as you point

I am a coder at heart

using the grid system allows you to focus on coding, which is your strength, and having no solid design background, still get appealing layout with less efforts.

share|improve this answer
add comment

A grid layout can create variable height of content areas with a static width. This is great because you can +/- columns depending on resolution of viewing device. The only downside is that for some types of service/site, a grid layout doesn't make sense.

It's hard to answer your question without knowing what you're potentially displaying on the site through the grid system. For some websites it makes great sense. For others, it might only have specific application for certain content. For others, it has no place.

share|improve this answer
    
One of the problem I constantly had to face while using premade grid layout is the width of the sidebar. Normally my sidebar's width doesn't really need to 'scale' much, it doesn't need more space on large screen, but can't cut down much space in smaller screen. In fact I'd really love it if the sidebar stay the same as screen size get larger, and only the main content get scaled. But that doesn't 'feel right' using premade grid: fixed width doesn't comfort to the system's column size. I think if you're applying a grid system, you better use it everywhere in your website, don't you? –  Av Avt Sep 7 '13 at 14:49
    
Generally speaking, building out a template and then editing content within your template is an effective way to run a website. The container changes much less often than the content. I can't advise you on your specific website, as I haven't seen it and I dont know what your content looks like. It is up to you to make the best decision based on your site's unique set of requirements :) –  Arman Sep 7 '13 at 19:16
add comment

As per my point of view, using a premade grid layout is good if you are planning to develop a site or web application that you want to finish in shorted duration of time as you will exempt yourself from writing all the grids from scratch.

As you said, there are many things that are not useful, you can anytime delete them and make code ligher.

Using the grid layout will give you flexibility to concentrate on other aspect of the site design and UI/UX. Also, the responsiveness provided by grid layouts is of real value.

I personally recommend Twitter Bootstrap as its trial and tested one.

share|improve this answer
add comment

The main reason to use a pre-made grid is not artistic (e.g. golden ratio, etc.) at all. In fact it is very practical and has real values

  • Asthetically speaking, using the grid will help you achieve the consistency and alignment across your web pages or throughout the web application. It greatly speeds up the layout process by giving the designers 'anchors' and positioning constraint to use and apply.

  • Implementation-wise, developers can have 'responsive design" functionality for free. As the web is going mobile at the moment, responsive design becomes as important as ever. And caring for the different resolutions is very time-consuming. A grid will scale accordingly as users resize their window and help designers and developers think about the different strategies to cope with the different device setups.

As for the need to use fixed width elements, it's not uncommon to have some elements aligned to the grid and some not. But you can be assured that the ones that are aligned will always be scaled, and adjusted. And the ones that are not will keep its original position and size.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.