The 15 Column 1200px Grid System
A logical approach to planning & prototyping your new, responsively designed website.
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.
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.
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!
The 960px Grid System
The 12000px Grid System
Follow us on:
- @WildGreenBean Both! — 1 month 2 weeks ago
- Congratulations to @calumlockie on his Daytona Drive. Best of luck. http://t.co/Pk80ULzwT2 — 1 month 2 weeks ago
- Magento chooses Drupal to launch its new website on http://t.co/MO0iTR0iRH — 3 months 1 week ago
- http://t.co/gg0x5ex1Wc chooses #Drupal to build it's official site. http://t.co/ipytGeNf3w — 3 months 1 week ago
- Excellent business breakfast at @ThePrintRoom in support of BCHA - many thanks for hosting — 3 months 1 week ago