This is a guest post by Tom McFarlin.
Blogging platforms and content management systems are great, but they aren’t going to meet everyone’s needs. Some people will find them overkill and would rather roll their own system.
If you’re going to go that route, you’ve obviously got a sharp set of technical chops. One of the most common challenges is making sure that your site looks good on as many monitors as possible. What may look good on a 1280×800 laptop is not going to give the same experience to someone running a 1680×1050 resolution.
And you can’t forget your grandmother – she loves seeing the stuff you’ve done even if it is on a 1024×768 screen.
There’s no silver bullet when it comes to this stuff but there are tools that you can use to make your job easier. Ultimately, it’s up to you but one great framework that makes page development incredibly easy and very flexible across all sorts of resolutions is Nathan Smith’s 960 Grid System (or 960gs).
What’s that? Read more after the jump…
What’s a Grid System?
A grid system (also referred to as grids) refers to the layout of a page such that the markup and styling literally provide a grid in which the elements exist. This means that there are organized relationships among all of the containers on the page.
Grids provide a consistent look a feel across all of the pages of a site or application by leveraging a page’s whitespace to advantage. They also define a context that not only looks good regardless of the browser’s resolution but that make it trivially easy to introduce new elements on to a page. The nice thing about this functionality is that it’s very lightweight – it’s achieved with nothing more than styles and markup.
For specific examples of pages using a grid system, check out the 960gs homepage.
And 960gs is…?
Before getting into too many details about the framework, it’s helpful to checkout some illustrations as to what the framework actually provides. Simply put, there is a parent container in which all other elements exist. This container comes with two variations – 12 columns and 16 columns. Note that both flavors feature 10 pixel wide margins on the side of each column. For added flexibility, the variations can be used separately or together
The 12 column grid is divided into columns of 60 pixels:
And the 16 column grid is divided in columns of 40 pixels:
The framework defines a set of styles all of which can be applied to your page’s elements to achieve your desired layout. Essentially, using 960gs is a matter of including the framework’s stylesheet on your page and then applying the proper class names to your elements.
What Comes With It?
In addition to the actual framework, 960gs ships with some other useful tools that enhance the framework.
The distribution includes a text.css
file and Eric Meyer’s popular reset.css
file. When included, these files neutralize all styles across the board for all HTML elements in order to provide a foundation on which to begin building your site. It’s incredibly helpful because it takes a tremendous amount of pain out of dealing with cross-browser CSS issues.
960gs also ships with a PDF file featuring a printable grid. This is a nice-to-have especially when it comes to wanting to sketch out designs before implementing them. The distribution also includes templates for Illustrator, Photoshop, and Visio.
Instructions for and examples of how to use the framework are available in the download as well as the public code repository.
But Wait, There’s More!
- Nathan Smith did an awesome, in-depth write-up regarding 960gs’ inspiration and development.
- For those of you that love jQuery, there’s a useful plug-in that will overlay a grid on a given page.
- 960gs is awesome, but if you’re looking to apply grids in a fluid layout, checkout the fluid 960 grid system.
- For a typographical grid framework that’s based on 960gs, check out typogridphy.
If there’s another grid framework or other page development utility that you know and love, let us know in the comments!
Now What?
This is it for the Get Your Church Online series. If you’ve enjoyed it, please leave me a comment, email me, or message me on Twitter.
I’ve got some ideas for future articles that are related to much of the stuff covered in this series but before I jump into those, I’d love to know what you guys wanna know.
If there’s something in the web development space that you guys are interested in hearing about or seeing covered here, let us know.
@chaselivingston says
Great article, as usual, Tom. I've never heard of the 960gs system, but I'm going to check it out right now.
human3rror says
it's the awesome sauce. seriously.
Kyle Reed says
I have loved this series.
I think there should be a tomcrunch.com…just saying
human3rror says
hahaah!
dannyjbixby says
Sounds like a very useful tool.
Too bad John is forcing this series to a close. Fight the power, Tom; rage against his machine.
human3rror says
i didn't do nothing!
🙁
joanna says
For screen resolutions, do also take into consideration that a lot of people now use netbooks with quite low screen resolution. Using a netbook you don't expect everything to render perfectly, but it does help if it is readable and navigatable without going insane.
@chaselivingston says
Haha, I thought we had something Tom… You've already forgotten my name 😉
dannyjbixby says
Conspiracy!!
@chaselivingston says
And by had something, I totally meant an online friendship. Nothing weird here…. 😉
Nathan Smith says
Just a quick comment about screen resolution: Almost every netbook on the market supports a minimum of 1024 pixels wide, so no worries there. And, mobile devices like iPhone, Android, etc. all support page zooming. So, no worries there, either. Anyway, just thought I'd clear that up.
For a comparison of screen resolution, see this page…
http://en.wikipedia.org/wiki/Comparison_of_netboo…
All netbooks made by leading manufacturers (Dell, HP, LG, Toshiba, etc) can handle 1024.
joanna says
Hmm, i think my netbook may be using a lower resolution than that. Maybe thats what i get for buying a cheap one
human3rror says
dude, you're so awesome.
Tom says
Thanks Change!
John's right. Once you get a grasp of the container, the columns, and how the styles all fit together, 960gs owns.
Tom says
Ha! John's not forcing it to close – I opted to end it.
BUT if these articles are things that people would like to see continue, then I can keep the series going. I've literally got pages of ideas to share..
dannyjbixby says
You don't have to defend him, we all know the truth 😉
I know this is something that I'm interested in reading about….I don't really have anything that I'm applying it to unfortunately, but it's interesting nonetheless.
Tom says
This is a good point – with the rise of netbooks and even more sophisticated cell phones, making sure the site is still functional should be a priority.
Tom says
And by "Change" I totally meant "Chase.."
Easy mistake, amiright? =/
Tom says
Sounds like a cereal or some sorta ab workout..
joanna says
For screen resolutions, do also take into consideration that a lot of people now use netbooks with quite low screen resolution. Using a netbook you don't expect everything to render perfectly, but it does help if it is readable and navigatable without going insane.
@chaselivingston says
Actually downloaded the package a little while ago. Now to find time to play around with it….
human3rror says
shoo. go away you troll.
;0
dannyjbixby says
bawwwww :((
Graham Brenna says
wow dude! great content here. For now… since I don't have those types of "technical chops" I'm going to stick with a template driven website… for now… 🙂
Rob Lombardi says
I used the 960 grid system on our http://www.veritascc.org website. I was concerned about how it would look on mobile, but it breaks up into columns and looks really nice when viewed in column view. My friend has a Blackberry with a column view mode and it all lined up real nice (even the css navigation broke down perfectly).
It took me a while to get used to the 960 gs, but now I think I'll stick with it after getting comfortable with it, and especially after seeing how it looks flawless on all the browsers, including mobile phones.
Tom says
Sweet, good to hear about the mobile experience.
I agree – once you're comfortable with it, it's hard to beat.