That Question Is Back!
When I began designing websites professionally, albeit not terribly long ago, one of the frustrating questions at the time was what maximum resolution to support in a given design. Monitors supporting 1024 x 768 were just beginning to offer a comfortable majority, so I worked in the 900 to 940 pixel range.
Then, like so many, I discovered the 960 Grid System by Nathan Smith. It was fantastic, finally giving me an answer I could be confident with, and it has remained so, proven by its widespread use.
Today, however, the same question is once again being rehashed, at least in my mind... Only this time, it is being asked on both ends of the spectrum. There is now an array of mobile devices to properly support, as well as traditional desktops and laptops. The story is the same, but the characters have changed.
The 1080 Grid System does not seek to serve the mobile side of this spectrum, yet... Responsive Design, utilizing the power of media queries, is doing better than most had dreamed, and it is only the beginning. We can't forget about those poor desktops and laptops, though!
Adjusting for mobile use across all of my projects, over 70% of website visitors still come from non-mobile devices. Of this audience, over 80% use resolutions larger than 1024 x 768.
For me, the need for a new solution, as far as fixed-width designs were concerned, was needed, so the 1080 Grid System became my own answer...
It's a Cool Number...
The 1080 Grid System expands upon Nathan Smith's 960 Grid System by simply adding an additional 120 pixels while utilizing the same margins. Thus, anyone who has ever used the 960 Grid System to design can easily do so with the 1080 Grid System. But, I haven't answered the question yet. Why 1080?
Simply, 1080 is a pretty cool number. At least I think so... No, really, it's actually pretty flexible, being divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 24, 30, 40, 60, 120. Unlike the 960 Grid, though, it is not divisible by multiples of 16, but instead, multiples of 18 provide a very suitable alternative.
Thus, two primary grids are offered with 1080: 12 columns and 18 columns. If you enjoy pain, though, the math also works for 24 columns.
As you read in Why Now, the 960 Grid gave me a clear direction in professional web design. That was fantastic, and I thank Nathan Smith for it to this day. If the 960 Grid is your jam, I am certainly not here to change your mind, especially with the spin off of fluid and elastic versions.
If you want to give a wider, fixed-width grid a try, though, and you enjoy the simplicity that made the 960 Grid so easy and fun to work with, the 1080 Grid System might be for you..
So, I welcome you to try it out. If you hate it and think I'm an idiot, let me know. But, if you do try it, and it works for you, I welcome you to share your work with me (and others) at firstname.lastname@example.org.
You Know You Want To...
You know the theory, so now, you know you want to give it a try. Go for it!
Download Package 1.0 Includes:
- Adobe Photoshop Templates for 12 & 18 columns
- PDF Sketch Sheets for 12 & 18 columns
More template formats and rapid prototyping code will be added as warranted. To speed that along, tell industry friends to give the 1080 Grid System a try!