Get Your Church Online: Launching Into Cyberspace – Part 2
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.
Buzz it!
Leave a Reply
27 Responses to “Get Your Church Online: Launching Into Cyberspace – Part 2”
-
Tweets that mention Get Your Church Online: Launching Into Cyberspace – Part 2 - ChurchCrunch -- Topsy.com
[...] This post was mentioned on Twitter by John Saddington and John Saddington, Carol Thomas. Carol Thomas said: Get Your Church Online: Launching Into Cyberspace – Part 2: This is a guest post by Tom McFarlin. Blogging platf… http://bit.ly/5XQUIF [...]
-
5,879 feedburner + twitter followers
-
-
-
-
A Preview of Wordpress Standard Theme Version 2
Great article, as usual, Tom. I've never heard of the 960gs system, but I'm going to check it out right now.
it's the awesome sauce. seriously.
I have loved this series.
I think there should be a tomcrunch.com…just saying
hahaah!
Sounds like a very useful tool.
Too bad John is forcing this series to a close. Fight the power, Tom; rage against his machine.
i didn't do nothing!
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.
Thanks Change!
John's right. Once you get a grasp of the container, the columns, and how the styles all fit together, 960gs owns.
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..
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.
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.
Haha, I thought we had something Tom… You've already forgotten my name
Sounds like a cereal or some sorta ab workout..
Conspiracy!!
And by had something, I totally meant an online friendship. Nothing weird here….
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.
Hmm, i think my netbook may be using a lower resolution than that. Maybe thats what i get for buying a cheap one
dude, you're so awesome.
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.
Actually downloaded the package a little while ago. Now to find time to play around with it….
And by "Change" I totally meant "Chase.."
Easy mistake, amiright? =/
shoo. go away you troll.
;0