February 2013

The 15 Column 1200px Grid System

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

The 12000px Grid System


inFUSed Group Wins Four Enterprise Challenge Awards Including Overall Company of The Year

inFUSed Group Wins

inFUSed Group, the company created by students from Ferndown Upper School as part of The Enterprise Challenge achieved a virtual clean sweep at the 2013 final award ceremony this week.

The company, led by young Managing Director Dom Keeyley and his team, achieved success in the following categories:

  • Overall Company of The Year 2013 
  • Sales & Marketing Award
  • Finance Award
  • Managing Director Award

inFUSed Group was set up with sponsorship funding from mwa Digital and sixteen other businesses in the region.

A regional business leader mentors each group of students throughout the process and recognition also goes to Danny Godfrey, CEO at Renewable Energy Company The Warmer Group who inspired the students to success.

We would like to congratulate everyone who contributed to the cause and of course hats off to Dom and his board of budding entrepreneurs’ for a great achievement.

What is ’The Enterprise Challenge’?

The Enterprise Challenge is an initiative to help develop an entrepreneurial culture in local Schools with the intention of enhancing employability for our next generation.

Managed by the Enterprise & Skills Company in association with local businesses, the Enterprise Challenge is open to Years 10 and 11 in school, and Years 12 and 13 out-of-school.

Students are given the opportunity to make and sell real products to real people for real money using a company they have formed with the assistance of a local business mentor.

The project lasts for 16 weeks and concludes with a competition to find the ‘Company of The Year’, where students need to make presentations to a judging panel consisting of local business professionals.

The outcome is designed to nurture the skills required for success in education, employment, lifelong learning and personal development.

What does the program consist of?

As part of the process of creating a business, students appoint directors, name and brand their company, and decide on how to raise starting capital.

The newly formed company designs and manufactures an innovative product or products to sell at local Christmas trade fairs, defining their companies’ success by creating opportunities and meeting deadlines.

Students will also be responsible for the marketing, finance, sales and IT of the company.

Post Christmas, teams work towards a final company report (reflecting final accounts) and a professional 5-minute PowerPoint presentation.

Each company will compete against the other student companies in the Enterprise Challenge to win the coveted Bournemouth University ‘Company of the Year Award’, as well as many other sponsored trophies.

The program concludes with a dazzling showcase of talent judged by prominent local business people.

inFUSed Group Wins

Free Updates

Stay informed on our latest news!

Subscribe to Free Updates feed



Latest tweets