The 15 Column 1200px Grid System

Paul Barnes's picture

A logical approach to planning & prototyping your new, responsively designed website.
 

1200px Grid System

Grids have always been an important planning element for designers. They know that a well gridded layout can help ease a user’s cognitive load and help them scan a page with far greater efficiency than one that is chaotic and misaligned. With responsive website design (RWD) now firmly embedded in the industry, determining a workable grid system has never been more important.

In this article we’ll take a look at the 1200px Grid system.

Why 1200px?

All modern monitors (mostly wide-screen) support at least 1280 x 1024 pixel resolution. In January 2010 76% of the computers where using a resolution higher than 1024 x 768 px.


1200 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 40, 48, 60, 80, 120, 150, 200, 240 and 400. This makes it a highly flexible base number to work with.

The 1200px Grid System is based on the 960 Grid System of Nathan Smith.

Determining the Grid’s Complexity

Within the 1200px grid, we need to decide how may columns we will use to form the core language of our grid system. We need enough columns so that we still have a usable grid at the very smallest device sizes but too many columns can over complicate things and be counter productive.

For the purpose of this article, we will choose 15 columns across 1200px. This results in 60px wide columns, separated by 20px margins and capped by 10px gutters left and right.

That’s a happy compromise, which will flow out nicely as we continue to explore the grid across all the other device sizes...

Responsive Break Points

We now need to decide on what are called ‘break points’. A breakpoint is where our website will be re-styled when we change from one size range to another.

Here are some popular break point sizes.

Smart Phones (Portrait) 320px Wide (minimum)
Smart Phones (Landscape) 480px Wide
Tablets (Portrait) 720px Wide
Tablets (Landscape), Laptops, Small Monitors 960px Wide
Larger Desktops 1200px Wide (maximum)

There is an argument to say that just because desktop monitors are getting larger, users don’t necessarily experience websites at full-screen at such sizes so we need to consider these trends carefully and not over-engineer things. This is why we don’t produce breakpoint above and beyond 1200px.

The Responsive Grid

Within the breakpoints, we can simply determine the maximum number of our 60px columns that will fit into these size-ranges and this allows us to final produce a grid for each scenario.

Smart Phones (Portrait) 320px Wide (4 Columns)
Smart Phones (Landscape) 480px Wide (6 Columns)
Tablets (Portrait) 720px Wide (9 Columns)
Tablets (Landscape), Laptops, Small Monitors 960px Wide (12 Columns)
Larger Desktops 1200px Wide (15 Columns)
 

We now have 5 grids to help us plan our responsive website.

Use the grids to rapid prototype and collaborate with the client so that they can see well in advance exactly how their responsive website will play out across the devices and allow them to see the challenges that lay ahead!

Click here to view a working demo to better see how the grid adapts as you manually scale your browser up and down.

 

Related Links:

The 960px Grid System
http://960.gs/

The 12000px Grid System
http://1200px.com/

 

About the author:

is the Senior Drupal Designer at D., responsible for customised website building & theming.You can find him on  and Twitter and Linkedin.

If you’d like to talk to Paul, get in touch via the Contact Us page or give him a ring on UK: 0844 544 9553 or INTL: +44 (1) 202 390822

Blog Categories: 

Free Updates

Stay informed on our latest news!

Subscribe to Free Updates feed

Tags

Archive

Latest tweets