CODEWITHSUNDEEP
cssresponsive-designzurb-foundation
rishijd
rishijd

Reputation: 1334

Using a semi-responsive web design, what grid to choose?

I have a question on converting an existing (non-responsive) site to a semi-responsive one.

Facts:

Therefore, our site needs to become "semi-responsive" to cater for the 768px breakpoint, 800px breakpoint etc. for common tablets.

Our site uses pixel widths almost everywhere. We're doing research to:

a) Convert our container to a grid-based version where we use 12 columns. This will still be our own coded approach rather than relying on a framework like Foundation or Bootstrap. However the concept will be to use similar percentages as Foundation (e.g. a large-6 on a 12 column grid would be width: 50%) and then we will customise the paddings etc. from there.

b) OR we use a 10 column grid, which makes more sense to use because the numbers are a lot simpler, e.g. large-1 has a width 10%, large-2 (two out of ten blocks) has a 20% width, and so on.

I'm wondering if there is any specific reason to go for a 12 or 10 column grid? We don't have a specific 12 or 10 column design as we are altering the existing website with some element of re-design for the headers/footers. I know that a 12 column grid is standard, and I've never heard of a 10 column grid, but I am curious if you would choose a) over b) above, or not? Is there any compelling reason for me to choose the 12 column grid if a 10 column makes more sense and has less hassle for margins/paddings and getting columns to fit within a 100% width exactly?

We are also considering http://www.responsivegridsystem.com/ which is a different simpler approach, but I think that this is quite different to the above so we'll experiment with this separately.

Any advice would be much appreciated.

Many thanks

Upvotes: 2

Views: 813

Answers (1)

MikeZ
MikeZ

Reputation: 866

Grid systems are normally based on a 12-column grid due to the fact that 12 is divisible by 2, 3, 4, and 6 evenly. If you used a 10-column grid system, you would be able to easily set up a 2 column layout, but three would be much more difficult. The 12-column system makes 2-column, 3-column, 4-column, and 6-column layouts very easy to figure out the math.

Since this is a more custom application, I would suggest not treating this as a responsive grid choice, but rather what responsive methodology will work best for your set of constraints.

I personally recommend Bootstrap's grid system as it is very easy to use and get started with quickly.

Upvotes: 2

Related Questions