WHY USE IT?
EFFICIENCY
The main benefit of using this grid system is its consistency, allowing for fast prototyping when working individually. In a team environment, the recognizable naming conventions and dimensions allow multiple developers to work on the same project with ease.
2017'S MOST COMMON SCREEN RESOLUTIONS
ACCORDING TO DATA COLLECTED BY W3 COUNTER IN SEPTEMBER 2017
640 x 360
1366 x 768
1024 x 768
1920 x 1080
20.66%
15.64%
7.95%
6.87%
The most recent data suggests that 1366 by 768 is the most common browser size for desktop computers. A 1200 pixel page would fit comfortably on this screen size, with adequate breathing room on either side.
The most popular size, a mobile screen, corresponds with the desktop resolution of 1920 by 1080 pixels (and 1280 by 720 pixels). Modern mobile devices use HDR, so a site that is 1280 by 720 pixels would logically "shrink" down to what the browser considers to be 640 by 360 pixels, but appearing much sharper. Therefore, the 1200 system is also perfect for mobile devices.
OPTIMAL
SIZING
Although many designers resist systematic structure at first because they feel it is too restricting, it actually creates a highly flexible base from which to work. Each page of this site was created using my own 15 column system, allowing for very different layouts while maintaining a sense of unity.
VARIETY
AESTHETICS
The 1200 pixel grid can be utilized to create proportionally unified elements of many different sizes. 15 columns encourages the visually pleasing division of thirds, enabling a plethora of stunning layouts. For example—using numbers to refer to how many columns—one could create pages that are 3-6-6, 5-5-5, 5-10, 9-6, 3-3-9, etc.